Prefer Async Script Loading

What is an async script?

Loading scripts using async (asynchronous) means that the loading process of your scripts will not interrupt the rendering of your webpage. This allows your web page to render more quickly as parsing is not paused every time a script must be loaded. This also allows for multiple scripts to be loaded concurrently which is beneficial given that one script does not depend on another. For instance, the following example shows five resources. Each script is loaded synchronously except for script 2, which is loaded asynchronously. Therefore script 3 does not need to wait for the previous script to finish loading before it can start.

Differences between synchronous and asynchronous

The traditional way of loading scripts is by using the synchronous method. This method simply downloads and executes any scripts that it encounters during the rendering of a web page. This can result in slower page load times if scripts that are not required to display the page are interrupting the critical path. Google Analytics for instance is not required for a page to load and thus should not be loaded synchronously. Synchronous script loading works in the following way:

1. HTML parsing is paused when it encounters a <script> tag which loads synchronously
2. A request is made to fetch the file (if external)
3. The script is downloaded and executed immediately
4. HTML parsing resumes

On the other hand, async script loading works like so:

1. HTML parsing continues as it encounters a <script> tag which loads asynchronously
2. A request is made to fetch the file (if external)
3. The script is downloaded in the background and executed upon completion

As we can see by the differences mentioned between synchronous and asynchronous loading, async is more efficient as it does not interrupt web page parsing as the script is loading.

Why prefer async script loading?

As mentioned above, it is usually preferred to load scripts using async over synchronous. As Google includes site speed as a ranking factor, loading the page as quickly as possible is important both for the SERPs as well as user experience. When implementing the asynchronous attribute to scripts, not only should there be a focus on scripts which are irrelevant to loading the initial web page, but also scripts which are used below the fold.

Async caveats

There do exist a few caveats to using async for loading scripts, these include:

• If your scripts need to be loaded in a particular order, async is likely not the best option, in this case you should use defer.
• Async does not let the page completely load first and then execute the script. To learn more about a recommended alternative to avoiding this limitation read our article Defer Parsing of JavaScript.

If running your site through a speed test and receive the recommendation to prefer async resources, simply add the async attribute to your scripts like so: <script src="example.js" async></script>. Provided that these resources are not required for the initial loading of the web page and also do not need to be executed in a particular order, the async script attribute will help improve the overall deliverability and speed of your site.