Render-Blocking Resources
01 Definition
Render-Blocking Resources meaning: Scripts or styles that must load before the browser can show a page.
Render-blocking resources are CSS or JavaScript files the browser must download and process before it can display page content. They delay the first paint and slow perceived load time. Techniques like deferring scripts, inlining critical CSS, and async loading reduce their impact on speed.
Also called
Why it matters
How Render-Blocking Resources fits the work
Reducing render-blocking resources lets pages show content sooner, which improves perceived speed and can help Core Web Vitals metrics tied to loading.
In context
PageSpeed flagged three render-blocking stylesheets, so the developer inlined the critical CSS and deferred the rest to speed up first paint.
Practical note
Not every script can be deferred safely, since some are needed for the initial layout. Test changes, because moving critical CSS out can cause a flash of unstyled content.