Async vs Defer: How To Load JavaScript For Performance
Introduction
In HTML, there are three main ways you can load a JavaScript module:
Synchronous JavaScript (default)
Asynchronous JavaScript (async)
Deferred JavaScript (defer)
Understanding how each of those works and how they alter the execution of your JavaScript modules is key to avoiding errors and improving your website’s load speed.
Key Takeaways
Synchronous JavaScript
→ By default, JavaScript modules in the <head> of your page get executed before HTML parsing begins.
→ Only use this option if you need the script to load before the content on the page.
Asynchronous JavaScript
→ Async JavaScript modules don’t block HTML parsing during download but do so during execution (which happens as soon as they’re done downloading).
→ Use this option for independent scripts.
Deferred JavaScript
→ Deferred scripts are downloaded while the browser parses HTML but only executes after the entire page loads.
→ Defer scripts that depend on or interact with the DOM.
Here’s a visual representation of how each of them works:
Synchronous Scripts
By default, every script you add to your page is downloaded and executed synchronously.
In simple terms, when the browser finds a synchronous script, it downloads and executes it immediately. When it’s done, it will go ahead and handle the rest of the page.
This means that if you place synchronous scripts in your page’s <head> tag, they will all be downloaded and executed BEFORE the parsing of the HTML.
For that reason, having synchronous scripts in the head tag can significantly slow down your website’s load speed, especially if the modules are large and complex.
In general, avoid using synchronous JavaScript whenever possible. Only use it if you must load a script before the page loads.
Asynchronous Scripts
When you add the async attribute to a JavaScript script, you tell the browser to download the module asynchronously while rendering the page.
In other words, the script will be fetched in the background while the page’s content gets parsed and displayed. As a result, using asynchronous scripts has the potential to drastically improve your page’s performance.
Once the script has been downloaded, it will immediately be executed.
It’s important to note that asynchronous scripts do not necessarily render in the order they appear in the HTML. This peculiarity makes them perfect for independent scripts - and definitely not the best choice if you have modules that depend on each other.
Deferred Scripts
Similar to asynchronous scripts, the download of deferred scripts will not block the rendering of the page. The main difference is that the execution of these scripts will be “deferred” until the HTML parsing is complete.
More specifically, deferred scripts will be executed once the HTML parsing is complete but before the “DOMContentLoaded” event is fired. (if you’re not familiar with the term, it’s basically an event that tells you when the DOM is ready to be manipulated and interacted with)
Another critical difference is that deferred scripts will be executed in the same order they appear on the page.
As a rule of thumb, use the defer attribute for scripts that depend on or interact with the DOM.
Conclusion
So, that's everything you need to know on how to load your JavaScript modules to make your website load faster.
Thanks for reading!
- Luca
Introduction
In HTML, there are three main ways you can load a JavaScript module:
Synchronous JavaScript (default)
Asynchronous JavaScript (async)
Deferred JavaScript (defer)
Understanding how each of those works and how they alter the execution of your JavaScript modules is key to avoiding errors and improving your website’s load speed.
Key Takeaways
Synchronous JavaScript
→ By default, JavaScript modules in the <head> of your page get executed before HTML parsing begins.
→ Only use this option if you need the script to load before the content on the page.
Asynchronous JavaScript
→ Async JavaScript modules don’t block HTML parsing during download but do so during execution (which happens as soon as they’re done downloading).
→ Use this option for independent scripts.
Deferred JavaScript
→ Deferred scripts are downloaded while the browser parses HTML but only executes after the entire page loads.
→ Defer scripts that depend on or interact with the DOM.
Here’s a visual representation of how each of them works:
Synchronous Scripts
By default, every script you add to your page is downloaded and executed synchronously.
In simple terms, when the browser finds a synchronous script, it downloads and executes it immediately. When it’s done, it will go ahead and handle the rest of the page.
This means that if you place synchronous scripts in your page’s <head> tag, they will all be downloaded and executed BEFORE the parsing of the HTML.
For that reason, having synchronous scripts in the head tag can significantly slow down your website’s load speed, especially if the modules are large and complex.
In general, avoid using synchronous JavaScript whenever possible. Only use it if you must load a script before the page loads.
Asynchronous Scripts
When you add the async attribute to a JavaScript script, you tell the browser to download the module asynchronously while rendering the page.
In other words, the script will be fetched in the background while the page’s content gets parsed and displayed. As a result, using asynchronous scripts has the potential to drastically improve your page’s performance.
Once the script has been downloaded, it will immediately be executed.
It’s important to note that asynchronous scripts do not necessarily render in the order they appear in the HTML. This peculiarity makes them perfect for independent scripts - and definitely not the best choice if you have modules that depend on each other.
Deferred Scripts
Similar to asynchronous scripts, the download of deferred scripts will not block the rendering of the page. The main difference is that the execution of these scripts will be “deferred” until the HTML parsing is complete.
More specifically, deferred scripts will be executed once the HTML parsing is complete but before the “DOMContentLoaded” event is fired. (if you’re not familiar with the term, it’s basically an event that tells you when the DOM is ready to be manipulated and interacted with)
Another critical difference is that deferred scripts will be executed in the same order they appear on the page.
As a rule of thumb, use the defer attribute for scripts that depend on or interact with the DOM.
Conclusion
So, that's everything you need to know on how to load your JavaScript modules to make your website load faster.
Thanks for reading!
- Luca
Luca Da Corte is a freelance Framer Expert and SEO specialist. When he’s not working on some exciting projects, he curates a blog where he shares insights, resources, and experiences on everything regarding websites.
Table Of Contents:
Table Of Contents:
Table Of Contents:
