When you open a website, your browser will receive the site’s content from the server and load the code from top to bottom. However, if it finds JavaScript, the loading process will be interrupted until it finishes downloading all the JavaScript
If you want to cut your website’s loading time, you can try to defer parsing of JavaScript. It allows the browser to render JavaScript only after it finishes loading the main content of a site. In this tutorial, we will cover several ways on how to defer parsing of JavaScript in WordPress
What is Defer Parsing of JavaScript?
defer parsing of javascript visual
Defer parsing of Javascript means using “defer” or “async” to avoid render blocking of a page. This HTML command instructs the browser to execute/parse the scripts after (defer) or asynchronously (in parallel) to the page loading. This allows the content to show without waiting for the scripts to be loaded.
The point is, there are two main benefits you can get:
Better user experience – visitors won’t have to wait long to view your website content.
Improved SEO ranking – Google bots can crawl your site faster.
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.
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.
Thankfully, you can create a child theme to make safe edits to your functions.php file. In addition to that, if you ever replace or update your theme, you can easily retain all of your custom edits in the file. Here’s a great article explaining how to create a child theme. Once you have created a child theme, just paste the code snippet in the child’s function.php file, save it and it’s all set.
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):
Speed Booster Pack PageSpeed & Performance Optimization
WordPress plugin in WP Admin
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:
Speed Booster Options in the Speed Booster Pack PageSpeed & Performance Optimization WordPress plugin
From here, under the JavaScript Optimization section, there will be an option to enable Defer parsing of JS files:
Javascript Optimization in the Speed Booster plugin
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.
WP Rocket
Currently the leading WordPress performance plugin out there, WP Rocket offers not only the ability to defer parsing of JavaScript files but also your CSS files. In addition to that, you get tons of other performance improvement options.
Some features include the following:
Minification – shrinks the size of your site’s code so it loads faster. It does so by removing white spaces and other unnecessary characters from the code without affecting its core functionality.
Concatenation – combines multiple CSS and JavaScript files into one.
Lazy loading – this is the defer mode for video files and other multimedia content like images. It delays the loading of these resource-intensive files until after the user scrolls down to them.
One of the best things about WP Rocket is that once you install and activate it, you can just leave it alone and you’ll automatically get performance gains.
Speed Booster Pack
Another great, all-in-one performance plugin that allows you to defer parsing of Javascript files is Speed Booster Pack. It’s similar to WP Rocket in terms of features, but it’s free. It has most of the basic features of WP Rocket such as minification, deferring, removing unnecessary files, etc.
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.
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.
- 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.
- 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:
- There’s a risk the plugin – or enabling any of its many features – may conflict with other plugins on your site.
- 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.
- 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.