In this post, you will learn about the defer parsing of JavaScript in WordPress.
Defer Parsing of JavaScript means to load the JavaScript after the loading the main content of the page, so the user does not have to wait and look at the blank page,
This is one of the WordPress speed optimization tips, and once implemented successfully, it will improve the WordPress site’s loading speed.
- What is Defer Parsing of JavaScript?
- Speed Test to Check
- Async vs. Defer Method
- How to Defer Parsing of JavaScript in WordPress?
What is Defer Parsing of JavaScript in WordPress?
When running your WordPress website through a speed test, such as the GTmetrix Speed Test, or Pingdom Speed Test, or Google PageSpeed Insights, you might find the suggestion to defer parsing of JavaScript.
If you don’t know what it is, you probably don’t know the importance of JavaScript parsing on your website’s performance.
A page consists of many elements, such as HTML, CSS, JavaScript, and various other elements. So when someone visits the web page, the server delivers the page via HTTP.
From the client-side, the visitor’s browser loads the webpage, and that loading starts from the top and ends at the bottom while rendering the webpage. Meanwhile, if there is any JavaScript in the middle of the page, rendering will stop until it downloads and parses the Javascript.
The browser will do it for each code of JavaScript on your page, which can hurt the page’s loading speed as the page will remain blank until the JavaScript parse.
However, if there is a JS that is not useful for the functioning of your site (e.g.: Facebook Page Script), you do not want that script to restrict the loading of the main part of the page.
That’s where the Deferring Parsing of JavaScript in WordPress site comes to rescue.
Defer parsing of JavaScript means modifying the page so the browser can load the full content without waiting for the scripts to load. By doing some changes on the website, you can allow the browser to parse the Javascript.
Benefits of Deferring Parsing of JS:
- Improved User Experience: the browser will load the main content of the webpage, and the visitors do not have to wait
- Better SEO Performance: Fast crawling by Google Bots. However, you can read more about Java SEO.
Test to Check if You Need to Defer Parsing of JS
Run your site through the GTmetrix or Pingdom.
We are using GTmetrix to find out whether it suggests deferring parsing of JavaScript or not.
Async vs. Defer Method
There are two methods to Defer JavaScript.
- Async
- Defer
Both types of methods allow the browser to download the JS without pausing the parsing of HTML.
The difference between Async and Defer is that, although Async does not pause the HTML parsing to download the JS, it does pause the HTML parser to run the script once it is downloaded. On the other hand, with Defer, the browser will download the JS during the HTML parsing, but it will execute the script once the HTML parsing is done.
One more method is to put the JavaScript code at the bottom of the page. So, the page will load the JS after loading the page content.
However, the page will display the loading sign until the JS is executed properly. So, some visitors might not interact with the page until the page loads completely.
How to Defer Parsing of JavaScript in WordPress
To defer the parsing of JavaScript in WordPress, there are two methods that you can use.
Plugins to Defer Parsing of JavaScript in WordPress
Many plugins can defer parsing of JS.
Top 3 WordPress plugin for the task:
- Async JavaScript
- Autoptimize
- Speed Booster Pack
Async JavaScript
Async JavaScript is a free and fantastic WordPress plugin from the same person who created the Autoptimize Plugin.
The plugin gives you two ways to defer parsing of JavaScript, Async, or Defer.
Async JavaScript is freely available on WordPress.org. Download and activate the plugin.
Then go to Settings > Async JavaScript.
Check the Async JavaScript and enable the plugin to do its task.
You will also find an option to select Async or Defer.
Async option will download the JavaScript while HTML parse, then pause the HTML parsing, and execute the JavaScript
Defer option will download the JavaScript while HTML keeps parsing, and it will wait till the HTML parsing is done, then it will execute the JavaScript.
Select whichever option is suitable for your site.
Autoptimize
As mentioned, Autoptimize is a popular and useful plugin for various WordPress optimizations.
There is a feature in this plugin to defer JavaScript.
Download the Plugin from the WordPress plugin repository.
After activating the plugin, go to the plugin settings. At the setting page of Autoptimize plugin, check the “Optimize JavaScript Code” option, and it will defer all the non-essential scripts, or move them to the footer.
In the extra tab, you can list all the scripts you want to add to the Async attribute.
Speed Booster Pack
Another WordPress plugin that makes this task easier is Speed Booster Pack.
Speed Booster can do much more, but we will use it to defer parsing of JavaScript in WordPress.
To begin, download the plugin from WordPress.org, where it is freely available. Activate it and open the setting.
- Open the advanced tab from the Speed Booster setting page.
- Navigate to the JavaScript optimization
- Check the Defer Parsing of JS
- Save changes when done
Defer JavaScript via functions.php File
The next method is to edit the functions.php file.
You have to add the defer attribute code to your JavaScript files by adding the following code to your functions.php file.
function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don't break WP Admin
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 simple code does the same task as the Async or Autoptimize plugin do. But there is much less control and more risk in editing the function.php files.
If you are going to use this method, do edit the file safely.
- Take the backup of the site before editing
- Go to WordPress Dashboard
- Appearance > Theme Editor
- Click on the functions.php in the Theme Files
- Paste the code at the bottom of the file
- Click on the Update File
Wrap Up
Use any methods mentioned in the post to defer parsing of JavaScript in WordPress. But do check the performance of your site by running a speed test.
It is a crucial speed optimization option for WordPress. But the website should function properly.
Sometimes, when the optimization is not done correctly, it breaks the page. So must check the critical pages of your site.
If you have any questions or issues, do leave them in the comment box.
