How to Defer Parsing of JavaScript Properly

Learn how to Defer Parsing of JavaScript to improve Page Speed score. How you can remove ‘eliminate render-blocking of JavaScript’ warning in Google PageSpeed Insights by defer parsing of JavaScript(s).

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 defer multiple JavaScript(s) 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?

What is Defer Parsing JavaScript

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

Why You Should Defer Parsing of JavaScript

First of all, JavaScript is one of the major culprits to make your website slow. Because when the browser comes across a script, it executes the script before continue to load HTML. Hence JavaScript affects the critical rendering path ¹ and slows down pagespeed of your website.

Since Google had declared ² pagespeed a factor in search result ranking. Therefore site speed optimization has become a significant aspect of technical SEO. Therefore, Google recommends deferred parsing of JavaScript as one of the solution ³ to remove render-blocking JavaScript in above-the-fold content.

As I mentioned above, however the parser (browser) gives priority to execute the scripts over parsing the HTML. 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 etc. Therefore it is a good idea to load JavaScript(s) only after content has loaded. This way deferred loading of JavaScript does not affect the critical render path and consequently help to speed up your website.

Do you know? how to

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

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 which 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 plugin)
2. Using the Script mentioned above (without plugin method)

Defer Parsing of JavaScript using WordPress Plugin

There are several WordPress plugins available for 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 for 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 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.

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 few useful WordPress plugins for 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 for defer parsing of JavaScript. If you are facing any problem implementing above methods or have a question. Let me know via comment section. I will be happy to answer.

Cheers!

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