JavaScript is a crucial part of modern web development, but it can slow down page loading if not handled properly. By default, scripts block the HTML parser while they are being downloaded and executed, which can negatively impact page performance.
To optimize script loading, HTML provides two key attributes: defer and async. These attributes help control how and when JavaScript files are loaded and executed, improving both speed and user experience.
In this guide, we’ll break down:
– How browsers load scripts by default
– What defer and async do
– Key differences between them
– When to use defer vs. async
– Best practices and examples
How Browsers Load Scripts by Default
By default, when you add a script to your webpage like this:
<script src="script.js"></script>
- The browser pauses parsing of the HTML document.
- It downloads the script from the server.
- It executes the script immediately before continuing to parse the rest of the HTML.
This blocking behavior can slow down page rendering, especially if the script is large or located at the top of the page.
Solution? Use defer or async
To optimize loading, we use the defer and async attributes.
What is the defer Attribute?
The defer attribute tells the browser to download the script while parsing the HTML, but wait until the document is fully parsed before executing it.
Example:
<script src="script.js" defer></script>
How defer works:
✔ Script downloads in the background while the HTML is still being parsed.
✔ Script executes after the entire document is loaded but before the DOMContentLoaded event fires.
✔ Scripts with defer execute in order if multiple scripts are used.
When to Use defer?
- When the script depends on the DOM being fully loaded.
- When multiple scripts need to run in a specific order.
- When using large scripts that shouldn’t block page rendering.
What is the async Attribute?
The async attribute tells the browser to download the script while parsing the HTML, but it executes as soon as it is ready, without waiting for HTML parsing to finish.
Example:
<script src="script.js" async></script>
How async works:
✔ Script downloads in the background while HTML parsing continues.
✔ Script executes immediately when downloaded, interrupting HTML parsing.
✔ Scripts with async do NOT execute in order if multiple scripts are used.
When to Use async?
- When the script does NOT depend on the DOM (e.g., analytics, ads).
- When the script is independent of other scripts.
- When fast execution is needed without blocking the page.
Key Differences: defer vs. async
| Attribute | Script Download | Script Execution | Executes in Order? | Blocks HTML Parsing? | Best For… |
|---|---|---|---|---|---|
defer |
While HTML parses | After HTML is fully loaded | ✅ Yes | ❌ No | DOM-dependent scripts |
async |
While HTML parses | As soon as it’s downloaded | ❌ No | ✅ Yes | Independent scripts |
Choosing Between defer and async
✔ Use defer if:
– Your script modifies or depends on DOM elements.
– You have multiple scripts that need to run in order.
✔ Use async if:
– Your script is independent (e.g., analytics, tracking, ads).
– You need faster execution and don’t care about order.
✔ Use neither if:
– You have inline scripts (these must always execute immediately).
Best Practices for Using defer and async
✅ For Scripts That Modify the DOM: Use defer
<script src="main.js" defer></script>
✔ Ensures main.js runs after the HTML is fully loaded.
✅ For Third-Party Scripts (e.g., Google Analytics): Use async
<script async src="https://www.google-analytics.com/analytics.js"></script>
✔ Ensures analytics runs without blocking other content.
✅ For Multiple Scripts: Use defer for Order
<script src="library.js" defer></script>
<script src="app.js" defer></script>
✔ Ensures library.js runs before app.js, even if app.js downloads first.
Common Mistakes to Avoid
❌ Using both defer and async together
<script src="script.js" defer async></script> <!-- Incorrect -->
✔ Only one attribute should be used.
❌ Using defer or async on inline scripts
<script defer>
console.log("This won't work!");
</script>
✔ defer and async only work with external scripts (src="...").
❌ Using async when scripts need a specific order
<script src="jquery.js" async></script>
<script src="plugin.js" async></script>
✔ plugin.js might run before jquery.js, causing errors.
Conclusion
The defer and async attributes help optimize JavaScript loading, reducing blocking and improving performance.
Key Takeaways
✅ Use defer for scripts that modify the DOM or must run in order.
✅ Use async for independent scripts like analytics and ads.
✅ Never use both defer and async together.
✅ Always place defer scripts in <head> for best performance.
By using these attributes correctly, you can speed up your website and improve user experience without compromising functionality.
🚀 Call to Action
Try optimizing your website’s JavaScript loading with defer or async! Test your page speed before and after using Google PageSpeed Insights and see the difference. Let us know in the comments how it worked for you!