Render-blocking resources
A script or stylesheet in <head> that the browser must resolve before painting anything. defer, async and preload fix the three common cases.
What it is
A render-blocking resource is a stylesheet or synchronous script in <head> that the browser must download and process before it can paint anything — the page stays blank until every one of them resolves. This check looks specifically at resources in the document head, the ones the browser encounters before it can render a single pixel.
It's distinct from Total Blocking Time: TBT measures blocking after the page has started rendering; this measures what delays that first render happening at all.
Why it matters
Every render-blocking script in <head> adds its full download-plus-parse time directly to how long a visitor stares at a blank page — and that cost compounds when several are queued one after another on a slow connection.
Adding defer or async to head scripts, and loading non-critical CSS via a preload-then-swap pattern, lets the browser paint using what it already has while those resources continue loading in the background.
How to fix it
with a reference doc<script src="/app.js" defer></script>
<link rel="preload" as="style" href="/non-critical.css" onload="this.rel='stylesheet'">Related checks
3This is one of the 75 checks the scanner runs. See what we check for the full list, every severity weight, and how the score is computed from them.