How to Defer Parsing of JavaScript Properly

Learn how to Defer Parsing of JavaScript to improve Page Speed score. And how you can fix ‘Eliminate render-blocking of JavaScript’ warning in Google PageSpeed Insights by deferring non-critical JavaScript(s). The newer version of Google PageSpeed Insight refers to this issue as ‘Eliminate render-blocking resources’; these render-blocking resources may include JavaScripts and CSS.

In this article, I will cover what is defer parsing of JavaScript, how to defer parsing of JavaScript properly, why you should defer parsing JavaScript, how to find render-blocking JavaScript(s) which are to be deferred, how to defer multiple JavaScripts in one go, how you can defer parsing of JavaScript in WordPress with or without plugin and how does deferred loading of JavaScript help to speed up your website?

In a nutshell, we’ll eliminate render-blocking JavaScript(s) not by actually removing (deleting) them from the website code but by defer loading them. So that they stop blocking the loading (rendering) of meaningful content (the first paint) of the website.

These terms (the above terminology) might be overwhelming for you at first, especially if you’re not a tech guy.

But, don’t worry about that!

I am going to explain everything step by step in simple words. So that you can proceed at your pace and implement the methods to fix ‘Eliminate render-blocking resources’ on your website/blog.

What is Defer Parsing JavaScript

When you test your website with pagespeed testing tools like Google PageSpeed Insights, GTmetrix, etc., you might have seen this recommendation called defer parsing of JavaScript.

So let’s find out what does it really means?

A web page is made of up several components which include HTML, CSS/Stylesheets, JavaScript, and graphical (images & icons) components etc. These components are stacked one over another in the code structure of the web page.

When a user types your website URL in the web browser’s address bar and hit enter. The browser first establishes the connection with the server on which your website is hosted.

Once the connection is established, the browser starts rendering the components of the webpage to display the web page.

The browser renders the components serially from top towards bottom of the webpage. That means what comes first rendered first and so on.

When the browser encounters a JavaScript on a web page, it downloads the JavaScript, executes it and then proceeds to render the next component. So during this time browser stop rendering rest of the web page.

Every time the browser encounters a JavaScript, it stops rendering rest of the webpage until it renders and executes the encountered JavaScript.

That’s how JavaScript blocks the critical rendering path.

To avoid this situation, Google Engineers recommend deferring non-critical JavaScript.

The question still remains the same, What is Defer Parsing of JavaScript?

Generally speaking,

Defer Parsing of JavaScript means to tell the web browser to render/download JavaScript only after the main content of the website has finished loading. This way visitors need not wait more to see the meaningful content of the website.

Technically, it is the process to defer (delay) JavaScript loading on a website.

Defer Parsing of JavaScript can be defined as the process of using defer or async attribute with JavaScript to avoid render blocking of the first paint of the web page.

So if you defer parsing of JavaScript that means JavaScript(s) should load, only after the meaningful content of the website has loaded.

Let’s try to put this in a perspective with Google PageSpeed Insights warning and recommendation.

When you test, a website using Google Pagespeed Insights Tool, you get some warnings and recommendations to fix those warnings/errors.

The PageSpeed Insights (PSI) text for render-blocking resources says,

Eliminate render-blocking resources.

Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.

This warning triggers for two different elements i.e. JavaScript (JS) and CSS when any of them block the critical rendering path ¹ during the website loading. Here in this article, we are discussing the JavaScript part.

(In the previous version of PageSpeed Insights Tool, the same warning (for the JavaScript) used to be called ‘Eliminate render-blocking of JavaScript’.)

In simple words, this warning triggers when there are some JavaScript(s) loading on your website which blocks the loading of the content that matters most to your visitors.

This means your visitors have to wait longer to see the meaningful content of your website because JavaScript(s) are blocking the rendering of content.

Clearly, Pagespeed Insights or other site speed testing tools (GTMetrix, etc.) show this warning/error, if your site loads some JavaScript(s) that block the loading of meaningful content (the first paint) of your site.

And this needs to be fixed.

Critical vs Non-critical JavaScript: Explained

As Google PageSpeed Insights (PSI) recommendation says you should deliver critical JS inline and defer all non-critical JS.

What does this mean?

Let’s break that down by terminology.

Critical JavaScripts: JavaScripts which are necessary to load during optimized critical rendering.

Non-critical JavaScripts: Those JS that can wait to load until the first meaningful content (the first paint) of the webpage has loaded.

Inline Delivery: Inline delivery refers to load a resource (in this case JS) within the HTML code instead of calling/importing that separately.

Curious? Why does JavaScript(s) block the critical rendering path in the first place?

We’ll discuss that in the next section with other reasons why you should Defer JavaScript Parsing.

Do you know? how to

• Create and Edit WordPress htaccess file – In two Simple Steps
• Leverage Browser Caching Google Analytics

Why You Should Defer Parsing of JavaScript

JavaScript Execution: is a Heavier Task

How does JS Affect the SiteSpeed?

First of all, JavaScript(s) are one of the major culprits to make your website slow.

Wondering, why is that?

Because when the web browser comes across a script, it executes the script first before continue to load HTML that includes the content users are looking for.

For a browser, executing a JavaScript is a heavier task (depending on the size of the script) and 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 pagespeed of your website.

Why not defer this heavier task of JS execution so that critical rendering path remain uninterrupted, right?

Pagespeed: is now a Ranking Factor

Site speed has already become a ranking signal.

About a decade ago Google announced ² in an official blog post on Google Webmaster Central Blog that site speed has become a ranking signal.

In another blog post published on Official Webmaster Central Blog in 2018, they revealed ³ that Google started using page speed as a ranking factor in mobile search ranking.

Since Google had declared pagespeed a factor in search result rankings for desktop and mobile. Therefore, site speed optimization has become a significant aspect of technical SEO.

For the same reason, Google PageSpeed Insights Tool recommends deferred parsing of JavaScript as one of the solutions ⁴ to remove render-blocking JavaScript in above-the-fold content.

User Experience: decides Your Site’s Success

How does JavaScript affect user experience (UX)?

We have already discussed that JavaScript(s) slow down the pagespeed by blocking the rendering of first paint (the meaningful content). That led to more loading time and a longer wait for users to see the content; bad user experience, right.

Speed matters a lot, the truth is users do not like slow loading websites. In fact, studies show that the users leave a slow loading site early and move on.

On the contrary, you want your website audience to engage with your site and eventually turn into a customer, subscriber or ad-viewer. In order to make that happen, you need to improve your pagespeed by deferring non-critical JavaScript(s).

Reasons to Defer Loading of JavaScript: Summing it up

As I mentioned above, however, the parser (browser) gives priority to execute the script over parsing rest of the HTML, whenever it encounters the script.

But the fact is, most of the JavaScript(s) comes in use when the complete web page is loaded. For example, in some animation, effect, or some functionality, etc.

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

This way deferred loading of JavaScript does not affect the critical render path and consequently helps to speed up your website. And hence, better user experience to your readers.

And by making your site load faster, you also improve your search ranking on desktop as well as mobile.

Now, since you have an understanding of what is defer parsing of JavaScript and why should defer loading of JavaScript(s).

It is a good time to figure out which JavaScript(s) (on your website) are the culprits and need to be deferred.

If you already know which JavaScript(s) on your website are blocking the critical rendering path, you may skip the following section and jump to the implementation part. Otherwise, keep on reading…

How to Find Render-blocking JavaScript(s)

JavaScript(s) which block the rendering of meaningful content are called ‘Render Blocking JavaScript(s)’ and need to be deferred.

You can find render-blocking JavaScript(s) by analyzing your website using site speed testing tools.

There are several pagespeed testing tools available to analyze a website for site speed and loading time. I am sharing with you the most reliable and trusted tools for pagespeed testing.

Test your site using these tools and note the results of these tools so that you can compare the results before and after implementing defer parsing of JavaScript(s).

1. PageSpeed Insights by Google

Google PageSpeed Insights (PSI) is an exclusive pagespeed testing tool by Google. Test your website using Google PSI Tool to find out render-blocking JavaScript(s). PageSpeed Insights Tool results give information about warnings and their solutions/fixes.

2. GTmetrix

This one (GTmetrix) is another good free tool to test site speed. You can test your site with GTmetrix to know which JavaScripts need to be deferred.

3. Pingdom Tools

Solarwinds’ Pingdom Tools are also very popular when it comes to site speed testing tools. You can test your site using Pingdom Tools to check the number of JS requests on your site and how much they contribute to the total number of requests.

Now you know which JavaScript(s) are making your site slow and need to be deferred. So, let’s see how to fix this issue by deferring non-critical JavaScript(JS).

Test Results: Before Defer Parsing of JavaScript

I have tested a website before implementing defer parsing of JavaScript. Consider these a baseline and compare these results after defer loading of JavaScripts.

How to Defer Parsing of JavaScript [Step by step]

You need to use the following code to defer parsing JavaScript. Insert this code in HTML file just before the </body> tag. Read the instructions given below to use this script.

< script type="text/javascript">
function parseJSAtOnload() {
var element = document.createElement("script");
element.src = "script_to_be_deferred.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;
</script >

Source

Instructions for Defer Parsing JavaScript using the script

Don’t forget to take a complete back-up before making any changes in the code. If something went wrong, you can use that back-up to go back.

1. Copy the code and paste it in HTML file just before the </body> tag (near the bottom of HTML file).
2. Replace script_to_be_deferred.js with the link of the JavaScript which is to be deferred. You can copy the link of JavaScript(s) (which Google PageSpeed tool suggests to defer) from Google PageSpeed Insights tool results for your website.
3. Save changes. And you are done.
4. Finally, test your website again to see the effect.

Code to Defer Multiple JavaScripts in One-go

If you want to defer multiple scripts in one go. You can use the same script with little modification. In the following code replace defer1.js, defer3.js, and defer3.js, etc. with the link of scripts that you want to defer.

 < script type="text/javascript">
function parseJSAtOnload() {
var links = ["defer1.js", "defer2.js", "defer3.js"],
headElement = document.getElementsByTagName("head")[0],
linkElement, i;
for (i = 0; i < links.length; i++) {
linkElement = document.createElement("script");
linkElement.src = links[i];
headElement.appendChild(linkElement);
}
}
if (window.addEventListener)
window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;
</script >  

How to Defer Parsing of JavaScript in WordPress

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

1. Using WordPress Plugins (with a plugin) – suitable for all the plugin lovers.
2. Using the Script mentioned above (without plugin method) – suitable for geeks who don’t want to use a plugin.
3. Adding a Code Snippet to function.php file – suitable for those who are used to playing with code and editing files in WordPress.

Defer Parsing of JavaScript using WordPress Plugin

There are several WordPress plugins available to defer parsing of JavaScript in WordPress, I am listing three plugins which stand out in the crowd because of their features and productivity.

1. Autoptimize
2. Speed Booster Pack
3. W3 Total Cache

As I have explained how to properly configure these plugins for defer parsing of JavaScript in another article, therefore, I am skipping the configuration part in this article. You can check out here: How to configure Autoptimize, Speed Booster Pack, and W3 Total Cache plugin to defer parsing of JavaScript in WordPress

Defer Parsing of JavaScript without WordPress Plugin – Script Method

In WordPress, the code mentioned above can be placed in HTML file just before the </body> tag using hook content option.

Most of the popular WordPress themes come with hook content provision. If you are not using hook content option or it is not available in your theme. Then, either you can use a WordPress plugin to add the script in WordPress footer before </body> tag or you can place the script in the footer file just before the </body> tag manually.

Facing any difficulty adding the script in WordPress footer? Check out our detailed guide, to learn how to add code in WordPress header and footer easily.

Defer JavaScript Parsing in WordPress via functions.php file

Yes, you can defer parsing of JavaScript in WordPress by adding a code snippet to function.php file.

So this is another method that you can use to Defer Parsing of JavaScript in WordPress without using a plugin.

As I have mentioned above this method is suitable for people who are comfortable with code editing in WordPress.

You might be thinking, but why?

First of all, functions.php is an important theme file. That means you might end up breaking your site easily if anything went wrong with the editing of functions.php file.

Also, there are different versions of the code snippet on the web to fix defer parsing of JavaScript in WordPress via functions file. Unfortunately, not all the code snippets work fine.

So you should be careful while using a code snippet to defer loading of JavaScript.

How to Edit functions.php File Safely

I always recommend using a child theme in WordPress in order to avoid code editing mess.

Because while editing the code, even if you miss a single comma (,) semicolon (;) or any other symbol/syntax, your website will break completely or partially. And you have to make extra efforts to recover the site.

If you’re not using a child theme, learn how to use a child theme in WordPress and its benefits.

Step by step process to Defer Parsing JavaScript in WordPress via functions.php

Take a complete backup before making any changes to code.

I assume that you’re using a child theme. If you’re not, first create and activate a child theme to any trouble because of theme files editing.

1. Go to your WordPress Dashboard > Appearance > Theme Editor
2. Select/open functions.php file (of child theme) from theme files.
3. Paste the code snippet given below at the end of functions.php file.
4. You can specify JS files to exclude from defer in the array (‘jquery.js’).
5. Finally, click Update File to save changes. That’s all.

The code snippet to be pasted in functions.php file.

// Defer Parsing of JavaScript in WordPress via functions.php file
// Learn more at https://technumero.com/defer-parsing-of-javascript/ 

function defer_parsing_js($url) {
//Add the files to exclude from defer. Add jquery.js by default
    $exclude_files = array('jquery.js');
//Bypass JS defer for logged in users
    if (!is_user_logged_in()) {
        if (false === strpos($url, '.js')) {
            return $url;
        }

        foreach ($exclude_files as $file) {
            if (strpos($url, $file)) {
                return $url;
            }
        }
    } else {
        return $url;
    }
    return "$url' defer='defer";

}
add_filter('clean_url', 'defer_parsing_js', 11, 1);

The above code snippet is using defer attribute to defer parsing of JavaScripts. You can replace the defer attribute with async attribute to parse JavaScript asynchronously. You can read more about async attribute and other methods to fix render-blocking JavaScript.

Test Results: After Defer Parsing of JavaScript

The following are the test results after defer loading of JavaScript.

Wrapping it up

Other than defer parsing of JavaScript, you can also use async attribute or inline JavaScript to remove render-blocking JavaScript. I have covered async attribute or inline JavaScript in another blog post, read that article here. In that article, I have also mentioned a few useful WordPress plugins to defer parsing JavaScript.

Although WordPress plugins are available to defer parsing of JavaScript. The above-explained script method is considered more appropriate by several experts and webmasters. But the people who use WordPress know that using a WordPress plugin is like bliss.

I hope this guide will help you to defer parsing of JavaScript. Let me know, which technique do you use to defer parsing of JavaScript. If you are facing any problem implementing the above methods or have a question. Let me know via comment section. I will be happy to answer.

Cheers!

General FAQ

Further readings:

• Remove Query Strings from Static Resources to Speed Up your Website
• How to Increase Page Speed using Htaccess
• Enable Keep-Alive to Speed up Your Site
• Disable Server Signature by Editing .htaccess/Apache
• Minify JavaScript and CSS in WordPress to Boost Page Speed