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 change your Wordpress website URL?

It is very easy to change your WordPress URL. You just need to put below code into the...

How to fix an error SSL certificate problem, verify that the CA cert is OK?

You may encounter this error while performing actions like theme/plugins installation or...

How To Fix An Error "SSL certificate problem: unable to get local issuer certificate"

This error can be encountered while upgrading WordPress or installing a WordPress plugin from the...

How to change the Site URL and Home URL Settings in WordPress?

WordPress offers two configurable URLs namely WordPress address and Site address to load the...

How to manage categories in WordPress

Video Tutorial Get Wordpress Hosting

  • 0 Users Found This Useful

Was this answer helpful?