Render-blocking resource
A CSS or JS file the browser must fully download and parse before it will paint anything, so one slow file blanks the page.
See it
What it is
A render-blocking resource is any file the browser refuses to paint without. Two families qualify, and both come with a qualifier people skip. Stylesheets: a link rel='stylesheet' halts painting only when its media condition matches the current device, so a media='print' sheet or a min-width query that does not apply on a phone still gets fetched but never holds the paint. Synchronous scripts: a plain script tag stops HTML parsing dead, because the script might call document.write, and how much of the paint that costs depends on placement. One in the head can blank the page; one just before the closing body tag mostly delays what comes after it. One slow file on a slow origin, in the wrong place, can hold a whole page blank.
The fixes are boring and reliable. Scripts: add defer (runs in order after parsing, almost always what you want) or async (runs whenever it lands, fine for isolated analytics). CSS: inline the small slice needed above the fold, and load the rest with media='print' plus an onload handler that swaps it back to media='all', or with a preload swap. Fonts: font files are not render-blocking themselves, but the CSS that declares them is.
Gotcha: Lighthouse flags the resources, not the ordering that created them. Deferring everything is not a win either, since deferring the CSS for your hero just moves the blank screen into a flash of unstyled content. The goal is 'block on exactly the bytes the first screen needs, and nothing else'.
Ask AI for it
Remove render-blocking resources from this page. For every script tag in the head, add defer, or async if it is independent analytics, or move it to the end of body; keep only genuinely first-paint-critical scripts synchronous. For stylesheets, extract the above-the-fold rules into an inline style block and load the full sheet non-blocking via link rel='preload' as='style' with an onload media swap plus a noscript fallback. Do not lazy-load the CSS that styles the hero. Output the edited HTML head and a list of what you changed and why.