While running your website on performance testing tools such as PageSpeed Insight, GT Metrix, Pingdom, or any other shows you warning to defer parsing of JavaScript on your WordPress website (in PageSpeed Insight it’s a part of render-blocking resources)? Probably yes and that’s why you are reading this article.
Defer parsing of JavaScript can give your site an amazing boost especially for smartphone users and for visitors with slower internet speed. But if you are new in website building this warning can confuse you a lot that’s in this article we are going to explain everything about this warning and what are the different methods to remove this warning.
What Does Defer Parsing of JavaScript Means for WordPress?
Now the first things first we need to understand what does this warning actually means? and How this can affect our website speed? When a visitor visits your WordPress website, the visitor’s web browser requests a server and server serve HTML content to the server.
The visitor’s browser starts parsing (in simpler terms reading) that HTML file from top to the bottom, while parsing that HTML if the browser gets a link of any JavaScript file browser pause the parsing of HTML and start downloading that JavaScript file and after downloading and parsing that file browser resume parsing the HTML.
And this happens for every single JavaScript file which is in that HTML file and the time it took to download the file the user will see a blank screen until the browser download and parse every single JS file. And that is too bad for your website.
If there are some scripts that are being loaded but are not necessary for your webpage or at least not needed for the initial page load time such as a cool animation for your footer which user won’t even see until he/she scroll down to the bottom of the page so loading that type of JS files on start is completely useless and can be avoided.
And for those files performance testing tools like PageSpeed Insight shows us a warning to defer load them.
So What does defer parsing of JavaScript mean?
Basically, defer parsing of JavaScript means your site is telling your visitor’s browser to wait to download and/or parse JavaScript until after your site’s main content has already finished loading. And by that time your visitor can see and interact with your webpage and JS loading delay won’t gonna show a blank screen to your visitor and it will no longer have a negative effect.
How to Check If Your Website Needs to Defer Parsing of JavaScript?
Checking the need for defer parsing of JavaScript is fairly simple you can test your site on any Performance testing tools and you can see if your site needs to defer parsing of JavaScript or not. These tools will also show you the warning “Reduce render-blocking resources” and you can see your JS files which can be load via defer method.
If you are a programmer and familiar with website coding you can also check this from Chrome Dev Tools, but I am not gonna go into that topic since it is tedious and not needed.
The Different Method of Defer Parsing of JavaScript
There are several different methods of defer parsing of JavaScript loading but first, we need to understand two different attributes of defer parsing of JavaScript.
- Async
- Defer
Both of these two attributes let visitors’ browsers keep parsing HTML content while also loading the JavaScript files. However, there is a key difference between these two methods while async does not pause HTML parsing to fetch the script (as the default behavior would), but it pauses the HTML parser to execute the script after it’s been fetched.
With defer, visitors’ browsers will still download the scripts while parsing the HTML as Async does but it will stop the JavaScript execution until the HTML parsing is done and after that, it will execute the downloaded JavaScript.
For a better visual explanation you can check out this amazing graphic made by Growing with the Web, you can see the clear difference in how these attributes work.
Another not-so-popular approach can be to use a script to call another script after the initial page load is completed. So the JavaScript won’t get downloaded or executed until the initial page got fully loaded.
Finally, a rather simple and easy approach is to move all your script tags at the bottom of your webpage so all the JavaScript files of your website get loaded after all the above HTML is executed. But one drawback of this approach is page is still show loading until all the JavaScript files get downloaded and executed and this might create a bad experience for your visitors since they still think the site is loading and wait for it to complete before interacting.
How to Defer Parsing of JavaScript in WordPress (3 Methods)
We can use three different approaches to defer parsing of JavaScript on our WordPress website:
- Plugin — We can use plugins in WordPress to defer parsing of JavaScript. There are many free and premium plugins available for that.
- Direct Code — If you are tech-savvy and know about coding you can also use code in the body tag to defer load your JavaScript.
- Edit funtions.php — We can edit our theme’s funtions.php file to do the same, this method is useful if you don’t wanna use any more plugins on your website.
You can check the full detail of these methods below and you can decide which one is best suited for you.
1. Plugins
There are several different plugins free and premium which you can choose from, the best thing about plugins is you don’t need to do any coding or something just install and enable them and you are good to go. One major drawback of using plugins is you are using an extra plugin that comes with its own scripts and files that can affect your site performance.
WP Rocket (Paid)
WP Rocket is an amazing premium plugin you can easily choose between defer and async load for your website. This plugin costs $49 for one website, $99 for three websites, and $249 for an unlimited number of websites with one year of support and updates.
There are several other premium plugins such as Perfmatters, NitroPack.
Async JavaScript (Free)
Async JavaScript is an amazing free plugin for loading WordPress website JavaScript in an asynchronous or defer way. It has over a hundred thousand active installations and a 4.5-star rating. This plugin will give you full control over which plugin script you want to load with async and which one with defer.
There are several other free plugins available as well such as Speed Booster Pack, W3 Total Cache, LightSpeed Cache.
2. Manual Code
If you know to code and wanted to defer parsing of JavaScript you can manually code a script to do that. A major benefit of using this method is you don’t need any extra plugins so your site will be lighter and you have better control over scripts. The drawback of this method is you need to know how to code, you may break your site because you need to edit your site files manually.
To implement this method, you need to locate your page’s HTML file and just before the closing </body> tag you need to add the given code snippet:
function parseJSAtOnload() {
var element = document.createElement("script");
element.src = "your_script_name.js"; //change this with your script name
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;
If you have multiple scripts in you can use the following code:
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;
make sure to change defer1, defer2, defer3 with your script name you can add as many as you want.
After that, you need to use a footer hook to insert this script into your functions.php, make sure you use the child theme for editing, or after the update, you will lose your changes. You need to paste the following snippet in your functions.php file:
/**
Defer parsing of JavaScript with code snippet from Varvy
*/
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<!--?php <br ?--> }
3. Edit functions.php
Another code method you can use for defer parsing of JavaScript for your WordPress website by editing the functions.php file of your child theme, avoid using it on your parent theme. The benefits and drawbacks of editing functions.php are the same as the above method except you need to write even fewer lines of code for functions.php.
To implement this method you need to paste the following code in functions.php:
function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don't break WP Admin
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );
Conclusion
Now you know how you can defer the parsing of JavaScript for your WordPress website with and without using any plugins. It’s obvious but always take a backup before making any changes to your website.
If you really wanna max out your website performance make sure to check our other articles on WordPress PageSpeed where we have shared a lot about page speed.
