How to Defer Parsing Javascript files in WordPress site

Posted on September 22nd, 2022

WordPress comes with hundreds of Pre-designed themes and thousands of plugins. There’s a vast and massive developer team and community available for WordPress. All these developers build Extensions and Plugins, which you can use to extend the usability and features of existing WordPress websites. However, You also get higher load times as you use more plugins to add more functionality to your wordpress site, and it takes a lot of time to load files and related content because lots of plugins require lots of CSS and JS files to operate.

One of the similar issues for WordPress websites is the Parsing of JavaScript. It means whenever a visitor sends a request or opens a website on any browser. The JavaScript will load up on the browser simultaneously while downloading site content. It means once the browser has finished downloading JavaScript, then after the browser will continue to download the website content. As a result, the website content will pause till javascript is downloaded and executed. 

This article will help you understand JavaScript Parsing and some easy methods to resolve this issue and speed up the website’s speed. Before we start, let’s understand JavaScript Parsing and why we need to Defer the Parsing of JavaScript. 

What is Defer Parsing Javascript?

Whenever a website loads on a client browser, the browser will start to load all the HTML Content into the visitor’s browser. During this transmission, whenever a browser finds JavaScript, It will load it in the sequence. Once that JavaScript has been loaded into the visitor’s browser, the browser will continue downloading the HTML Content.

The problem with this method is, Javascript files do not generate major outputs. However, HTML and CSS manages the whole layout and content of the site. So, the priority is given to the layout, content and design. Javascript files can be loaded after all the other HTML and CSS files are loaded. This improves the speed of your site.

The visitor will not be able to see any content on the web page until the browser renders all the JavaScript and HTML Content. Specific free website speed testing tools are available that help us understand the website issues, loading time, and other specific issues. We can find out which Javascript files need deferred parsing.

Why do we need to Defer Parsing JavaScript?

When a visitor sends a request from the browser, the server will start to send the HTML Content from top to bottom or in a manner. Somehow, each JavaScript will create a negative effect on website speed. 

But why do we need to defer these JavaScript files? After all, JavaScript is one of the essential elements of any website. Here are some reasons why we need to defer the parsing of JavaScript. 

  • Improve Website Experience: It will improve the website speed and user experience. Website visitors won’t need to wait too long to access the content. 
  • Better Google SEO Rankings: We all know Google likes speedy websites, and Google bots can easily crawl these websites. It’s better for your SEO rankings. 

How to Analyse Our Website?

As we discussed, many free web tools allow website owners to check their website health and speed. In the same way, we can also test our websites to be sure whether our website needs to defer the JavaScript. You can search on google for the best Website Speed Testing tools online or directly go for GTmetrix, PageSpeed Insights, Dotcom-Tools website speed test, etc. Follow the steps for analyzing your website, and we’re using one of the best website analytics tools, GTmetrix. 

Step 1: Access GTMetrix.

Step 2: You will see a URL field on the page speed test tool. Enter your website’s full address.

Step 3: Click the Test Your Site button on the right side of the field. You can see the image below as a reference.

Results: You can see all the details like Website loading speed, Content loading, and performance-related information below the main test results. For better analytics, you can click on the different tabs like Performance, Structure, History, etc.

Different Methods of Parsing JavaScript

There are some pre-resolved methods available that help us to resolve the parsing JavaScript issue. All we need to do is add some attributes like Async and Defer within your scripts. So, let’s understand both techniques and how they work. Both techniques work in the same way and help the user’s browser download the JavaScript without pausing HTML Content parsing.

  • Async: This method will not pause HTML content fetching while downloading the JavaScript. But, once the JavaScript is downloaded successfully, the HTML Content rendering will be paused only when the JavaScript is being executed on the visitor’s browser. 
  • Defer: Using Defer method, Parsing of JavaScript is paused until the browser completely downloads the main content. Once the user’s browser successfully receives the HTML Content of the website, then after the browser starts rendering all the JavaScript files. But first, the user will collect and access all the page content.

How to Defer Parsing of JavaScript in WordPress?

In this section, we will learn some methods to defer Parsing JavaScript for WordPress websites. Here we mention four methods to help you defer the JavaScript parsing and speed up the website loading time. Let’s understand all the methods step by step on the WordPress website.

Method 1: Using Async JavaScript Plugin

Async JavaScript plugin is the most straightforward plugin that allows us to defer parsing JavaScript. This plugin comes with both Defer methods, like Async and Defer JavaScript. Async JavaScript is a free plugin you can download from the WordPress repository. This plugin provides many different features related to JavaScript and jQuery. 

For example, we can provide a list of Specific Scripts we want to Async or Defer. There are too many themes and plugins available that use JavaScript and jQuery. Within this case, we can exclude the specific plugin and themes so the plugin will not defer the JavaScript. So, let’s learn how we can use the Async JavaScript plugin to Defer the JavaScript of any WordPress Website. Follow the below steps to start using this plugin.

Step 1: First, Goto your WordPress website’s Admin Area and log in through your Username and Password.

Step 2: Hover your cursor on the Plugins tab and click on the Add New tab option to install a new plugin on your WordPress website. Here you can see the reference in the image below.

Step 3: On the Add New plugin page, Click on the search field available on the right side of the screen. Then, Search for the Async JavaScript and press enter.

Step 4: Find the Async JavaScript plugin from the search results. See the below image as a reference to find the right plugin. After finding the Async JavaScript plugin, Click on the Install Now button available in the plugin’s box. 

Step 5: Click the Activate button to activate the plugin on your WordPress website.

Step 6: Find the Async JavaScript configuration page from the left side tab menu after successfully installing. Hover your cursor on the Settings tab and Click on the Async JavaScript option that must be the last option on that tab. See the below image as a reference.

Step 7: On the next page, you can see a Tab Section on the top with some Tab Options like Wizard, Settings, Status, and Help. Click on the Settings tab to change the configuration of this plugin.

Step 8: See the first setting called “Enable Async JavaScript” with a Checkbox. Click on the Checkbox and mark it as true to enable the Async JavaScript on your WordPress Website. See the below image as a reference.

Step 9: Scroll down the Settings page and Find the “Async JavaScript Method” setting section. Here you can choose your Async method. As we discussed, this plugin allows us to use both types of Async. Choose one as per your requirement.

Step 10: Now, Go to the end of the page and click on Save Settings to save the Async JavaScript Settings for Your WordPress Website.

After clicking Save Settings the javascript will be deferred. No further steps needed for this method to work.

Method 2: Using W3 Total Cache Plugin

W3 Total Cache plugin is another simple and featureful plugin available for free. Anyone can download this plugin from WordPress Plugin’s Repository. This plugin provides too many features that can speed up WordPress Websites. We can quickly clear the Page Cache, Database Cache, and Browser Cache directly from one place. This plugin allows us to defer the parsing of JavaScript files using both “async” and “defer” methods. 

This plugin comes with JS and CSS file management systems where we can include and exclude files that we don’t want to defer. We can easily add new files using their URLs. So, let’s learn how we can defer JavaScript using the W3 Total Cache plugin using a step-by-step tutorial. Follow the steps from here.

Step 1: Goto Your WordPress website’s Admin area and Login using your Username and Password.

Step 2: Then, Hover your cursor on the Plugins tab and Click on the Add New tab option to add a new plugin. See the below image as a reference. 

Step 3: Find the right plugin and click on the Install Now button available within the plugin box, as seen in the image below.

Step 4: Click the Activate button to activate and start using this plugin’s features on your WordPress Website.

Step 5: A new tab option has been added within the Left Side tab section called “Performance.” Hover the cursor on the Performance tab and click on the General settings option.

Step 6: on the next page, you will see a Link Tab Section on the top. This link will allow you to scroll down to the section directly. Scroll down the page and find the Minify section that contains Minify settings.

Step 7: Now, the first option is Minify. Click on the first Checkbox and mark it as true to enable the Minify settings. Then the second option is Minify Mode which is in Auto mode by default. Click on the Manual Radio button and mark it as true. See the below image as a reference. 

Step 8: Then, Click on Save all settings button to save all the current changes.

Step 9: After saving the settings, hover the cursor on the performance tab option and Click on the Minify tab option on the left-sided tab section. See the below image as a reference.

Step 10: On this page, Scroll down and find the JS section. Click on the Checkbox called “JS minify settings” option and mark it as true. This Checkbox will enable Defer Parsing of JavaScript.

Step 11: Then, below the Checkbox, find the following option, “Minify engine settings,” which contains some Dropdown settings for the Head and Body section. Click on the “Before </head>” dropdown and select the Defer Method. For example, you can select Non-blocking using “async.”

Step 12: Lastly, click on the Save all settings button to save the settings for the W3 Total Cache plugin.

Method 3: Adding Code to functions.php Method

It is another simple method to defer the parsing of JavaScript. We add Defer Attribute in the Theme Function file within this method. So, let’s learn how we can add the Defer attribute within the theme files and speed up the loading process of the WordPress Website. Follow the steps from here. 

Step 1: Goto the WordPress website Admin Area and log in through Username and Password.

Step 2: Then, Hover the cursor on the Appearance tab section and click on Theme File Editor, which is the last option available within the Appearance tab. See the below image as a reference.

Step 3: Here, on the Theme Editor Window, you will see the theme file list on the right side of the screen. Find the “Theme Functions(functions.php)” file and click on it to open the file in the editor, just like the screen below.

Step 4: Now, Copy the below Code Script and Paste it into the functions.php file. 

Step 5: Then click the Update File button to save the current changes into the file.

function defer_parsing_js( $url ) {
if ( is_user_logged_in() ) return $url; // No defer for logged in users
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_js', 10 );

Congratulations, You just successfully added a Code Snippet to the function.php file. It will defer all the JavaScript and speed up your website. 

Conclusion

As we discussed, We have certain methods to defer JavaScript parsing. We have some easy-to-use plugins, there are too many options available as a free plugin. All we need to do is add a whole new plugin to accomplish such a little task. In this case, we have 1 method which will do the same work without installing any new plugin. There are many more different free and paid plugins available, and somewhere your website plugins may already contain that specific plugin. So, go through all the plugins and search for the specific plugin or feature. All the listed methods will work completely, choose your way to Defer Parsing the JavaScript and Speedup the WordPress Websites.

Leave a Reply