JavaScript Defer vs Async – Which Is Better?

JavaScript Defer vs Async – Which Is Better?

Whitewood Media

Understanding the difference between JavaScript defer vs async is critical for improving site speed, SEO, and user experience. Both attributes help prevent render-blocking scripts, but they behave differently in how and when the browser executes them. Choosing the right strategy can significantly improve Core Web Vitals and overall performance.

 

 

 

What Are Defer and Async in JavaScript?

When you load JavaScript files in a webpage, browsers must download and execute them. Without optimization, scripts can block the rendering process, delaying Largest Contentful Paint (LCP) and hurting page-load speed. Adding the async or defer attribute changes how the browser handles script execution.

 

Default Behavior (not async, nor defer)

We generally connect our HTML page with external JavaScript using the <script> tag.

 

Traditionally, JavaScript <script> tags were often placed in the <head> section of the HTML document. However, doing so means that the parsing of the HTML is blocked until the JavaScript file is fetched and executed, leading to slower page load times.

 

Nowadays, we mostly prefer to keep the <script> tag after all the contents of the <body> element so the page loads first.

 

Example of default script: 

<script src="example.js"></script>

 

This is the flow of how HTML scripts run and get parsed normally:

 

 

Async Attribute

The async attribute tells the browser to download the script while HTML parsing continues. However, the script executes immediately once downloaded—even if the HTML is still parsing. This means async scripts may run out of order, depending on file size and network speed.

Example of async script: 

<script src="app.js" async></script>

This is the flow of how HTML scripts run and get parsed with async:
  

The async attribute tells the browser to download the script while HTML parsing continues. However, the script executes immediately once downloaded—even if the HTML is still parsing. This means async scripts may run out of order, depending on file size and network speed.

 

Defer Attribute

The defer attribute also downloads the script in parallel while parsing HTML, but it waits to execute until after the document is fully parsed.

 

Defer ensures scripts are run in order and only after the page structure is ready.

Example of defer script: 

<script src="app.js" defer></script>

The defer attribute also downloads the script in parallel while parsing HTML, but it waits to execute until after the document is fully parsed. This ensures scripts run in order and only after the page structure is ready.

 

This is the flow of how HTML scripts run and get parsed as defer:

 

 

Key Differences Between Defer and Async

Feature Async Defer
Download timing Parallel Parallel
Execution timing Immediately after download After HTML parsing completes
Executes in order No Yes
Blocks HTML parse Can interrupt parsing No

 

 

Which Is Better — Defer or Async? 

It depends. 

 

When Async Is Better

Use async for scripts that do not depend on other scripts and do not impact the initial content layout—like analytics trackers, advertising tags, or asynchronous widgets. Async improves First Input Delay (FID) and prevents unnecessary blocking.

 

When Defer Is Better

Use defer for scripts that control page components, rely on other libraries, or must load in the correct order. Defer is ideal for UI frameworks, navigation scripts, and interactive elements that must run after the DOM is complete.


 

Impact

SEO and Core Web Vitals Impact

Both async and defer improve page load speed and reduce render-blocking resources, which is crucial for SEO. Defer generally provides more predictable performance because scripts wait until after the DOM is parsed, contributing positively to LCP and CLS stability.

 

Best Practices for Using Async and Defer

  • Add async to independent third-party scripts.
  • Use defer for internal scripts and frameworks.
  • Place scripts in the <head> with defer for optimal load.
  • Test performance with tools like Lighthouse and WebPageTest.

The right choice depends on your stack, dependencies, and how the scripts affect critical rendering paths. A mixed approach is often ideal.

 

Conclusion — Defer vs Async

Both attributes help improve performance, but they serve different use cases. Async is best for non-dependent scripts, while defer is best for structured, page-critical code that must execute in order. Understanding when to use each is essential to page speed optimization, better Core Web Vitals, and improved SEO performance.

Back to blog