When it comes to optimizing website performance, how you load JavaScript files can make a big difference. One of the most common questions developers ask is: “Defer vs Async — which should I use to load scripts?” In this guide, we’ll show you how both work, and help you choose the right one.
Why Script Loading Matters
JavaScript is powerful, but if it’s not loaded properly, it can slow down your site. When a browser encounters a <script> tag, it has to decide whether to load it immediately or continue parsing the HTML.
Traditionally, scripts block the rendering of the page. That means users wait longer to see content. This is where defer and async come in.
Understanding the Basics
There are three common ways to load external scripts in HTML:
<script src="script.js"></script> <!-- Default behavior -->
<script src="script.js" defer></script> <!-- Defer -->
<script src="script.js" async></script> <!-- Async -->Each one tells the browser something different about when and how to load the JavaScript.
Default Script Loading
Without any attribute, the browser stops parsing HTML, fetches the script, executes it, and then continues. This can block rendering and slow down the perceived load time.
What Is defer?
The defer attribute tells the browser to download the script in the background while parsing the HTML. Once the HTML is fully parsed, the script executes in the order it appears.
<script src="first.js" defer></script>
<script src="second.js" defer></script>In this case, first.js will always run before second.js, even if it finishes downloading later.
Best used for: Scripts that need the HTML content to be fully loaded before they run, especially if they depend on specific elements on the page or must run in a certain order.
What Is async?
The async attribute tells the browser to download and execute the script as soon as it’s ready, without waiting for HTML parsing to finish.
<script src="analytics.js" async></script>Scripts load independently and run as soon as they’re available. There’s no guaranteed order.
Good for: Independent scripts like analytics or ads that don’t interact with the DOM or other scripts.
Defer vs Async: Key Differences
| Feature | defer | async |
|---|---|---|
| Download timing | In parallel with HTML | In parallel with HTML |
| Execution timing | After HTML is fully parsed | As soon as it’s downloaded |
| Order of execution | Preserved | Not guaranteed |
| Blocks HTML parsing | No | No |
| Use case | DOM-dependent scripts, multiple files | Third-party, standalone scripts |
Code Example: Defer vs Async in Action
Here’s a simple HTML snippet to show how defer and async behave differently:
<!DOCTYPE html>
<html>
<head>
<title>Defer vs Async</title>
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>With defer, both script1.js and script2.js are downloaded while the HTML is parsed, then executed in order after parsing completes.
Now with async:
<script src="script1.js" async></script>
<script src="script2.js" async></script>These scripts may execute in any order once they’re downloaded. If one script depends on the other, things could break.
Best Practices: When to Use What
- Use
deferfor scripts that manipulate the DOM or depend on other scripts. - Use
asyncfor scripts that run independently, like Google Analytics or ad networks. - Avoid mixing
deferandasyncfor scripts that are interdependent.
SEO and Performance Considerations
Google recommends using defer to improve page speed without delaying content rendering. Since search engines now render pages like a browser, optimizing script loading helps both user experience and SEO.
Tools like Lighthouse and PageSpeed Insights will flag render-blocking scripts. Using defer or async resolves these issues.
Conclusion: Defer vs Async — What’s the Best Way?
There’s no one-size-fits-all answer, but here’s the quick takeaway:
- Use
deferwhen script order matters or DOM is involved. - Use
asyncwhen script independence is guaranteed.
In the defer vs async debate, it really comes down to what your script is doing. Understand their behavior, and you’ll write faster, more efficient websites.
Need more speed? Combine defer/async with script minification, bundling, and lazy loading for even better performance.