Async & Defer Loading

Async & Defer Loading: Frequently Asked Questions

What is Render Blocking?

The process in which the web resources (ex: JS, CSS & HTML files) that are loaded in the webpage potentially cause the browser to block the rendering of the page until they are loaded is called as render-blocking. It is because these web files can be large with hundreds of kilobytes of data that must be loaded, in addition to the HTML, before it is rendered.  Therefore, always look for the best solution to eliminate render-blocking resources in above-the-fold content and optimize CSS delivery. Two techniques that are widely used are async & defer Loading.

What are Render-blocking JavaScripts?

JavaScripts that block the rendering of meaningful content are called ‘Render Blocking JavaScripts’. They need to be either deferred or use async.

What is Critical JavaScripts?

JavaScripts files that are necessary to load during optimized critical rendering.

What is Non-critical JavaScripts?

JavaScript files that can wait to load until the first meaningful content (the first paint) of the webpage have loaded are called as non-critical javascript.

What is Inline Delivery?

Inline delivery refers to load a resource (ex: like JS, CSS) within the HTML code instead of calling/importing that separately.

How to Remove Render Blocking JavaScripts from my website?

To remove render-blocking JavaScripts, developers need to inline critical JavaScript and defer all non-critical JavaScript.

What is that one common thing both async and defer have?

Both async and defer have one common thing. That is, downloading of render-blocking javascript doesn’t block page rendering. So the visitors may read webpage content & get acquainted with the webpage immediately.

Why Should We Defer Loading of JavaScripts?

When the web browser comes across a javascript, it executes the script first before continue to load HTML that includes the content users are looking for. It means that JavaScripts are one of the major culprits to make your website slow.

Further, For a browser, executing a JavaScript is a heavier task as it depends on the size of the javascript. Also, it takes more time as compared to render the meaningful content (the first paint) of the webpage.

Hence JavaScript affects the critical rendering path and slows down page speed of your site. Also, defer loading heavier task of JS execution so that critical rendering path remain uninterrupted.

How to identify Render-Blocking JavaScripts on your website?

Render-Blocking JavaScript(s) of your website can be identified by using site speed testing tools.

There are several page speed testing tools available to analyze a website for site speed and loading time. The most reliable and trusted tools for page speed testing are

1. PageSpeed Insights by Google
2. GTmetrix
3. Pingdom Tools

Test your website using the above speed testing tools. And analyze the results of these tools so that you can compare the results before and after implementing defer parsing of JavaScript(s).

What does defer mean in JavaScript?

Defer literally means ‘hold back’ or ‘delay’. If you use ‘defer’ attribute in <script> for parsing (loading) of JavaScript, JavaScript will execute only after the HTML parsing has finished. This helps to improve the speed of a webpage.

Does async or defer attributes have any effect on inline scripts?

No, both async & defer attributes don’t have any effect on inline scripts.

What is Defer Parsing of JavaScript?

Usually, Googe Pagespeed Insights (PSI) or other site speed testing tools (GTMetrix, etc.) show warning/error “”, if your website loads JavaScript(s) that block the loading of meaningful content (the first paint) of your site.

According to Google PageSpeed Insights (PSI) recommendations, your website should deliver critical JS inline and defer all non-critical JS.

Therefore, defer parsing of JavaScript means JavaScript(s) should load, only after the content of the website has loaded.

What is the Main Reason to Defer Loading of JavaScript?

As u know,  the browser gives priority to execute the scripts over parsing the HTML. However, the fact is, most of the JavaScripts are used only when the complete web page is loaded. Examples are animation, effect, or some functionality, etc.

Therefore, it is a good idea to load JavaScript(s) only after the content has been loaded.

What are the advantages of deferred loading of JavaScript?

The advantages of deferred loading of JavaScript are

1. It deferred loading of JavaScript does not affect the critical render path

2. It consequently helps to speed up your website.

3. It gives a better user experience to your website visitors.

4. It makes your site load faster

5. It helps improve your search ranking on desktop as well as mobile.

6. It helps improve the performance of websites.

7. It allows the elimination of render-blocking JavaScript.

What is defer parsing?

Whenever a browser encoun­ters a javascript with the defer attribute, it will follow the below steps sequentially.

  1. First, make par­al­lel requests to fetch the indi­vid­ual files.
  2. Meanwhile, Con­tinue pars­ing the doc­u­ment as if it was never interrupted.
  3. Then, Fin­ish task of pars­ing the web doc­u­ment even if the javascript files are downloaded.
  4. Once the task of parsing documents is finished, Exe­cute each script in the order they were encoun­tered in the document.

Ex: <script src=”myjavascriptfile1.js” defer></script>
<script src=”myjavascriptfile2.js” defer></script>

Therefore, Defer is very sim­i­lar to async attribute with just one major dif­fer­er­ence.

How do you defer JavaScript?

With HTML V5, two new boolean attributes for the <script> tag has been introduced. They are async and defer. Async attribute allows the execution of javascript files asynchronously. but, defer attribute allows execution only after the whole document has been parsed.

The webpage would have to load and execute scripts before finishing to render the page.

Here’s a usage example of defer attribute of <script>:

<script defer src=”/js/jquery.min.js”> </script>

How to Defer Loading of JavaScript in WordPress?

You can defer parsing of JavaScript in WordPress by following three methods:

  1. Using WordPress Plugins.
  2. Using the Script method (without using plugins).
  3. Adding a Code Snippet to function.php file.

What are the advantages of the async loading of JavaScript?

Advantages of async loading of JavaScript are

0. It allows the elimination of render-blocking JavaScript.

1. async loading of JavaScript does not affect the critical render path.

2. It consequently helps to speed up your website.

3. It gives a better user experience to visitors of websites.

4. It makes your website load faster.

5. It helps to improve your search ranking on desktop as well as mobile.

6. It helps to improve the performance of websites.

How do you async attribute in JavaScript?

When you add the async attribute to your script tag, the fol­low­ing steps likely will happen.

  1. It makes par­al­lel requests to fetch the files.
  2. It con­tinue parsing/loading the doc­u­ment as if it was never interrupted.
  3. Exe­cute the indi­vid­ual scripts the moment the java files are downloaded.

Ex: <script src=”javascript1.js” async></script>
<script src=”javascript1.js” async></script>

What is the main difference between async & defer loading?

async and defer are similar in that they allow scripts to load without blocking the HTML parsing. It means users see page content more quickly. But they do have differences too.

Here are the main difference between async and defer JavaScript

1. The defer attribute delays JavaScript execution until HTML parsing has completed. Whereas with async attribute HTML parsing & script execution happens simultaneously and the script executes as soon as it’s ready.

2. Scripts loaded with async are parsed and executed immediately when the resource is done downloading.     Whereas scripts with defer attributee don’t execute until the HTML doc is done being parsed.

3. async scripts may load out-of-order, whereas defer scripts are executed in the order in which they appear in the markup.

4. async follows Load-first order. Here the order of document doesn’t matter. It may load and execute while the document has not yet been fully downloaded. It also happens if scripts are small or cached, and the document is long enough. whereas defer follows Document order (as they go in the document). That is it executes after the document is loaded and parsed (they wait if needed), right before DOMContentLoaded.

Why prefer Defer over Async?

Though Both async and defer cause JavaScript execution to happen at different times on the web page.

defer causes javascript execution to happen at the same time as or later than async. It is because javascripts are made defer or async & are less important for the critical content on the webpage. Therefore, it’s better to use defer so that their execution happens outside of the main rendering time.

defer scripts can never block synchronous scripts. Whereas async scripts depend on how quickly they download. Synchronous scripts are typically made synchronous because they are important for the critical content on the webpage.

Therefore, it’s always better to use defer so that synchronous scripts are not blocked from executing. Also, their critical work is completed more quickly.

Which is better async or defer?

While using with an async attribute, the JavaScript file gets downloaded asynchronously & then executed as soon as it’s downloaded.

Whereas with the defer attribute, the file gets downloaded asynchronously. But executed only when the document loading is completed. Also, scripts will execute in the same order as they are called.

Let’s take an example. Assume we are using jQuery as well as other javascript that depend on it. Now, We use defer on them (jQuery included), making sure to call jQuery before the dependent scripts.

Therefore, defer is the right choice of attribute when a script depends on another script. And, defer is the right choice when async is not an option.

Async & Defer Loading [Loading Strategies]: FAQs