Render-Blocking Resource
Definition
The browser parses HTML from the top down. When it meets a link to a stylesheet it will not paint until that file has arrived and been parsed, because painting sooner would flash unstyled text that then rearranges itself. When it meets a script tag with neither the defer attribute nor the async attribute it stops parsing altogether, fetches the file, runs it, and only then carries on — so a slow script in the head holds up the HTML behind it as well as the paint. Web fonts block in a narrower way, hiding text for up to three seconds unless font-display says otherwise. Images, iframes and anything fetched later do not hold up the first paint.
Why It Matters
Every blocking file sits directly in front of the moment your visitor sees something. One stylesheet on a slow mobile connection can add 300 to 600 milliseconds before the first pixel, and three blocking scripts in the head can add more than a second between them. That delay is measured as Largest Contentful Paint, and it is also the window in which people give up and go back. The fix is rarely deletion — it is moving scripts out of the blocking path and inlining the small amount of CSS the top of the page needs.
How It Works
The browser builds the DOM from the HTML and the CSSOM from the stylesheets, and it needs both before it can lay anything out, which is why CSS blocks by default. A stylesheet whose media attribute does not match the current context, media="print" for instance, is fetched at low priority and does not block. Scripts block for a different reason: a script can write into the document, so the parser cannot safely read ahead past one, and adding defer or async lifts that restriction. Anything not needed for the first screen can move lower, load on demand, or be marked with a preload hint that starts the download early without holding up the paint. Checking is quick — the Network panel sorted by time shows exactly what sits in front of the first paint.
Real-World Example
A charity annual report at yearly-review.99helpers.site loads four font weights and two blocking scripts before anything appears, and the first paint on a phone lands near two and a half seconds. Cutting the fonts to one weight, adding defer to both scripts and inlining the header styles brings it under a second. The total weight of the files is unchanged; only the order they are allowed to hold things up in has changed.
Common Mistakes
- ✕Putting analytics and chat widgets in the head as plain script tags — they contribute nothing to the first paint and delay it anyway
- ✕Loading an entire CSS framework from a CDN for a page that uses ten rules from it — the whole file blocks before a single word is drawn
- ✕Adding preload to everything — it is a priority instruction, and marking twenty files urgent is the same as marking none
Related Terms
Critical CSS
Critical CSS is the small part of your stylesheet needed to draw the top of the page correctly. Inlining it in the head lets the browser paint before the full stylesheet has arrived.
Defer Attribute
The defer attribute on a script tag tells the browser to download the file while it carries on parsing the HTML, and to run it only once the whole document has been parsed. Deferred scripts run in the order they appear.
Async Attribute
The async attribute lets a script download in the background and run the moment it is ready, without waiting for the rest of the HTML. It does not block parsing, and it does not keep order either.
Largest Contentful Paint
Largest Contentful Paint, or LCP, marks the moment the biggest visible element in the viewport has finished rendering. It is the closest single number to the question a visitor actually asks: when did this page look like it had loaded?
Page Speed
Page speed is how quickly a page becomes useful to the person who opened it — not one number, but a set of measurements covering when content appears and when the page responds to input.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →