How To Defer Parsing of JavaScript in WordPress
When you use a site performance testing tool such as GTmetrix, Google PageSpeed Insights, or WP Engine Speed Tool it might suggest you “defer the parsing of JavaScript.” While common, this recommendation can also be confusing.
In short, browsers render and download JavaScript from the server before loading any other site content. This can interrupt page load times and negatively impact site speed. Fortunately, you can defer this so the browser can load the site content first, without waiting for the scripts to finish downloading.
In this post, we’ll explain the different methods you can use to defer JavaScript parsing. We’ll provide step-by-step instructions and break down the pros and cons of each method. Let’s get started!
Before You Get Started
Before we get into the different methods you can use for deferring parsing of JavaScript, it’s important to first backup your site in case the worst happens and you lose your site. Then, you’ll be safe to proceed with either of the following methods we’ll discuss.
Method 1: Deferring Parsing of JavaScript via functions.php
The first method you can use to defer JavaScript parsing is manually editing your functions.php file. It’s worth noting that you’ll want to do so using a child theme, so your changes are preserved when WordPress is updated. Let’s take a look at how you can do this by following three simple steps.
Step 1: Open the functions.php File
Log into your WordPress admin area, and navigate to the Appearance > Theme Editor panel:
On the right-hand side, under Theme Files, locate and click on functions.php. It will likely be under Theme Functions.
Step 2: Insert the Following Code Snippet at the Bottom of Your File
Once the file is open, scroll to the bottom. Next, copy and paste the following code:
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
Of course, you’ll want to make sure you’re editing the correct file for your current theme. When you’re done, click on Update File.
Step 3: Test the Changes
Of course, after you add the code and the file is finished updating, it’s a good idea to verify it was implemented correctly. To do this, you can try using a site speed test analyzer such as GTmetrix:
While your score may not be perfect, it may be better than it was before. It’s a pretty simple technique that can pay big dividends depending on the makeup of your site’s code.
However, if this method isn’t one you want to explore, you may want to opt for a different one – such as a plugin.
Method 2: Defer Parsing of JavaScript With a Plugin
If you’re not comfortable with manually editing your theme’s functions.php file, it can be just as effective to defer the parsing of JavaScript using a plugin.
We’ll suggest and discuss the plugin options in a later section. For now, let’s take a look at the steps you would follow regardless of which plugin you choose.
Step 1: Download the Plugin
Login to the admin area of your WordPress site and navigate to Plugins > Add New. In the search bar, search for the plugin you want to use. For this demonstration, we’ll use Speed Booster Pack (again, we’ll discuss the ins and outs of this solution later):
Once you find it, click Install Now, then Activate and wait for WordPress to do the necessary.
Step 2: Enable the Defer Parsing Settings
You’ll likely know where to find the settings after activation. In this case, you would click on Speed Booster from the left-hand navigation, then click on the Advanced tab:
From here, under the JavaScript Optimization section, there will be an option to enable Defer parsing of JS files:
Toggle that setting, then save your changes. Once you’ve updated your site, you can test the changes the same way you would with the manual method. For example, you can use a site speed testing tool such as GTmetrix to verify your score has improved.
List of Plugins
As we mentioned, if you want to defer parsing of JavaScript with a plugin, there are a handful to choose from. The three options we’ll be discussing are:
Although they perform similar functions, there are some pros and cons of each one. Let’s take a closer look.
Speed Booster Pack Pros & Cons
Cost: Free
Pros:
- Speed Booster is easy to use and has a simple interface.
- In addition to JavaScript optimization, Speed Booster Pack can help with CSS optimization, lazy loading, and Content Delivery Network (CDN) integration.
- It’s regularly updated for performance and bug improvements.
Cons:
- There’s a risk the plugin – or enabling any of its many features – may conflict with other plugins on your site.
Async JavaScript Pros & Cons
Cost: Free
Pros:
- It lets you eliminate render-blocking JavaScript in the above-the-fold content for your WordPress website.
- You can choose which scripts to add either an async or defer attribute to.
Cons:
- It’s not recommended for beginners, as it may cause confusion between async and defer attributes.
- Async pauses HTML parsing before executing JavaScript, which could impact page load times.
WP Deferred JavaScripts Pros & Cons
Cost: Free
Pros:
- This plugin is easy to use and is one of the most popular solutions on the market.
- It was designed specifically to defer parsing of JavaScript in WordPress, not just as an add-on feature.
Cons:
- It hasn’t been updated in a while and may be incompatible with newer versions of WordPress.
- It could potentially cause other plugins on your site to break.
Speed Up Your Experience With WP Engine
JavaScript is an essential component of your WordPress site. However, it can also negatively impact the performance of your site and slow page load times. There are two methods you can use to defer parsing of JavaScript – manually via your functions.php file or a plugin. Either method will help improve load times and overall user experience.
Here at WP Engine, we understand the pivotal importance of following development best practices to provide an incredible user experience for your customers. Learn more about our fully-managed WordPress hosting plans to see the many ways can help you speed up your experience and site performance.
