What are render-blocking resources? How should you fix them?
Rendering is how the browser converts all the files it has received from the server into a functioning webpage. Rendering starts after the browser begins parsing the HTML. Parsing is when the browser reads the HTML code.
The browser parses HTML top to bottom. When the browser encounters CSS or synchronous JavaScript in the HTML <head>, it pauses parsing and/or rendering until those files are downloaded and processed. CSS blocks rendering because the browser needs styles to paint (display) the page correctly. JavaScript can block parsing because the JavaScript code might manipulate the HTML.
These pauses can negatively impact various speed metrics, including First Contentful Paint (FCP) and Largest Contentful Paint (LCP).
So how do we fix render-blocking resources?
Option 1: Defer JavaScript
Deferring the load of a JavaScript file tells the browser to wait until parsing is complete before it executes the JavaScript file. This speeds up how quickly the browser is able to move through the HTML, improving rendering.
<script src="script.js" defer></script>Option 2: Async JavaScript
Async JavaScript files are downloaded in parallel with HTML parsing. Once downloaded, they are executed immediately, which can pause parsing. While it can still pause parsing, an async JavaScript file will still typically load much faster.
<script async src="script.js"></script>Option 3: Optimize Critical CSS & JavaScript
Some JavaScript and some CSS files must load so that the page is operable. These are the critical JavaScript and CSS files. For these files, pausing the rendering process to load these files is critical. If these files do not load right away, then the page will not load correctly. You do want to make sure these CSS and JavaScript files are as optimized as possible: make the files smaller, combine redundant scripts, remove anything that is non-essential. If you have to force the browser to pause the rendering process, make sure it won’t be paused long.
Recap
| Feature | Render-Blocking (Synchronous) JavaScript | defer JavaScript | async JavaScript | Optimized Critical CSS/JavaScript |
| Loading Behavior | Blocks HTML parsing and rendering until downloaded and executed. | Downloads in parallel with HTML parsing, but executes after parsing is complete. | Downloads in parallel with HTML parsing, executes immediately when downloaded (may pause parsing). | Blocks HTML parsing and rendering until downloaded and executed. |
| Execution Timing | Executed immediately in the order it appears in the HTML. | Executed after HTML parsing is complete, in the order it appears in the HTML. | Executed as soon as it’s downloaded (not necessarily in order). | Executed immediately in the order it appears in the HTML. |
| Impact on Parsing | Blocks parsing. | Doesn’t block parsing. | May briefly block parsing. | May briefly block parsing. |
| Impact on Rendering | Blocks rendering. | Doesn’t block rendering. | Doesn’t block rendering (initially). | May briefly block rendering. |
| Example HTML | <script src=”script.js”></script> | <script src=”script.js” defer></script> | <script src=”script.js” async></script> | Minimized, combined, and optimized CSS/JS files. Or inline CSS/JS. |