Async & Defer

Page Speed Checklist

What's The Difference Between Async & Defer?

The Async & Defer Attributes
The Difference Between Async & Defer
When To Use Async
When To Use Defer

async and defer both load JavaScript asynchronously without render blocking, but async executes as soon as possible and in no particular order while defer runs in sequence toward the end of the loading process, just before the DOMContentLoaded event.

Async

Downloads in the background at a low priority (same as defer)
Can interrupt page rendering to execute
Executes as soon as possible and in no particular order

Defer

Downloads in the background at a low priority (same as async)
Won't interrupt page rendering to execute
Executes in sequence just before the DOMContentLoaded event

Detailed Comparison

The Async & Defer Attributes

async and defer are optional attributes for the HTML <script src="..."> tag that instruct the browser to download the indicated file in the background at a low priority without interrupting the process of rendering the page in the browser.

This makes the async and defer attributes a simple way to eliminate the render blocking effect of JavaScript resources while also triggering the download as early as possible in the loading process by placing the <script> references in the <head> section:

HTML

    <!-- other <head> stuff -->

    <script async src="super-high-priority.js"></script>
    <script defer src="general-stuff.js"></script>

</head>

The async and defer attributes only apply to <script>s with a src attribute. Inline <script>s are loaded as part of the HTML and always interrupt rendering to execute.

Loading Priority

Along with eliminating the render blocking effect of JavaScript, another benefit of the async and defer attributes is that they download with a lower priority than conventional <script> references which can help conserve bandwidth for other resources that are more critical to initial rendering of the page.

Although not typically desirable for relatively low-priority resources like JavaScript, as with asynchronous CSS resources, loading priority can be optionally increased with the fetchpriority="high" attribute.

Can async & defer Be Used On The Same File Reference?

Technically yes, however...

While using both async and defer attributes on the same <script> reference is valid HTML, it's not recommended as async and defer are best used purposefully, depending on the way any given JavaScript resource should fit into the loading process.

Using both on the same <script> reference may also cause inconsistent or undesirable cross-browser behavior.

The Difference Between Async & Defer

Any given resource on a page is first downloaded and then applied to or run on the page. While the loading behavior of async and defer are the same - loading in the background without render blocking - the difference lies in their behavior when executing.

JavaScript files with the async attribute will run in no particular order as soon as they're loaded, whereas defer'd resources run in sequence (in the order they appear in the HTML) toward the end of the initial loading process, right before the DOMContentLoaded event.

How async & defer impact the loading process and HTML parsing timeline.

Detailed Comparison

More detail on the difference between async and defer:

	async	defer
Loads at a low priority without render blocking	Yes	Yes
Only applies to `<script>`s with a `src` attribute	Yes	Yes
Can interrupt initial rendering to execute	Yes	No
Executes immediately when loaded	Yes	No
Executes just before the `DOMContentLoaded` event	No	Yes
Executes in no particular order	Yes	No
Executes in sequence	No	Yes

The effect of the defer attribute is similar to placing a conventional <script> reference at the bottom of the HTML before the closing </body> tag, however the advantage of defer is that <script>s can be placed in the <head> to be discovered and start loading sooner than resources found lower on the page.

When To Use Async

async is best for very high priority JavaScript resources that should run as early as possible in the loading process.

In the interest of page speed, async should be used with care and typically only for files upon which initial rendering of the page depends. async files also run in no particular order, so async is typically reserved for files that are completely independent and don't rely on other JavaScript resources to run first.

When To Use Defer

defer is ideal for general JavaScript resources that aren't critical to the initial rendering of the page and can be run later in the loading process.

defer is the best choice in most cases for optimal page speed and user experience. Particularly for slower mobile devices, defer allows the browser to display content to the user as quickly as possible by rendering the most critical HTML and CSS first and delaying JavaScript execution to a more appropriate stage in the loading timeline.

Streamline The Loading Process

The async and defer attributes are great tools to eliminate render blocking JavaScript, but what about other resources like CSS? Learn more about how render blocking affects page speed and how to streamline the loading process with a progressive approach:

Eliminate Render Blocking Resources