Defer Parsing of JavaScript in WordPress. What is Defer Parsing of JavaScript in WordPress? What methods can we use to Defer Parsing of JavaScript in WordPress?
Have you ever run your WordPress site through GTmetrix, Google Page Speed Insight or any other speed testing tool. Speed testing tools are used mostly to enhance your website’s performance. If you have. You must have come across suggestions like Defer Parsing of JavaScript. Firstly this really important in consideration of the performance of your website. And you might be wondering. What does this mean? How to Defer Parsing of JavaScript? Well, don’t worry. In this article, we are going to cover the same.
What does defer parsing of JavaScript in WordPress means?
In simpler way to understand. Let us take a instance, suppose you visit our site. The server of our site delivers HTML contents of our site to the visitors (you) browser. Now your system’s browser will render our site’s codes. This rendering starts from “Top to Bottom”. And in case through this process of rendering. Your (visitor) browser finds any JavaScript it will stop rendering. It will now focus on fetching and parsing JavaScript file. And this will be repeated every time it finds script.
Why defer parsing of JavaScript is important?
During all this rendering, fetching all your visitor will see is a blank screen. Indirectly this affects the loading time of your website. They will see that blank until there browser downloads and parses all the JavaScript. Also sometimes your site contains unnecessary core functioning pages. Which your site really doesn’t need. All it does is come in between loading important parts of your website. This is why speed testing tools keep pushing up with suggestions like Defer Parsing of JavaScript.
What does defer parsing of JavaScript means, do you need it?
The visitor’s browser will get a message from your site to download or parse JavaScript. Until then your sites main content will already load on visitors browser. Now the Script will download. Visitor can interact during that downloading phase. They don’t have to feel like being ghost out seeing that blank screen.
In order to understand if you need to do Defer parsing or not. You need to install GTmetrix for that. Run your site through GTmetrix. It will give you some grade. And also show up some scripts which need to be defered.
Methods of defer parsing of JavaScript in WordPress
You can defer parse JavaScript by 3 methods. Most easiest and time saving method is to use plugin. Second method is for ones having programming knowledge “The Varvy Method”. And third is for the ones you love coding you can alter some codes in function.php file.
Plugin
Async JavaScript Plugin is a free WordPress Plugin. You can easily defer parsing your site using this plugin. You can simply defer parsing JavaScript using either async or defer. It works in a way in which visitors’ browsers download JavaScript without pausing HTML parsing. It does not pause HTML parsing to fetch the script. But it does pause the HTML parser to execute the script once it’s been fetched.
You first need to download, install and activate the plugin from WordPress.org. Then go to Settings > Async JavaScript to configure the plugin. Tick Mark checkbox > Enable Async JavaScript. You get an option of jQuery you can use this to defer themes and plugins and a lot more. But make sure to test your site if you are doing that. In case some specific scripts are bothering the performance of your site. You can exclude those files also.
Varvy Method
In Varvy method, you need to edit code snippet. Then that waits for both download and execution of Javascript. By then the initial pages of your site loads. The code given below should be pasted in your HTML file. Refer to the instruction given below by Varvy. Also, replace “defer.js” with the actual file name of the JavaScript file that you want to defer.
This code should be placed in your HTML just before the </body> tag (near the bottom of your HTML file). I highlighted the name of the external JS file.
Varvy
<script type=”text/javascript”>
function downloadJSAtOnload() {
var element = document.createElement(“script”);
element.src = “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>
Function.php file
All you need to do in this method is go to function.php file through Filezilla. Then edit codes add the defer attribute to your JavaScript files.
Thankyou for visiting us, keep reading.
