In this blog post, you will know about the defer parsing of JavaScript in WordPress.
Defer Parsing of JavaScript simply means to load JavaScript after the loading of the primary content of the webpage, so the user does not have to wait and see the blank page.
This is one of the simple tips for WordPress optimization and once it is done successfully, it will enhance the loading speed of the website.
What is Defer Parsing of JavaScript in WordPress?
While running a website speed test on GTmetrix, Google page Insights, you might have noticed the recommendation to defer parsing of JavaScript.
A page incorporates several elements like HTML, CSS, JavaScript, and other elements. Hence whenever a user visits the site, the server delivers a page through HTTP.
On the client-side, the visitor’s browser loads the webpage starting from the top and ending to bottom while rendering the page. Meantime, if there is either of JavaScript in the middle of the page, rendering will stop till it downloads and parses the Javascript.
Deferring parsing of the Javascript comes into a scenario when you don’t want to slow down the loading of the site due to useless scripts.
Defer parsing of JavaScript simply means editing a page so the browser can load complete content without waiting for the loading of scripts.
Advantages of Defer parsing of JS
- Enhanced User Experience: The main content of the webpage will be loaded so users don’t have to wait.
- Better SEO Performance: Fast crawling by Google Bots.
How to Defer Parsing JavaScript in WordPress
Mainly there are two methods to defer parsing of JavaScript in WordPress.
- Plugin Method
- Function.php
Plugin to Defer parsing of JavaScript in WordPress
We will discuss the two of the best plugins for deferring parsing of JavaScript.
- Async JavaScript
- Autoptimize
Async JavaScript
Async JavaScript is a free and excellent WordPress plugin that helps in defer parsing of javascript.
Once you have installed the plugin, navigate to settings > Async JavaScript.
Verify the Async JavaScript and enable the plugin. You will see an option to choose Defer or Async.
The async choice will download the JavaScript while HTML parse, later pause the HTML parsing, and run the JavaScript
Defer choice will download the JavaScript while HTML keeps parsing, and it will wait until the HTML parsing is complete, then it will run the JavaScript.
Choose whichever choice is appropriate for your site.
Autoptimize
Autoptimize is a popular and beneficial plugin for several WordPress optimizations. In this plugin, there is also a feature to defer Java Script.
Once the plugin is installed and activated, navigate to plugin settings. Verify the Optimize Javascript Code at the setting page of autoptimize plugin, it will defer unimportant scripts or move them to footer.
Additionally, you can read this post to easily build a WordPress website.
Defer JavaScript through functions.php File
The second method to defer JavaScript is by editing the functions.php file.
You need to add 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 );The above code does the same function as both the plugins do. However, there is a higher risk in function.php files.
Before going to utilize this method. Make sure you do follow the below steps.
- Before editing always take a complete backup of the site
- Go to WordPress Dashboard
- Navigate to Appearance > Theme Editor
- In the Theme Files click on functions.php
- Paste the code at the end of file
- Click on the Update file
Conclusion
Do defer parsing of JavaScript by using any method stated in the post. However, make sure you regularly check the performance of the site by running speed tests. Additionally, you can see this article on how to improve SEO with markup.
The speed of a website is crucial but the working of the site is equally important. The webpage might break if optimizations are not done perfectly.