Render-Blocking Resources
Why Some Files Block Rendering
Render-blocking resources are files, mainly stylesheets and synchronous scripts, that the browser must download and process before it can show the page. Until they are handled, the browser holds back the first paint so the visitor does not see an incorrect or unstyled layout. The overall sequence is described in the critical rendering path article.
Stylesheets block rendering by default. A browser cannot know how the page should look until it has read the CSS that applies to it, so it waits. Regular scripts block the HTML parser for a different reason: a script can change the document while it runs. The browser therefore pauses parsing, fetches the script, runs it and only then continues.
This is why a page with a large stylesheet, or a script placed in the head without any attribute, can look blank for longer even when the rest of its content is ready.
How async and defer Change Script Loading
The script attributes async and defer tell the browser how to load an external script without stopping HTML parsing in the usual way.
- async downloads the script in parallel and runs it as soon as it arrives. Parsing may pause at that moment, and the order of execution between async scripts is not guaranteed.
- defer also downloads in parallel, but runs the script after the HTML has been parsed, in the order the scripts appear.
Neither attribute applies to inline scripts, and a script the page needs immediately may still have to load first. Scripts that change the layout before the page is displayed can still delay the first paint. Stylesheets do not use these attributes, and their handling is covered in the critical CSS article.
A Common Pattern on a Small Business Site
A small business site loads five scripts in the head: a font loader, a slider, an analytics tag, a cookie banner and a chat widget. Each of them can hold up the first paint. The page looks blank for two seconds, even though its text has already arrived.
Reviewing which of these scripts the first screen really needs, and which could wait, is the starting point for understanding the problem. The cost of running such code is explained in the JavaScript execution article.
Frequently asked questions
Is every CSS file render blocking?
Most stylesheets linked in the head are render blocking by default. Some stylesheets are limited to a media condition that does not match the visitor's screen, such as print styles, and these do not block the first paint. The browser still downloads them, but it does not have to wait for them before showing the page.
Should I use async or defer for all scripts?
Not automatically. Defer suits scripts that depend on the page structure and do not need to run before content is displayed. Async suits independent scripts, such as some analytics tags, where the order of execution does not matter. Some scripts must run before the page is shown and cannot be deferred safely.