How to Defer Parsing of JavaScript in WordPress – Guide [2022]

Updated on

Defer Parsing of JavaScript in WordPress

How to Defer Parsing of JavaScript in WordPress - Guide [2022]

If you ran your WordPress site through a performance testing tool to ensure that JavaScript is being processed properly, you may be advised to defer parsing it. This warning could be a bit difficult to understand, so we will explain the concept in detail.

The warning to defer parsing of JavaScript in WordPress can be a bit difficult to understand. It can have a positive impact on your site’s page load times, especially for mobile visitors.

We’ll show you how to implement this change on your WordPress website. There are a few different methods that you can use to defer JavaScript in your WordPress site. To test whether your site needs to defer, you can run your site through GTmetrix.

It will give you a grade and list out scripts that need to be deferred. In this tutorial, we will see How to Defer Parsing of JavaScript in WordPress to boost the speed of WordPress.

 defer-parsing-of-javascript-gtmetrix

Why is deferring JavaScript parsing important?

To fully grasp the concept of Defer Parsing of JavaScript, you need to understand how a browser renders a webpage. When your browser requests a page, your web server returns it, which is downloaded as an HTML document.

The HTML document contains several elements and resources whose elements the browser reads while the additional resources are downloaded. And finally, the page is rendered only when all resources are downloaded.

Larger assets take much longer to download. Images represent most of these resources, which is why it is important to optimize your images. 

Also, you can postpone the download of unnecessary scripts by identifying them and speeding up your webpage.

Also ReadHTTP Status Codes: Full List of Error Codes + Guide [2022]

How to identify scripts to defer?

For a minimal website that doesn’t use a lot of JavaScript, there might not be essential scripts to load the page. On the contrary, it is important for a fairly complex site to have a detailed analysis of all the scripts to understand which ones are essential for the page to load.

The first method to eliminate unnecessary scripts is to delete scripts one by one and simultaneously check for errors in the JavaScript console. 

At the same time, this method requires considerable effort and knowledge of JavaScript.

The other method is to use the speed test tool to assess which scripts are essential for page loading. One such tool includes GTmetrix, where all you have to do is enter your website URL, displaying the results. 

In the Page Speed ​​tab, you will find the Defer parsing for JavaScript section, which will display the list of unnecessary scripts loaded when rendering your page when expanding.

Using the information, you can remove scripts that don’t care about rendering your page.

Also Read26 Best WordPress Speed Optimization Plugins 2022 [Updated]

Deferred or Async attributes

There are two ways to eliminate downloading scripts when rendering pages.

First, by adding the Defer attribute to the script tag, you can ensure that the browser does not download resources unless page parsing is performed. After the page is rendered and parsed, the browser can download any deferred scripts. Below is an example script tag that shows how to add a defer attribute to an HTML page.

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

On the other hand, you can add an Async attribute to the script tag. This will guide the browser to load the script separately. This means that the browser will start downloading the resources when it encounters the code while separately parsing the HTML code simultaneously. The sample script below shows how to add an Async attribute.

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

These two attributes differ in how they download resources. For a minimal website, it’s not easy to notice the differences between async and defer attributes. In parallel, for a more complex web application, it is recommended to use the deferred technique.

Also Read  Websites Redirecting to Digestcolect .com – Elementor Pro Vulnerabilities

Defer JavaScript Lazy parsing

  1. Customize the functions.php file

If you’re used to WordPress development, you should know that it’s not a good idea to add scripts directly to HTML markup. But you can use the built-in WordPress functions to request resources.

To add an async or defer attribute to your scripts, you need to add the following function to your WordPress theme’s functions.php file.

add_filter('script_loader_tag', 'add_defer_tags_to_scripts');

function add_defer_tags_to_scripts($tag){

    # List scripts to add attributes to

    $scripts_to_defer = array('script_a', 'script_b');

    $scripts_to_async = array('script_c', 'script_d');

    # add the defer tags to scripts_to_defer array

    foreach($scripts_to_defer as $current_script){

        if(true == strpos($tag, $current_script))

             return str_replace(' src', ' defer="defer" src', $tag);

    }

    # add the async tags to scripts_to_async array

    foreach($scripts_to_async as $current_script){

        if(true == strpos($tag, $current_script))

             return str_replace(' src', ' async="async" src', $tag);

    }

     

    return $tag;

 }

Be sure to enqueue each script before adding the defer and async attributes to the script tags.

add_action(‘wp_enqueue_scripts’, ‘enqueue_custom_js’); function enqueue_custom_js() {     wp_enqueue_script(‘script_a’, get_stylesheet_directory_uri().’/script_a.js’);     wp_enqueue_script(‘script_b’, get_stylesheet_directory_uri().’/script_b.js’);     wp_enqueue_script(‘script_c’, get_stylesheet_directory_uri().’/script_c.js’);     wp_enqueue_script(‘script_d’, get_stylesheet_directory_uri().’/script_d.js’); }

 

What does moving JavaScript parsing mean in WordPress?

If you’ve ever scoured your WordPress site for Google PageSpeed ​​Insights, GTmetrix, or other page speed testing tools, you’ve probably come across a suggestion to defer parsing of JavaScript.

But what does that really mean? And why is this an important aspect of performance?

Basically, when someone visits your WordPress site, your website’s server delivers your website’s HTML content to that visitor’s browser.

The visitor’s browser will then launch at the top and step through the code to render your site. If JavaScript moves up and down, the rest of the page will not render until the JavaScript file can be retrieved and parsed.

This is done for every script found, which can negatively impact your website load times because the visitor has to stare at a blank screen while their browser downloads and parses all the JavaScript.

If a specific script isn’t required for basic functionality of your site (at least when the page first loads). You don’t want it to prevent more important parts of your website from loading.

That’s why page speed testing tools always require to defer parsing JavaScript.

So what does it mean to defer JavaScript parsing?

Essentially, your website tells visitor browsers to wait to download and/or parse JavaScript. after that Your website’s main content is already fully loaded. At this point, visitors can already see and interact with your page, so wait times for JavaScript downloading and parsing are no longer so negative.

Also Read –  How to Fix Push Notification Malware in a WordPress Website?

How to Move JavaScript Parsing to WordPress (Easy Methods)

To move JavaScript parsing into WordPress, you can choose three main routes:

  • Plugin – There are great free and premium WordPress plugins to remove JavaScript parsing. We’ll show you how to do this with two popular plugins.
  • Varvy Method – If you are a tech savvy, you can edit your site code directly using Varvy’s code snippet.
  • Functions.php file – You can add a code snippet to your child’s functions.php file to automatically move the scripts.

You can click above to jump straight to your favorite method or read through all the techniques to find the one that works best for you.

WordPress Plugins for deferred parsing of JavaScript

Naturally, not everyone has considerable knowledge and skills to follow the above method. Therefore, for beginners, some plugins can be used for deferred JavaScript parsing.

Automatic Optimization

Autoptimize is another plugin that allows you to Defer Parsing of JavaScripts.

After installing and activating the plugin, check the Optimize JavaScript code option on the settings page. This will defer all unnecessary scripts and move them to the footer.

You can also add the scripts for the async attribute in the Extra tab.

Either you can edit the functions.php file or use plugins such as Autoptimize and Async JavaScript. These are the two reliable ways to add the async and defer attribute to script tags.

We hope these techniques will help you speed up your website. Feel free to join us on our Facebook and Twitter to stay up to date on our posts.

Free Async JavaScript Plugin

Async JavaScript is a free WordPress plugin created by Frank Goossens, of the same type as the popular Optimize plugin automatically.

It gives you an easy way to defer JavaScript parsing Async or deferred.

To get started, you can install and activate the free plugin from WordPress.org. Then go to Settings in Async JavaScript to configure the plugin.

Above you can enable the plugin functionality and choose between Async and delayed. 

Note Async downloads JavaScript while the HTML is still being parsed but then pauses the HTML parsing to run the JavaScript.

Get moving Downloads the JavaScript while the HTML is still being parsed and waiting for the HTML parsing to complete.

defer-parsing-of-javascript Free Async JavaScript Plugin

javascript defer-parsing

Below you can also choose how to handle jQuery. Many themes and plugins rely heavily on jQuery. So if you try to postpone the parsing of jQuery scripts, it can break some of your site’s core functionality. 

The safest approach is to exclude jQuery, but you can try moving it around. Just be sure to test your website thoroughly.

Below, you can also manually include or exclude certain scripts, including a useful and easy-to-use feature that allows you to select specific themes or plugins that are active on your site:

 Also Read –  Malware Redirecting Websites To Outlook Pages & Fake Phishing Sites

Use the WP Rocket Plugin

defer-parsing-of-javascript-wp-rocket-

While we don’t allow most of these caching plugins but some web host allow the WP Rocket plugin because it has a built-in integration that’s good to play server-level caching.

Along with a number of other performance tuning techniques, WP Rocket can help you move JavaScript parsing around the world. File Optimization WP Rocket Dashboard Tab. 

Look for Load JavaScript Delayed Option in the JavaScript Files Section.

Like the Async JavaScript plugin, WP Rocket also allows you to exclude jQuery to avoid issues with your website content:

Also Read – Best WordPress Security Scanner Tools To Scan For Vulnerabilities

Use the method recommended by Varvy (code)

We mentioned earlier that Patrick Sexton of Varvy recommends using a JavaScript download pending snippet and running it until your website has completely loaded its first page.

You can implement this method by modifying the code snippet provided by Varvy and running the script just before closing -Add a tag about you.

Here is the code from Varvy ::

<script type="text/javascript">

function downloadJSAtOnload() {

var element = document.createElement("script");

element.src = "https://kinsta.com/blog/defer-parsing-of-javascript/defer.js";

document.body.appendChild(element);

}

if (window.addEventListener)

window.addEventListener("load", downloadJSAtOnload, false);

else if (window.attachEvent)

window.attachEvent("onload", downloadJSAtOnload);

else window.onload = downloadJSAtOnload;

</script>

Be sure to replace “defer.js” with the name/path of the JavaScript file you want to move. Then you can use wp_footer hook to paste the code into your child’s functions.php file.

Using this approach, you would include Varvy’s code something like this:

/**

Defer parsing of JavaScript with code snippet from Varvy

*/

add_action( 'wp_footer', 'my_footer_scripts' );

function my_footer_scripts(){

?>

REPLACE_WITH_VARVY_SCRIPT

<?php

}

Move JavaScript to functions.php file

Finally, you can also add the defer attribute to your JavaScript files without the need for a plugin by adding the following code snippet 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 );

Essentially, this code snippet tells WordPress to add the defer attribute to all JavaScript files except jQuery.

It’s quick and easy, but doesn’t give you the granular control that something like the Async JavaScript plugin does.

Are you getting the *Analyzing Javascript Warning* move message? Don’t worry… fix it now using these 4 methods!

Also Read – How To Fix WordPress 5.5 jQuery Migrate & JavaScript Issues?

End Note

Letting go of parsing JavaScript on your WordPress site is an important performance consideration.

Once you have used any of the above methods to move JavaScript parsing into WordPress, we recommend that you do two things:

Test your website to ensure that if some scripts are carried over, the key is not above the folder contents.

Again, this can often be the case with jQuery, which is why you can use many tools to exclude jQuery.js. However, this can also be the case with other scripts.

Run your site through GTmetrix to make sure your site differs as many scripts as possible (if you exclude jQuery you might not get a perfect score – your score should be better though). 

For more help to use JavaScript Deferred Analysis to boost your WordPress contact WP Hacked Help team.

Other WP-Troubleshotting posts you may want to read –