Add defer or async attribute to dynamically generated script tags via JavaScript

2 min read 07-10-2024

Add defer or async attribute to dynamically generated script tags via JavaScript

Dynamically Deferring or Asynchronously Loading Scripts with JavaScript

In web development, optimizing page load speed is crucial for user experience. Scripts, especially large ones, can significantly impact loading time, causing a delay before the page becomes interactive. One way to mitigate this is by using the defer or async attributes on script tags, but what happens when you generate these tags dynamically with JavaScript?

The Problem: Dynamically Created Script Tags

Let's consider a scenario where you want to load a third-party analytics script after the initial page load. You might use JavaScript to dynamically create the <script> tag and append it to the DOM:

function loadAnalyticsScript() {
  const script = document.createElement('script');
  script.src = 'https://example.com/analytics.js';
  document.body.appendChild(script);
}

However, this code will block the page from loading until the script is fully downloaded and executed, defeating the purpose of optimizing load time.

The Solution: Deferring or Asynchronously Loading

To address this issue, we need to add either the defer or async attribute to the dynamically created script tag.

defer attribute: The script will be executed after the HTML parsing is complete but before the DOMContentLoaded event fires. This allows the browser to continue rendering the page while the script is being downloaded in the background.
async attribute: The script will be downloaded and executed as soon as it is available, without blocking the page rendering. However, its execution order is not guaranteed.

Here's how to modify the code to add the defer attribute:

function loadAnalyticsScript() {
  const script = document.createElement('script');
  script.src = 'https://example.com/analytics.js';
  script.defer = true; 
  document.body.appendChild(script);
}

You can similarly add the async attribute:

function loadAnalyticsScript() {
  const script = document.createElement('script');
  script.src = 'https://example.com/analytics.js';
  script.async = true; 
  document.body.appendChild(script);
}

Choosing Defer or Async

The choice between defer and async depends on the script's functionality and your desired behavior.

Use defer if the script needs to execute after the HTML parsing is complete but before other scripts might modify the DOM.
Use async if the script's execution order doesn't matter and you want to speed up the page rendering by downloading it concurrently.

Best Practices and Additional Tips

Consider script dependencies: If a script relies on other scripts to function correctly, use defer to ensure the dependencies are loaded before the dependent script executes.
Optimize script loading: Combine smaller scripts into a single file or use a script bundler to reduce the number of requests.
Prioritize critical scripts: Load essential scripts that affect the core functionality of your page before less critical ones.
Use browser caching: Leverage browser caching to prevent unnecessary downloads of scripts that have already been fetched.

Conclusion

Dynamically adding defer or async attributes to script tags is crucial for optimizing page load speed in modern web development. By using these techniques, you can significantly improve the user experience, leading to faster loading times and enhanced interactivity. Remember to carefully consider the nature of the script and your desired execution order when choosing between defer and async.