How to Defer Parsing of JavaScript in WordPress?

Defer Parsing of javascript wordpress

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 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.

Defer Parsing of JavaScript Recommendation

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.

  1. Async
  2. 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

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.

Async JavaScript

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

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. 

Autoptimize Settings

In the extra tab, you can list all the scripts you want to add to the Async attribute.

Speed Booster Pack

Speed Booster

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.

Java Booster Pack
  • 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.

Function.php Editing

If you are going to use this method, do edit the file safely.

  1. Take the backup of the site before editing
  2. Go to WordPress Dashboard
  3.  Appearance > Theme Editor
  4. Click on the functions.php in the Theme Files
  5. Paste the code at the bottom of the file
  6. 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.

Latest WordPress Tips, Guides, & News

Stay updated with new stuff in the WP ecosystem including exclusive deals, how-to articles, new plugins, and more. 100% WordPress Goodness, a promise!

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top

We can help you. Right now.

Fast growing merchants depend ServerGuy for high-performance hosting. Experience counts. Let's get started.

Talk to a sales representative

USA / Worldwide

+1.714.2425683

India

+91.9852704704