How to Defer Parsing of JavaScript in WordPress?

If you have tested your WordPress website speed in the website speed testing tool GTMetrix, you may have come to know it with Defer Parsing JavaScript. 

When any website visitors open your website on their browser, it will open the HTML content of your website.  It will start to load your website from top to the bottom and if there is any javascript, it will stop to render the page until it completely fetches or parses the javascript. It may take some time for your browser to download or parse the javascript and this wait time may be annoying to your website visitor before they see the core content of your website. 

To avoid slowness issues on your website, you can defer the certain javascript loading before your core content which is useful for your website. Below are the two methods using this you can defer the parsing of JavaScript.

  1. Async
  2. Defer

In Async, you just need to add an async attribute in the script tag and it will ask the browser to load the script asynchronously. Browser will start downloading the resources once it encounters it in the code however it will continue to parse the HTML in between the other resources that are still being downloaded. Here is the sample script tag to add the async attribute in HTML page.

<script src="path/to/script" async></script>

In Defer, you just need to add a defer attribute in the script tag. It will ask the browser not to download the resource until the parsing of the page is completed. Once it is done with parsing and rendering, the browser will download all the deferred scripts that were encountered. Here is the sample script tag to add the defer attribute on the HTML page

<script src="path/to/script" defer></script>

Parse JavaScript in WordPress

(1) Defer JavaScript via functions.php File

If you don’t want to use any plugins, you can add the defer attribute inside your JavaScript files. Add the below 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 will ask WordPress to add the defer attribute to all your JavaScript files except jQuery.

(2) Defer JavaScript using WordPress plugin

Async JavaScript

It is a free WordPress plugin. You can enable the async javascript easily as per the below image or choose the async or defer method as per your requirement. 

 

As an advanced option, you can enter or exclude the script which you want parse using the async or defer method.

Related Articles

How to fix 403 forbidden error in WordPress?

What is 403 FORBIDDEN ERROR IN WORDPRESS?  The 403 Forbidden error code is shown to a web...

How to Upgrade WordPress Core?

Whenever you receive new WordPress version notification at dashboard, it is highly recommended to...

How to Leverage Browser Caching of WordPress Website via .htaccess?

If you've ever checked your WordPress website in Performance Tools such as Google PageSpeed...

How To Secure WordPress ADMIN Area?

There have now been several large scale WordPress wp-login.php brute force attacks, coming from a...

  • 0 Users Found This Useful

Was this answer helpful?