Async / Defer Script Loading
By default, all scripts loading on a website are downloaded and executed in a synchronous manner. These means that if you have many and/or big scripts loading they can block each other and the page in general whilst they are downloading and executing.
This can be very detrimental to the user experience and is particularly wasteful if the scripts in question are not needed for the first content draw. It iss preferred to load scripts in parallel with the rest of the document and assets. This is achieved by using the async and defer attributes on the script tag.
Both async and defer don’t block page rendering while fetching the scripts enabling faster page load times. This brief article will cover the basics of both async and defer, as well as how and when to use them.
Async
Defined By Mozilla : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async
For classic scripts, if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available.
For module scripts, if the async attribute is present then the scripts and all their dependencies will be executed in the defer queue, therefore they will get fetched in parallel to parsing and evaluated as soon as they are available.
This attribute allows the elimination of parser-blocking JavaScript where the browser would have to load and evaluate scripts before continuing to parse. defer has a similar effect in this case.
This is a boolean attribute: the presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.
async doesn’t block when downloading. Once the download is finished it will excute while blocking rendering. This removes the blocking that would have existed for this script while it is downloading. It allows for multiple files to be downloaded concurrently.
To load a script with async we just add the async attribute to the script as below.
1 <script async src=".."></script>Defer
Defined By Mozilla : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.
Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.
Warning: This attribute must not be used if the src attribute is absent (i.e. for inline scripts), in this case it would have no effect.
The defer attribute has no effect on module scripts — they defer by default.
Scripts with the defer attribute will execute in the order in which they appear in the document.
This attribute allows the elimination of parser-blocking JavaScript where the browser would have to load and evaluate scripts before continuing to parse. async has a similar effect in this case.
defer is like async in that it doesn’t block when downloading. It differs from async in that it waits until the html rendering is completed before executing. This completely removes the blocking that would have existed for this script. It also allows for multiple files to be downloaded concurrently.
To load a script with defer we just add the defer attribute to the script as below.
1 <script defer src=".."></script>Scripts with the defer tag will execute in the order they are called. If a script depends on another script setting defer on it is ideal. For example if you had a library and then another script that used that library you can defer them both in order to ensure they don’t block the html render and they execute in the correct order e.g.
1 <script defer src="/jquery.js"></script>
2 <script defer src="/something-that-uses-jquery.js"></script>Conclusion
Normally you will want to design your pages and scripts to use either async and defer in order to eliminate as much blocking as possible. Depending on different use cases you may use async over defer and in others you will do the inverse. Be aware that adding these attributes will change the way the individual scripts function.
There are massive gains to be made from reducing blocking with regards to page load times. This in turn can be a huge lever to pull for user experience.