When a browser parses an HTML document and encounters a standard <script src="app.js"></script> tag in the <head>, it panics. It must pause HTML parsing, download the script, and execute it before it can continue rendering the rest of the page.
This is what Google means by "Eliminate render-blocking resources."
To fix this, we use the async and defer attributes. But mixing them up can break your website.
The 'async' Attribute
<script async src="analytics.js"></script>
When the browser sees async, it downloads the script in the background while continuing to parse the HTML. However, the moment the script finishes downloading, the browser *pauses* HTML parsing to execute it.
When to use it: Use async for independent, third-party scripts that don't rely on the DOM or other scripts. (e.g., Google Analytics, tracking pixels). The danger: Because scripts execute as soon as they download, they execute in an unpredictable order. If Script B depends on Script A, but Script B downloads faster, your code will throw an error.
The 'defer' Attribute
<script defer src="main.js"></script>
When the browser sees defer, it also downloads the script in the background. But crucially, it *waits* until the entire HTML document is parsed before executing the script.
Furthermore, deferred scripts are guaranteed to execute in the exact order they appear in the HTML.
When to use it: Use defer for your main application logic, DOM manipulation scripts, or any script that relies on another script (like loading jQuery, then a jQuery plugin).
The Modern Workflow
In 2026, the standard best practice is:
- Place all your
<script>tags in the<head>. - Add the
deferattribute to all of your own application scripts. - Add the
asyncattribute to independent analytics scripts. - Inline incredibly tiny, critical scripts directly (like dark-mode toggles that need to fire before rendering to prevent flashing).
Render-blocking JavaScript is the most common cause of terrible performance scores. Learn the precise differences between async and defer, and when to use each.
- Abdullah Sajid
Leave a comment