Render-Blocking Resources
CSS, JS, and fonts that must load before the browser can show anything on screen.
A render-blocking resource is a file the browser must download and process before it can paint anything — typically a stylesheet or a synchronous script in the head. Each one delays first paint. Inlining the critical CSS and deferring the rest is the standard remedy.
Definition
Render-blocking resources are CSS files, JavaScript files, and fonts that prevent the browser from rendering the page until they are fully downloaded and processed. By default, CSS and synchronous JS in the <head> are render-blocking.
Why It Matters
Render-blocking resources are the #1 cause of slow LCP. If the browser must download and parse 500KB of CSS and 1MB of JS before showing anything, users stare at a blank screen. Eliminating render-blocking resources is the highest-impact speed optimization.
Example
Fix: inline critical CSS in the <head>, load non-critical CSS asynchronously with media="print" onload="this.media='all'", and add defer or async to script tags.
Related Terms
Related Tools
Know the term.
Check your own site.
A free audit tells you whether this is currently costing you score points — and exactly what to change.
Run a free audit