How to Fix Defer Parsing of JavaScript in WordPress

Not sure how to fix defer parsing of JavaScript in WordPress and not sure what does it means? Defer parsing of JavaScript means loading the JS files after all elements of websites (i.e, HTML & CSS) get completely loaded.

It is a necessary process that helps in boosting the speed of your website and improve Google PageSpeed Insight and GTMetrix.  Apart from improving the speed of your WordPress website, there are many reasons why we should defer javascript loading – but mostly people take speed into consideration.

JavaScript files are placed in between the header tags of a website and when the browser requests them, they’re sent to the browser in order. Google has asked web devs to prioritize content above-the-fold, so a lot of people have started to defer Javascript files. One way to do this is by removing render-blocking javascript and CSS from the above-the-fold.

What is Render Blocking JavaScript & Why to Defer Parsing Them?

Render-blocking Javascript is a type of Javascript that blocks the rendering of the page. Content is not displayed to users until this blocking javascript has loaded and executed. This can cause major delays in loading time and cause user frustration.

The async attribute tells a web browser that it may execute the script asynchronously, meaning that it can continue to render content while the script loads. If scripts are not executed asynchronously, they will block rendering until they finish executing.

If you’re using WordPress, you can use a plugin called “Async Javascript” and “WP Rocket” to make your websites load faster by eliminating render-blocking javascript in above-the-fold content.

Benefits of Defer parsing of JavaScript

Still not sure what are the benefits of deferring the parsing of JavaScript on your website? I will share a few noteworthy benefits which help you make sure why to defer parsing of JS.

• It helps in improving the speed of your website and makes it fast enough to load within fractions of mini seconds.
• It helps Google to crawl your website with an increased crawling rate and also helps in increasing the ranking of your website in SERPs.
• Not limited to this, deferring JavaScript can also help in maintaining a healthy bounce rate on your website. 

How to Defer Parsing of JavaScripts

Up until now, we’ve discussed the benefits of deferring parsing JavaScript for your website. Now, the question is how to do it?

Let’s say you want to defer the parsing of JavaScript on your website, there are two ways in which you can do it.

In this article, we’ll go over both methods for deferring parsing JavaScript.

1. By Adding a Line of Code in Function.php File

The first method, without a plugin, requires a bit of coding skill to make your JavaScript execute later on in the page. To do this we need to add a small line of script inside the function.php file of your theme.

This can be done by adding a snippet of code that looks like this:

You can also paste this snippet in a plugin named “Code Snippets”, which is the preferred method of adding custom PHP snippets.

2. Using WordPress Plugins

The second method, with a plugin, is usually easier for people who don’t have any coding experience. It does not require any additional work from you and it allows you to set a specific time when your JavaScript should execute later in the page.

It can be done by installing a cache plugin, and you can see massive improvements in terms of site loading time. This provides a lot of benefits to the user and to your bottom line. Below are a few plugins which can help you out

Here is a step-by-step guide to defer parsing of JavaScript with the WP Rocket plugin. With features such as browser caching, minification, etc., it is one of the most popular website plugins and has achieved widespread popularity over the years and it can easily defer the loading of JavaScript on the website.

With WP Rocket installed, you’ll need to go into Settings > WP Rocket > File Optimization, then scroll down and turn off the JavaScript defer option.

Apart from that, you can use the async attribute for fixing the warning of GTMetrix and Google PageSpeed Insights. 

Bonus – Few More Plugins for Deferring Parsing of JavaScript

Here I’m sharing a few other plugins that can help you defer the parsing of JavaScript on your website. If you’re not using the WP Rocket, or for alternate options, you can have a look at these;

1. Autoptimize

Autoptimize is a WordPress plugin that can be downloaded from wordpress.org that will help you optimize your website’s loading times with just one click. It is a great way to make your site load faster, without you having to do anything. All you have to do is install it and Autoptimize will take care of the rest. It’s so easy!

The plugin reduces HTML document size and number of requests by merging files, removing unnecessary whitespace, deferring parsing of JavaScript until after document load, and more. It also provides an easy way to defer the parsing of JavaScript from the HTML code.

In order to defer the JavaScript loading, you need to visit “Autoptimize Settings > JavaScript” and click on the “Aggregate JS” option.

2. Async JavaScript

Async JavaScript is the second plugin in our list for fixing the defer parsing of JavaScript errors on your website. This plugin has over 100K+ active installations and is available for free at the WordPress repository.

This plugin is suitable for people who’re looking to solve the defer parsing of JavaScript but we recommend that you make sure this plugin is compatible with your cache plugin. If, however, you aren’t using a cache plugin at all, then this plugin will save a lot of time and effort.

3. Speed Booster Pack

The last plugin in our list is the “Speed Booster Pack,” which has 40,000+ active installs on WordPress. The company behind this plugin is Optimocha, which is well known for its high quality services, all designed with users in mind.

It helps speed up your website, resulting in a better score on speed and usability tests – such as Google PageSpeed, GTmetrix, Pingdom, WebPageTest etc, and also fixes defer parsing of JavaScript error on your website. It will help Google rank your site higher in search results and send more traffic for sure.

Conclusion

When it comes to speeding up your WordPress site, you must do everything in your hands to make it optimized. This will help keep your site in top shape, reduce the bounce rate, and increase your site ranking in search engines.

And here in this guide, we’ve talked about the ways to defer the parsing of JavaScript on your WordPress website. It helps to make your site healthy by deferring the loading of JavaScript files.

I hope this guide likely helped you fix the issue on your website- if not, please contact us and we will provide more detailed instructions. If you liked this article, share it with others to make their websites faster too.