How to Defer Parsing of JavaScript

Deferred loading of JavaScript helps to speed up your website. If you defer parsing of JavaScript that means JavaScript(s) should load, only after the content of the website has loaded.

First of all, JavaScript is one of the major culprits to make your website slow. Because if 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.

In this article I will cover how to defer parsing of JavaScript properly, why you should defer parsing JavaScript, how to defer multiple JavaScript(s) in one go and how you can defer parsing of JavaScript in WordPress.

Why You Should Defer Parsing of JavaScript

Since Google had declared ² pagespeed a factor in search result ranking. Therefore site speed optimization has become a significant aspect of technical SEO. Hence, 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, though parser (browser) gives priority to execute the scripts over parsing the HTML. And the fact is most of the JavaScript(s) is come 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.

How to Defer Parsing of JavaScript

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 to Use the Script for Defer Parsing JavaScript

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

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 JavScript in WordPress by following methods:

1. Using WordPress Plugins
2. Using script mentioned above

Script Method – Script mentioned above

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 you can place the script in the footer file just before the </body> tag .

Other than this method, you can also use async attribute or inline JavaScript to remove render-blocking JavaScript. Read this post to know more. In that post, 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 most appropriate by many experts and geeks.

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

Cheers!

More to read:
Learn how to Write a Great Blog Post
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