Render‑blocking resources are files that stop the browser from painting any part of the page until they have been downloaded and processed. They are typically external CSS files or JavaScript tags that are placed in the document head without async or defer attributes.
Also called: blocking resource, render‑blocking script, render‑blocking stylesheet
Why it matters
If a page waits for these files, visitors see a blank screen for longer, which can raise bounce rates and reduce conversions for a site that a client is paying for.
How it works
When the browser parses the HTML, it builds a render tree; encountering a <link rel=”stylesheet”> or a <script> without async/defer causes it to pause rendering, fetch the file, and apply its styles or run its code before continuing. The request is made via HTTP and the file must be parsed before the paint stage can proceed.
The mistake people make
Developers often forget to mark scripts as async or defer, or they place large CSS files in the head, assuming the browser will load them in the background. The result is a delayed first paint, making the site feel sluggish.
Related terms
critical rendering path, asynchronous loading, lazy loading, CSS delivery
