How to Defer JavaScript Parsing to Boost WordPress Score

Did you run a WordPress performance test and received an instruction to defer JavaScript parsing in WordPress?

This change can significantly improve the page load times of your site, especially for mobile visitors.

The warning can be hard to understand, so we will explain what deferring JavaScript parsing means to you. You will then know how to make the change to your WordPress website.

This article will teach you what you need to know to defer JavaScript parsing.

What Does Defer JavaScript Parsing Mean in WordPress?

I assume you had used Google PageSpeed Insights, GTmetrix, or another page performance testing tool to check your WordPress site. And you may have come across the suggestion to defer JavaScript parsing.

But, what does defer JavaScript parsing mean? And why is it a critical performance factor?

The WordPress server delivers your site’s HTML contents to a visitor’s browser when he or she visits your site.

The visitor’s browser then progressively renders your site by starting from the top.

Suppose the browser found a JavaScript file when looking at the web page from top to bottom. In that case, the browser will stop rendering until the JavaScript file is retrieved and parsed.

Browsers will do this for every script found, which can affect your site’s page’s loading time.

And you know what? While the visitor’s browser downloads and parses all the Javascript, he/she needs to stare at a blank screen.

Imagine a script that isn’t necessary to the site’s core functionality. Don’t let it interfere with loading more critical parts of your site in that case.

That’s the reason why you should defer JavaScript parsing like the page speed testing tools recommended.

So what does deferring JavaScript parsing mean?

Your site will tell visitors’ browsers to delay downloading and parsing JavaScript until the site’s main content has been fully loaded.

At that point, visitors can already experience your webpage and interact with it. Therefore the JavaScript download and parsing times will no longer have such a negative impact.

Enhancing your above-the-fold loading time builds Google’s trust in your site. It provides a better user experience for your visitors.

How to Tell if You Should Defer JavaScript Parsing

GTmetrix can help you determine whether or not your WordPress site needs to defer JavaScript parsing.

GTmetrix will provide a grade as well as a list of specific scripts to defer. Please note that GTmetrix is now using these metrics in their Legacy PageSpeed version.

Various Ways to Defer Parsing of JavaScript

We can defer the parsing of JavaScript in a few ways. First, you can add two attributes to your scripts. And they are:

1. Async
2. Defer

The browser can download JavaScript from both attributes without interrupting HTML parsing.

During HTML parsing, the async method downloads the JS file. The async will pause the HTML parser to execute the JS when it has finished downloading.

The defer method downloads the JS file while HTML parsing is happening. The defer method only executes the JS file after the HTML parser has been completed.

Defer scripts also guarantee that they will execute in the order of appearance in the document.

Another approach will be to move JavaScript to the bottom of the webpage. However, this approach doesn’t offer a great solution.

Although your page is immediately visible, visitors’ browsers still show it as loading until all the scripts are finished. This may prevent some visitors from interacting with your web page because they think the content has not yet loaded.

Deferring JavaScript Parsing in WordPress (4 Methods)

In WordPress, there are two main ways to defer parsing JavaScript.

• Plugin: There are many JavaScript deferring plugins for WordPress available. We will demonstrate how to do so with three popular plugins.
• Functions.php File: You can include a code snippet in your child theme’s functions.php file so that WordPress will defer scripts.

1 – Using Async Javascript WordPress Plugin

Frank Goossens developed Async JavaScript, a free WordPress plugin. Frank is the same developer behind Autoptimize, a popular optimization plugin.

It lets you defer JavaScript parsing using either async or defer methods.

Getting started is as easy as installing and activating the free plugin from your WordPress dashboard.

After installing the plugin, click on Settings > Async JavaScript to configure it.

You can choose between async and defer at the top and enable the plugin’s functionality.

Additionally, you may also choose how jQuery is handled. Many themes and plugins depend heavily on jQuery, so you might break your site if you defer the jQuery code’s parsing.

Excluding jQuery is the safest approach, but you can experiment with deferring it. Just make sure you thoroughly test your website.

Scroll down, and you can also defer a script by including or excluding it manually.

2 – Using LiteSpeed Cache Plugin

LiteSpeed Cache for WordPress has so many performance advantages, including deferring JS files. Here, Rovity uses LiteSpeed Web Server so that the LSWS Cache will work out of the box.

To enable Defer JavaScript Parsing in LiteSpeed Cache, open the LiteSpeed Cache Page Optimization page. And then open the JS Settings tab.

Upon scrolling down, you will see the Load JS Deferred option. Turn on this option to activate the Defer JavaScript feature.

You can exclude any JS files from deferring in the Tuning tab.

Just add those JS file names in the JS Deferred Excludes text field; One per line. Please note that jQuery files were added by default.

3 – Using WP Rocket Plugin

WP Rocket can help you defer JavaScript’s parsing in addition to other performance optimization techniques.

The Load JavaScript deferred option is in the File Optimization tab of the WP Rocket dashboard.

You will need to check that box to defer the JS files.

Like other plugins mentioned previously, WP Rocket lets you exclude jQuery to avoid your site’s content issues.

4 -Defer JavaScript Through functions.php File

Finally, you can add the defer attribute to JavaScript without needing to use a plugin.

In your functions.php file, you can add a code snippet, which lets you defer the JS files.

function defer_parsing_of_js( $url ) {
   if ( is_user_logged_in() ) return $url;
   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 );

This code snippet tells WordPress to add the defer attribute to the JavaScript files except for jQuery. It’s quick and easy, but you don’t have as much control as you would get with plugins like Async JavaScript.

Summary

It’s important to defer the JavaScript parsing on your WordPress site.

After you’ve deferred JavaScript parsing in WordPress using one of the above methods, we recommend two things.

1. Test your site to ensure that deferring specific scripts doesn’t break critical above-the-fold content. Again, this is often the case when using jQuery, so many tools allow you to exclude jQuery.js. It might happen with other scripts as well.
2. Run your site through GTmetrix again so that you can ensure that your site is deferring most of the possible scripts. If jQuery is excluded, you might not get a perfect score. But your score and your website performance should be better.

Would you like to know more about deferring the parsing of JavaScript in WordPress? Ask your questions in the comments!

If you enjoyed this tutorial, then you’ll love Rovity and our fast-growing premium shared hosting on the cloud. Check our subscription plans.