How to Defer Parsing of JavaScript in WordPress

August 4, 2023
 |  No Comments

Is your site taking too much time to load? It doesn’t matter if you are using a WordPress site or other, high loading time is a critical concern that needs to be fixed soon.

So, are you wandering the same? Well, if you check your site personally then you may receive the message ‘Defer Parsing of JavaScript in WordPress.’ This seems complicated and sometimes not understandable because you are not tech-savvy.

If you follow the message, so you will see a boost in page loading speed and plays a significant role in improving conversions and revenue of the site.

Now the question is what does Defer Parsing of JavaScript in WordPress means?

So, here is a quick and short answer. The Defer Parsing of JavaScript in WordPress allows the browser to load the website content first without reading the scripts to finish the download and enhance the loading time.

This easy process is important because browsers render and download the JavaScript from the server before loading the website content. This naturally hampers the speed of the website and interrupts the loading time.

But Defer Parsing of JavaScript in WordPress is the key to unlock the issue and you can enjoy the website performance without waiting for minutes.

Defer Parsing of JavaScript in WordPress

This post will share the five proven techniques to defer JavaScript. But before jumping on the solutions one must understand the actual meaning of this pop-up message.

So, without further ado let’s get started!

What does Defer Parsing of JavaScript in WordPress means?

Do you know how browsers render the web page? If not, one must understand this first.

When your browser receives a request from the user it sends it into the webserver and the page starts downloading in the HTML format. This HTML document includes text and code that renders DOM elements and different resources like images, scripts, and style sheets.

However, the browser downloads the resources in sequence. But the rending of the page resumes all the processes again and offers adverse effects on loading time. Even this sometimes hinders the process and shows the message- The page can’t be downloaded or shows server error.

Whenever the browser goes through the code to render the website or pages, it stops rendering if JavaScript is found there. This process gets halted until it can’t fetch and parse the script. Further, it negatively impacts the speed of your website.

But with the help of Defer Parsing of JavaScript in WordPress helps in notifying the browser to download the page or main content of your site and offers fast loading. At this, users can find the website.

Why do you need to Defer Parsing of JavaScript in WordPress?

If your website is taking too much time in loading, one should increase its performance by hook and crook. If you are unaware about website performance then run the test on site by using best tools like GT Metrix, Google Pagespeed insights, or WPEngine.

These are speed tool testing that often suggest and offer you defer parsing of JavaScript when you analyze the site. For instance let’s try with GT Metrix.

In the GTMetrix you will find the grade of your site on each page and specific scripts that need to improve as soon as possible. To use this tool one can enter the URL of the website and wait for the minutes, so it can fetch the whole data.

Once it is completed ahead to the page speed tab and improves your load speed and expands the Defer Parsing of JavaScript section.

Here you will find list of loading scripts that are loading during the rendering process. So read all carefully.

Async VS Defer Attributes

This is important to ensure downloading a script doesn’t interact with web page rendering. So, the two methods to do this are Async and defer.

If you want to start with Async you have to add the following script tag.

With this, your browser receives an update that the browser should load the script in asynchronously. To be accurate, the browser downloads its resources as soon as it bumps into the code but it parses the HTML while the resource is still downloading.
While on the other hand, you can choose the second method Defer attribute. So, add the given script.

With this tag, you will tell your browser not to download the resources until it has completed the parsing of the web page. Once the process is completed, it downloads the deferred scripts that stumbled upon earlier.

The major difference you are about to check when both the resources are downloaded. For the better use of both one should check the web application.

If your web application is compact, one should opt for defer while if you have few scripts Async is the best. Well, you wouldn’t find any difference in both, but the truth is defer is for large files and Async is for small.

To better know the difference between Async and defer we have shared an example. Read on.

Suppose you have two java scripts JS1 and JS2. And there is a condition that JS2 appears in the code after JS1, which means JS2 depends on the JS1, but it is larger than JS2.

If you are using Async, there is a possibility that JS2 can finish its downloading before the JS1. This can leads to an error as JS2 gets executed in the absence of JS1

And if you are using defer both JS1 and JS2 scripts download successfully and cause no error.

Thus defer is best to load scripts and improve the website speed or loading time.

Reasons why you need to defer parsing of JavaScript

As we said earlier if you want to rank on the first page of Google one should have a high speed of loading the web page. Approximately, a page should be loaded in 2-3 seconds. Unfortunately, JavaScript renders the quality of the page and you lose a lot of traffic.

Delaying the loading of a page can affect your website in numerous ways. Fortunately, defer parsing of JavaScript can help you solve this issue. Take a look and check the reasons why it can help you.

  • Increase the search rankings

Whenever Google evaluates your website’s performance for the search ranking, the top most factor Google checks is the site’s loading time. If your website loads faster, it naturally appears on the first page of search results.

As per the research, we found when 1 out of 2 people wait for the website to load otherwise they move to the second source. Also, Google will favor only those websites who won’t trouble their readers and give them the best user-experience.

And if your website takes more than 4 seconds to load it negatively impacts your website performance. Hence, it is important to work on JavaScript. And defer is only the smart way to boost the site’s speed from normal to super.

For the best results one should follow the SEO techniques to boost your content and optimize the page speed.

  • Boost conversion rate

Another biggest reason your website needs to defer if you want to enhance the conversion rate. If the website loads slowly there are chances your customers will bounce to the other sources and you will lose traffic and sales.

Users are in a hurry, they often love to follow the site that shows quick information to them. And if the site runs slow, this will be frustrating for them and they might won’t visit your page again. It doesn’t matter which site or blog you’re working on.

Your job is to deliver best to your users. The research on the Hubspot reveals that the website loading times often drops 7% conversion rate. With the technique of Defer Parsing of JavaScript in WordPress can boost your site’s speed faster that further improves the conversion rate.

  • Giveaway Best User Experience

We don’t think so you need an explanation of this reason. It is pretty natural if your site speed is fine and users are enjoying content on your site, you can expect your visitors to be happy with the site.

And if your site takes more time in loading than usual, users will drop your site and it enhances the bounce rate.

With the Defer Parsing of JavaScript in WordPress you can update the Java files that easily help you load major website content quickly. This fast loading scheme helps you speed up the website that enhances the user’s experience.

The five different methods to Defer Parsing of JavaScript in WordPress

Now we have come to our main section of the article. Here you will learn the five brilliant techniques that help you speed up the site, offer best user experience, and give you a route to rank on the first.

So, let’s know the methods.

To defer the parsing of JavaScript, the three important routes you can choose are plugin, varvy method, and functions.php file. With these routes, you can apply the five given methods.

Method 1- Using Free Async JavaScript Plugin

In WordPress, Async JavaScript is a free plugin that helps to eradicate render blocking JavaScript in the load of content.

With this plugin, you can enjoy the full control over java Scripts and Async or defer can easily contribute to increasing the speed of site and enhancing its performance in Search pages. However, there are few suggestions you will need to follow while choosing Async and defer.

  • Async can download JavaScript while parsing HTML files but then pauses HTML parsing to carry out the JavaScript files.
  • Defer can download the JavaScript files while parsing the HTML files but waits to carry out the files after the completion of HTML parsing.

Now let us move to a step-by-step guide to Defer Parsing of JavaScript in WordPress using the Async plugin.

  1. Open the WordPress dashboard and jump to the plugins tab.
  2. In the plugin tab click on add new button and search the Async JavaScript plugin.
  3. When you find the plugin click on install button and activate it.
  4. So when the installation is completed, go to the settings and make the required changes.
  5. Tick mark the enable Async JavaScript option and choose defer as Async JavaScript.
  6. For the advance features tick mark and choose from the script you want to apply- Async and defer tags.
  7. Here you can choose the scripts you want to include and exclude. Further you can also choose the plugins and themes that you want to exclude from any changes done by Async JavaScript Plugin.
  8. Once the changes are completed, save the changes

Method 2: Using WP Rocket Plugin

If you haven’t heard about WP rocket plugin before then catch this now. WP Rocket is one of the trendiest plugins that can help your website to make it load fast in seconds.

Moreover, with this plugin you can receive page caching, cache pre loading, compression, and many other cool features.

While on the other hand, the plugin also helps you defer the parsing of JavaScript in the file optimization tab.

Here’s how you can install and use the plugin.

  1. Open the WordPress dashboard and redirect to plugin tab
  2. Now click on add new button and search for WP rocket plugin.
  3. Tap on install and activate the plugin.
  4. Then go to the settings and open the file optimization from the menu to get started.
  5. Now scroll down the JavaScript files and tick mark the load JavaScript deferred option and enable the safe mode for Query.
  6. When the whole process is completed go to the end of the page and click on save changes option.

Method 3: Using W3 Total Cache Plugin

W3 Total Cache is another best plugin you can use to Defer Parsing of JavaScript in WordPress. This WordPress plugin is simply useful to enhance the user experience and SEO of your website. Further, it enhances the website’s performance and reduces the load time by leveraging the CDN (Content delivery integration).

The W3 total cache is very effective and safe to use. Plus, you can use this plugin to Defer Parsing of JavaScript in WordPress. Here’s how you can use this plugin.

  • First visit the WordPress dashboard and jump on the plugins page.
  • Then ahead to add a new button and search for the plugin W3 total cache plugin.
  • Once the plugin is found click on install and activate button.
  • Now the plugin is installed. Go to the performance and General settings from the WordPress.
  • Then scroll down the dashboard and jump to the minify section and tick mark the enable option.
  • In addition you can check the manual option from the minify mode and click on the save option to continue.

Minify Code
Head to the performance tab and choose the minify tab from the left sidebar and scroll down to the JS heading, there you can search for the operations and area section with Two HTML tags.

Minify settings options
Choose the non-blocking using the defer option and embed the type of the code before tag.

JS Minify settings

  • In the settings, you can see the JS file management where you have to select the WordPress theme.
  • Then click on the Add a script option to include the URL of JavaScript which you want to parse.
  • You can add as many URLs as you want by tapping on add a script button.
  • When the changes complete click on the save settings button and pure caches button to continue.
  • Once done then scroll down the CSS section.
  • Now click on Add a style sheet button.
  • Then in the CSS file management insert the stylesheet URLs.
  • You can add more than one based on the suggestions provided to you by monitoring tools.
  • Now, you have completed the changes so save the settings and pure caches button.

Method 4: Using Vary’s Recommended Method

Another best method you can opt for Defer Parsing of JavaScript in WordPress is picking the Vary, this uses a script to call the external JavaScript file once the initial page is loaded.

This means browsers don’t download or perform the JavaScript until the webpage is not loaded. However, this method is suggested by Patrick Sexton.

To use this method you can tweak the code snippet that varvy supplies and then add it to the theme editor under the body section.

So, here is the code you can add in the body part of your theme to Defer Parsing of JavaScript in WordPress.

<Script type= “text/javascript”>
Function downloadSAtOnload()  {
var element = document.createElement (“Script”);
element.src = “defer .js” ; document.body.appendChild (element);
}
If
(window.addEventListener) window.addEventListener (“load’ ,
downloadJSAtOnload , false);
else if
(window.attachEvent)
Window.attachEvent (“onload”, downlaodJSAtonlaod;
</script>

While doing this, make sure you have changed the defer.Js to the name of the external JavaScript file. Then after use the Wp_footer to inject the code via the child’s theme functions.php file.

Here is the code you have to use.

/**
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
}

Now we are moving on our step-by-step guide for the clear sense.

  1. Go to your WordPress dashboard and ahead to appearance then theme editor.
  2. Navigate the header.php file and then paste the above mentioned code after and before the body section.
  3. Then click on the update file option.

Method 5- Using the functions.php file

If you forget then let us remind you that you can’t add scripts directly to WordPress through HTML. Instead you have to use in-built WordPress functions to request the resources and also back up your site.

You should use the defer attribute to the JavaScript files by adding the code snippet to your functions.php file.

To complete the process open the theme editor and go to functions.php file to add the given code.

Function
Defer_parsing_of_js ( $url ) {
If (
User_ is_ logged_in()  )
Return $url; //don’t break WP Admin
If ( FALSE ===
Strops( $url, ‘.js’ )  )
Return $url;
If ( strops ($url, ‘jquery.js’ ) ) return $url;
Return str_replace( ‘ src’, ‘ defer src’, $url);
}

Add_filter (
‘script_loader_tag’,
‘defer_parsing_of_js’ , 10
);

This code helps WordPress to add the defer attribute to the JavaScript files except JQuery.

Here is the code you can use to sync defer attributes with your JavaScript files via functions.php file.

Add_filter (‘script _loader_tag ‘,
‘add_defer_tags_to_scripts’);
 
Function
add_defer_tags_to_scripts ($tyag) {
#list scripts to add attributed 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 == strops ($tag,
$current_script) )
Retun
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 == strops ($tag,
$current_script) )
Return
Str_replace (‘src,’defer=”
Async=” async” src’, $tag);

}
Return $tag;
)

Don’t forget you have to enqueue each code, so that one has to add the following code.

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_ds’,
Get_stylesheet_directory_uri (), ‘/script_d.js’) ;
}

When you have updated all the codes in functions.php file then update the file and see the changes. Here is a step-by-step guide to update the file.

  1. Open WordPress dashboard and ahead to appearance then theme editor.
  2. Navigate the functions.php file and then paste the above mentioned codes.
  3. Then click on the update file option.

The alternatives plugins to Defer Parsing of JavaScript in WordPress

Apart from the Async and defer, you have two more plugins option Defer Parsing of JavaScript in WordPress.

  1. Speed booster pack

    2. This is yet another best WordPress plugin you can use to easily enhance the website’s speed and optimize for the users. Let us know its pros and cons.

    Pros:

    • It is simple and easy to use by anyone because of interactive user interface.
    • This helps in JavaScript optimization, poor loading, and CDN integration.
    • This will regularly updated and eliminate bugs threat

    Cons:

    • This might create trouble in using other plugins.

  2. Async JavaScript

    3. This plugin allows the easy loading of all java scripts that are added as wp_enqueue_script() using LABJS. Let us know its pros and cons.

    Pros:

    • It is very easy to use plugin
    • It is most popular in the plugins market
    • Designed for Defer Parsing of JavaScript in WordPress

    Cons:

    • Irregular updates
    • Maybe incompatible with newer versions of WordPress
    • Can cause trouble to other plugins

    Frequently Asked questions

    What do you mean by defer parsing?

    Defer parsing is the state when your JavaScript files load after the website content in the browser. This means defer won’t take part in loading and rendering.

    So, when a user requests your website in the browser the defer JavaScript parsing doesn’t wait to load JavaScript in the browser, and shows the content immediately. In simple words, your content displays first and then gets loaded.

    How to remove render blocking from the WordPress website?

    One of the successful approaches to remove render blocking from the website is defer parsing before the other website elements. Another method to minimize rendering is concatenating both JS and CSS together.

    What tools can I use to identify non-critical JS on my site?

    To identify whether JavaScript is critical of your website or not you can access the following tools.

    • Google PageSpeed insights: This will help you identify the core lack points of your website speed and performance. Plus, this tool also offers some suggestions to improve your site performance and load time.
    • With this your site will receive scores in different colors such as red, orange and green. The red will show low performance likewise orange reveal average and green for good.
    • Pingdom website speed test: it is yet another popular tool to track and monitor the performance. With this tool, you can test your website performance in seven different locations.
    • Moreover, this tool also offers suggestions to improve the page speed so you can enjoy the better speed and performance of the website

    Can you defer the parsing of JavaScript in WordPress via Auto Optimize plugin?

    With the auto optimize tool you can easily defer the parsing of JavaScript. To ensure the process one should install and activate the plugin as usual. Once the plugin is installed and activated visit the settings and opt for the JS, CSS and HTML option.

    Now optimize the JavaScript code option and you will unlock the options. Now tick mark the Aggregate JS-files and leave others.

    Moreover, the plugin allows you to exclude the JavaScript which you don’t want to render. Once the changes are made click on the save button.

    Wrapping Up
    To optimize your website and reduce the loading time, Defer Parsing of JavaScript in WordPress is important.

    We hope with this article you understood the meaning of deer parsing and how it can help your website to rank on the top of search pages. Good Luck!

    About Sonnal S Sinha

    Sonnal S SinhaSonnal S Sinha is a passionate writer as well as WordPress and WooCommerce rockstar who loves to share insights on various topics through his engaging blog posts. He runs a successful website design and digital marketing company. With 15+ years of experience in WordPress theme development, he strives to inform and inspire readers with his thought-provoking content. He helps thousands of small and medium businesses and startups create a unique online presence. Follow Sonnal S Sinha for your regular dose of knowledge and inspiration.

    Do check out our free WordPress themes and WordPress themes bundle

    View all posts by Sonnal S Sinha