defer loading javascript
Page Speed

Defer Loading JavaScript: To Improve Your WebPage Loading Speed

Defer Loading JavaScript: To Improve Your Web Page Loading Speed

Did you ever test your website through a page speed testing tool and then end up being met with a recommendation/warning instruction to defer parsing of JavaScript in WordPress?

The warning can become a bit challenging to understand. This post explains what is defer parsing of JavaScript and ways to implement this on your  website. Implementing defer loading javascript have a positive effect on your site’s web page load times. It is specifically very helpful for mobile visitors.

Introduction

When JavaScript snippets are unnecessary for loading the critical route of a website, deferring parsing of JavaScript helps improve initial web page load time. This implies that the necessary content files to display the web page will receive loading priority over JavaScript snippets. It don’t have to be executed instantly. Because of the increasing need for page load speed, loading above-the-fold articles should be prioritized. It is usually what defer parsing of JavaScript really helps to achieve.

There are many reasons why we prefer defer parsing of JavaScript in WordPress. The most crucial one is page speed score and overall performance. Generally, JavaScript is usually placed between your <head> </head> tags. When anyone request your a website in google, it loads the code throughout. This means that for those who have plenty of JavaScript or lengthy strings, it will require additional time for the website’s content to appear. It is because, it 1st waits for all your JavaScript to load.

By deferring parsing of JavaScript, the website would not await the JS code to load, which would lead to a quicker loading period. Nowadays, optimizing a site for social press is very essential. Features such as Facebook, Twitter, Linkedin and other social networking sharing control keys/feeds make use of JavaScript. However, we should remember that content itself should get the priority over others. Therefore by deferring parsing of JavaScript, we are able to greatly increase front-end user experience and SEO. In this WordPress tutorial, we covers several ways about how to defer parsing of JavaScript in WordPress.

What is Defer Parsing of JavaScript in WordPress?

Perfect way to defer loading javascript means loading or parsing of javascript only begins after page content has loaded. It means that it will not either affect page speed or the critical rendering path.

As told at the beginning of this post, If you’ve ever tested your web site via Google PageSpeed Insights, GTmetrix, or other page speed testing tool, you’ve probably run into the recommendation to defer parsing of JavaScript.

By accelerating your content’s above-the-fold load instances, your potential visitors may experience a speedier & responsive webpage.

Is defer loading JS an essential performance consideration?

when someone visits your WordPress site, your site’s server provides the webpage contents of your site in visitor’s browser.

The visitor’s browser then starts at the very top and undergoes the code to render your website. While doing this, when ever it discovers any JavaScript, it’ll stop rendering all of those until it could fetch and parse the JavaScript document. And, It will do that for every script that it finds. It may have a negative impact on your site’s web page load times. Because of this, the visitor must stare at a blank display while their internet browser downloads and parses all of the JavaScript.

If a particular script isn’t essential to the core functioning of your website, you should prefer defer parsing of JavaScript. As you don’t want to buy time to block the way of loading more important elements of your site. Exactly for this reason, page speed testing tools always recommend you firmly to defer parsing of JavaScript.

Thus, your website will tell visitors’ browsers to hold back to download and/or parse JavaScript until after your site’s main content has finished loading. At that time, visitors can currently see and connect to your webpage. Therefore the wait instances to download and parse that JavaScript no more have such a poor effect on website/webpage.

Analyzing Your Website With Page Speed Testing Tools

To understand whether you should defer parsing of JavaScript in your WordPress website, first you should analyze your website with an online page speed testing tool such as for example Pingdom, GTMetrix,Google PSI etc .

GTmetrix

GTmetrix will provide you with a grade and in addition list out particular scripts that require to be deferred.

gtmetrix defer parsing javascript

The common score for this suggestion in GTMetrix reaches least 71%. Listed below are the outcomes after analyzing a web site.

The Different Solutions to Defer Parsing of JavaScript

As we all know, There are many ways to defer parsing of JavaScript. Before we know about them, lets understand about 2 attributes that you may use in your scripts:

  1. Async
  2. Defer

Both attributes permit visitor’s browsers download JavaScript without pausing HTML parsing. below, you may find the difference between the two attributes.

With async attribute, it will not pause HTML parsing to fetch the script. It can pause the HTML parser to execute the script once it’s been fetched. It is the default behavior.

async attribute

With defer attribute, visitors’ browsers will still download the scripts while parsing the HTML. However they will wait to parse the script until following the HTML parsing has been completed.

defer attribute

How to Defer Loading JavaScript in WordPress

There are primarily 3 different techniques to defer parsing of JavaScript.  They are given below.

Defer Loading JavaScript via Plugin

It is one Among the easiest and fastest ways to defer JS parsing in WordPress. There are many WordPress plugins to pick from that will help defer parsing JavaScript . We’ll demonstrate how to do it with a few well-known plugins of wordpress.

To start, you will have to login to your WordPress Dashboard and go to Plugins > Add New section.

wordpress-dashboard-plugins-add-new

There is several plugins to defer parsing javascript. Such as for example:

Choice 1.1 – WP Rocket Plugin

wp rocket

It is #1 plugin in this category. It has bunch of performance optimization options. Also, WP Rocket will help you defer the parsing of JavaScript in the File Optimization tab of the WP Rocket dashboard. Search for the Load JavaScript deferred choice in the JavaScript Documents section of WP Rocket.

Just like the Async JavaScript plugin, WP Rocket also enables you to exclude jQuery in order to avoid problems with your website’s content:

Defer Loading JavaScript

Choice 1.2 – Autoptimize Plugin

Autoptimize

Choice 1.3 – Async JavaScript

Async Javasript defers or async javascript to wordpress what loads via wp_enqueue_script function. You don’t have to anything to configure to utilize this. Once you download, install and activate this plugin. Remaining things it will require care. Async JavaScript plugin allows defer or async characteristics to WordPress JavaScripts which loads via `wp_enqueue_script` function. The next attributes pressure JavaScript to load deferred or asynchronously, leading to faster web page load. To utilize it, you will just be required to set up and Activate the plugin.

Async JavaScript

Choice 1.4 – Speed Booster Pack

An alternative solution plugin with extra optimization techniques, such as for example query string removal, more and loading JS from Google Libraries. To begin, Activate the plugin and install.

Speed Booster Pack: Easy Performance & PageSpeed Optimization

Next, navigate to your WordPress Dashboard, select Settings and enter Rate Booster Pack.

Tick the box close to Defer Parsing of Javascript Data files and Save Adjustments to apply it.

speed booster settings

Choice 1.5 – WP Deferred JavaScript

This is an excellent plugin to defer loading javascript on wordpress. Just install and activate this plugin. It’ll automatically defer loading javascript as mentioned. A light-weight and incredibly easy-to-use plugin. You is only going to have to install and Activate it.

WP Deferred JavaScripts

Deferring parsing of JavaScript via functions.php

Alternatively, you can edit WordPress core files like functions.php to defer parsing of JS. For this approach, you don’t need to install plugin.  You yourself add the defer attribute to your JavaScript files. In order to achieve Defer Loading JavaScript, below given code must be copied to underneath of your theme’s functions.php file

Though It’s fast and simple, but it doesn’t provide you the granular degree of control that plugins like Async JavaScript gives.

defer loading javascript via functions.php

Note, You may download code of above from here.

Essentially, this snippet tells WordPress to include the defer attribute to all of your JavaScript files except jQuery.js.

Use Varvy’s Recommended Technique (Code)

Apart from it, Patrick Sexton of Varvy recommended a very good approach to defer loading JS. It runs on the script to contact an external JavaScript document. It is done only following the initial web page load is completed. This implies that visitor’s browsers won’t download or execute any JavaScript before initial web page load is finished.

Or, you can include below code snippet to child theme’s functions.php file to automatically defer loading java scripts.

The Tricky part of it is , this code snippet waits to both download and execute JavaScript until after your website completes its initial web page load. You need to add the script to your theme immediately prior to the closing </body> tag.

Script to call external javascript file

Note, You may download code of above from Varvy Code

Make sure to substitute “deferJS.js” with the actual document name/route of the JavaScript document you want to defer. Later, you may use the wp_footer hook to inject the code via your child theme’s functions.php file.

With this approach, you may wrap Varvy’s code in something similar to below snippet:

/**
Defer parsing of JavaScript with code snippet from Varvy
*/
add_actions( ‘wp_footer’, ‘my_footer_scripts’ );
function my_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}

Move JavaScript to underneath of webpage

Finally, another approach that you’ll see is to move your JS to underneath of the webpage. Nevertheless, this method isn’t an excellent solution. It is because, despite the fact that your web page will be visible sooner in browser, visitor’s browsers will still screen the web page as loading until all of the scripts finish. This may give an impression that the web page isn’t fully loaded.

Testing the changes

Once you’ve followed above strategies to defer parsing of JavaScript in WordPress, please follow below procedure.

Check thoroughly your site to ensure that deferring particular scripts hasn’t broken your webpages/website. Usually, this can generally happen with jQuery. Because of this, many a plugins provide option to exclude jQuery.js files. Nevertheless, it may happen with various other scripts too. So, Run your website through GTmetrix testing tool again to ensure that your website is deferring as much scripts as possible. As you have excluded jQuery.js, you may not get a perfect score of website. However your score is much better than initial testing of website.

Listed below are the performance outcomes after deferring JavaScript parsing in WordPress:

gtmetrix result after defer loading javascript

Congratulations, by following above easy steps, you boosted your website’s performance for a quicker and better load time!

Conclusion

To be able to load a full page, the browser need to parse the contents of most <script> tags, which adds more time to the web page load. By reducing the quantity of JavaScript had a need to render the web page, and deferring parsing of not needed JavaScript until it requires to become executed, you can decrease the initial load period of your page.

There are many techniques that can be utilized to defer parsing of JavaScript. The easiest and favored technique is to just Defer loading of JavaScript until it really is needed. Another technique is by using the <script async> attribute where suitable, which helps prevent parsing from blocking the original web page load by deferring it before browser’s UI thread isn’t busy doing another thing.

In this post, we’ve learned how to enhance the speed and performance of your WordPress website by deferring parsing of JavaScript. Keep in mind, the quicker and smoother your website is, the increased traffic and happier site visitors you will have! Further, Deferring the parsing of JavaScript on WordPress website is normally an essential performance consideration.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!