Async & Defer

Page Speed Checklist

What's The Difference Between Async & Defer?

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

Async

Defer

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 external 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="high-priority.js"></script>
<script defer src="general.js"></script>

</head>

The async and defer attributes only apply to external resources indicated with the 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, another benefit of the async and defer attributes is that they download with a lower priority than conventional <script> references.

In most cases and for otherwise-optimized websites without many other high-priority resources, this may not offer much benefit. However for pages with numerous or other high-priority resources, the lower priority of async and defer can help conserve bandwidth for other resources that are more critical to initial rendering of the page.

Similar to selectively increasing the priority of asynchronous CSS resources, a preload resource hint can be used to the same effect for JavaScript if higher-priority loading is needed.

Can Async & Defer Be Used Together?

Any combination of async and defer can be used as needed for each JavaScript file on a page.

While using both attributes on the same <script> reference is valid HTML, it may not be ideal as async and defer are best used intentionally and 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 - their behavior when executing is quite different.

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.

This table can help determine when to use one or the other:

async defer
Loads at a low priority without render blocking Yes Yes
Only applies to external <script>s (with a src attribute) Yes Yes
Executes immediately when loaded Yes No
Executes in no particular order Yes No
Executes in sequence No Yes
Can interrupt initial rendering to execute Yes No
Only executes after initial rendering before the DOMContentLoaded event 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. The advantage of defer is that <script>s can be placed in the <head> to be discovered and start loading sooner that 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 Loading Structure

Eliminating the render blocking effect of JavaScript resources with the async and defer attributes is just one piece of the page speed puzzle. Uncover more opportunities to streamline the loading process for page speed:

Loading Structure