Defer parsing of JavaScript (Complete Guide)

Is your website taking ages to load? And one of the website speed checking tools has recommended you to implement "defer parsing of JavaScript" to gain speed? Well, it can really help. But what is it, and how to implement it? No idea?

In this article, we have shared the meaning of deferring parsing of JavaScript along with three different ways to do so. Let’s have a look:

What is meant by deferring parsing of JavaScript?

Every time you type an address in the address bar, your browser requests the website from the server. While the server is serving the website, your browser is busy rendering the HTML Content. But if there would be several JavaScript files, your browser will start fetching those files before rendering the website.

In simple terms, it means that your website will have a higher load time. You must be well aware that higher load times mean losing a visitor.

To fix this issue, you’ll have to fix the "defer the parsing" issue. But how?

Here are different ways of deferring the parsing of JavaScript.

Use Async Plugin:

Using Async Plugin can save you from all the extra effort you would do to resolve the JavaScript parsing issue.

But this solution is only for WordPress users. List of steps to use this method:

1. Download the Async Plugin.
2. Upload the downloaded plugin from the backend of your website.
3. You can even search for Async from the available plugins.
4. Click on Activate, and you have your plugin read to be used.
5. Now you’ll have to access the settings..
6. Click on Enable Async JavaScript, or Apply Async to enforce the settings.
7. Reload your website, and it must resolve the issue. 

Apart from Async, WP Rocket and Speed Booster Pack are a few other options. You can use any of these plugins and configure the settings to defer the parsing of JavaScript. Besides, a few plugins help in managing other elements that can increase the load speed.

Use functions.php tweak:

Every theme has a function.php file. You can add the code below to this file to resolve the issue:

function defer_parsing_of_javascript ( $url ) {

  if ( FALSE === strpos( $url, '.js' ) ) return $url;

  if ( strpos( $url, 'jquery.js' ) ) return $url;

   return "$url' defer "; }

 add_filter( 'clean_url', 'defer_parsing_of_javascript', 11, 1 ); 

A word of caution here: 

Be very careful when tweaking your theme, as it can disrupt your entire website. The best way to do so is either create a child theme or backup your website beforehand.

Go for a manual tweak in the code:

This option isn’t for everyone, as a non-technical user wouldn’t even know what impact these few lines would actually make on your website.

But as a person who knows a bit about codin, you can use the following code just before </body> tag in the footer.php file.

<script type="text/JavaScript">

  function downloadJSAtOnload() {

   var element = document.createElement("script");

   element.src = "//www.yourdomain.com/defer.js";

   document.body.appendChild(element);

  }

  if (window.addEventListener)

   window.addEventListener("load", downloadJSAtOnload, false);

  else if (window.attachEvent)

   window.attachEvent("onload", downloadJSAtOnload);

  else window.onload = downloadJSAtOnload;

 </script>

This code will allow the page content to load before the JavaScript, and your problem will be resolved.

All of these methods are tried and tested for the results, but you should choose the one based on your technical expertise, so there’ll be no further problems when it comes to your website coding and loading speed.