Async & Defer
Page Speed ChecklistWhat'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
- 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
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:
<!-- 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 like the example above. 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.
Similar to selectively increasing the priority of asynchronous CSS resources, a preload resource hint can be used to the same effect for JavaScript on the rare occasion that higher-priority loading is needed.
Can Async & Defer Be Used On The Same File?
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 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 - 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.
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. 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 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: