Performance
Render-blocking resource
Render-blocking resource is a stylesheet or synchronous script that the browser must download and process before it can paint the page. Everything after it in the document waits.
How it is measured
Lighthouse lists them under 'Eliminate render-blocking resources' with estimated savings in milliseconds. In the Performance panel, look at the gap between navigation start and first paint, and in the waterfall at the CSS and synchronous `<script>` requests in the head that finish before First Contentful Paint.
CSS in the head blocks rendering by default. Scripts without `async`, `defer`, or `type=module` block parsing and the paint behind them. Chrome also reports a `renderBlockingStatus` field on resource timing entries, which lets you list them from code.
Worked example
A WordPress site's head loads 7 stylesheets (310 KB in total) and 3 plugin scripts without `defer`. On a throttled 4G run, FCP is 3.3 s, and the waterfall shows the last blocking file finishing at 3.1 s. The theme's above-the-fold CSS is only 14 KB.
Inlining that 14 KB, loading the remaining CSS without blocking, and adding `defer` to the three scripts moves FCP to 1.6 s. The page looks the same once loaded.
How it differs
A render-blocking resource delays the first paint. Critical CSS is the cure for one kind: the small slice of styles needed for the first screen, inlined so nothing has to be fetched before paint. A large file is not always blocking; a deferred 500 KB script slows the page without delaying its first paint.
Common errors
Adding `async` to scripts that depend on each other. Deferring all CSS without inlining the critical rules, causing a flash of unstyled content. Treating every script as blocking. Moving scripts to the footer and calling it the same as `defer`. Using `@import` in CSS, which chains requests.
In practice
Run Lighthouse and list the blocking files. Add `defer` to scripts that do not need to run while parsing, inline the first-screen CSS, and load the rest after. Check the filmstrip to confirm there is no flash of unstyled content.