How to Solve Defer Parsing of JavaScript on WordPress Site?

Your best guide on how to solve defer parsing Of JavaScript on WordPress site.

When you are handling a website, you want to make it as smooth as possible for the user. To do that, a lot of things have to be considered. Users expect a smooth experience with very little waiting time. Waiting time is also measured by loading speed. It is a critical element that many people usually overlook.

Nowadays, customers are always online. But they have a minimal attention span. If you cannot pitch your value within that time, that customer is gone. Probably forever.

When you try to use any performance analysis tool on your website, it will show you the advantages and drawbacks of your site. There might be a couple of things on that list of performance results.

One of the points on that list might tell you to defer parsing of JavaScript WordPress. Don’t worry if it might seem like an alien language to you now. After reading this article, you will feel more confident about what to do next and how to do it.

If you have a WordPress website, you will want to solve the issue of deferring parsing of JavaScript WordPress. WordPress websites are more prone to face this problem. This article will offer you a better understanding of what it is and how to solve the issue as well.

Let’s jump right in!

What is defer parsing?

Defer parsing of JavaScript is a way to diminish the loading speed of your page. This, in turn, improves your page speed score.

A user enters your website URL and presses enter. This action from the user’s browser establishes a connection with the server where your website is located.

After the connection is established, the browser starts to render the components of the web page. It starts from the top of the page to the bottom. Whatever comes first is rendered first. When a browser comes across a JavaScript, it downloads the JavaScript of that web page. Then it executes it, and only then it proceeds to the next component to be rendered.

So, during this downloading period, the browser stops rendering any other component of that web page. That is some crucial time, lost, just sitting there.

To avoid this kind of situation, performance tools suggest you defer parsing of JavaScript WordPress site.

You can try Perfmatters to improve your website load time.

Best way to solve defer parsing of JavaScript on WordPress site?

There are two main ways to defer parsing of JavaScript.

• Manually adding a code snippet
• Using a WordPress plugin

How to add the code snippet on WordPress site

You can do this by modifying one of the core files of WordPress. You might want to make sure that you have backed up your site before doing this. All you need is access to the ‘function.php’ file of your site.

You can use one of two attributes of your scripts.

1. defer
2. async

Both of these attributes allow you to download JavaScript without stopping HTML parsing. However, there is a small difference.

Async: ‘async’ allows the browser to download the JavaScript files without pausing HTML parsing. But it stops HTML parsing after the script has been fetched and ready to be executed.

Defer: ‘defer’ is somewhat similar. It lets the browser download the scripts without stopping HTML parsing.

The difference is, they will wait for the HTML parsing to be finished. Only then, the script will be executed.

It would be best if you were careful when accessing the core files. They can be quite sensitive. If you change a critical snippet in the wrong way, the web page or even the website could break apart. So you should backup your enter site before solve defer JavaScript manually.

Now check your exiting site defer JavaScript issues on GTMatrix tool

Here are the steps:

• From your WordPress admin area, go to Appearance -> Theme Editor
• Select functions.php in the Theme Files
• Open theme editor to defer parsing of javascript
• Enter the below code at the bottom of the file:

function defer_parsing_of_js ( $url ) { if ( FALSE === strpos( $url, '.js' ) ) return $url; if ( strpos( $url, 'jquery.js' ) ) return $url; return "$url' defer "; }
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

Click Update File.

Now, check your website again on GTMetrix and see the improvement.

How to solve defer parsing with WordPress plugins

You can easily defer JavaScript using a plugin on your WordPress website. They provide many other facilities besides deferring parsing of JavaScript.

WP Rocket

If you are unwilling to add code snippets to your site manually, you might not want to use plugins. More than often, the manual code creates serious issues. It might defer parsing of critical files. This might cause errors.

WP Rocket can safely and securely defer parsing of JavaScript files by following these steps,

• Add the WP Rocket from your WordPress dashboard Plugin>Add New
• Find ‘WP Rocket’ in the Settings section
• Click on ‘File Optimization’

– Check the ‘Load Javascript deferred’ box under ‘JavaScript Files.’ Also, we recommend checking the ‘Safe Mode for jQuery’ box. It appears under the former option.

– Finally, click ‘Save Changes.’ You’ll find that at the bottom of the page.

You can undo these changes by unchecking the ‘Load JavaScript deferred’ box and then clearing the cache.

W3 Total Cache

W3 Total Cache is a plugin that can be used to defer parsing of JavaScript on WordPress websites. It has a built-in feature for deferring the JavaScript files.

The steps to defer JavaScript are,

–  Go to the Minify section of the plugin

– Open the Minify page

– Go to the JS section

– Choose ‘Non-blocking using defer.’

– Then click ‘save all settings’

It would help if you cleared all the caches before checking with GTMatrix.

You want your website load the beautiful appearance and images you spent so much time on. Page loading time can be one of the biggest turnoffs or advantage. It depends on how long it is.

W3 Total Cache offers you certain features and tools that decrease the loading time of your web pages.

Autoptimize

Autoptimize is a plugin created by Async JavaScript. It is a viable option for deferring JavaScript.

After installing Autoptimize

– Go to Dashboard -> Settings -> Autoptimize

– Check the ‘Optimize JavaScript Code’ and ‘Also aggregate inline JS’ boxes.

– Then click ‘Save changes’ and ‘Empty cache.’

And you’re done.

WP Fastest Cache

WP Fastest Cache is a plugin that is popular for ease of use and its simplicity. Plus, it can be used for free. Although, the premium version of WP Fastest Cache offers more features. It is probably the most popular free caching plugin.

Unfortunately, it offers to defer parsing of JavaScript only in the premium version. You will have to purchase the product to enjoy the render-blocking function.

You can solve the render-blocking JavaScript problem by following these steps,

– Go to your WordPress dashboard and click on ‘WP Fastest Cache.’

– You will see all these options on your screen. Check the ‘Render Blocking Js’ box.

– Click ‘Submit,’ and you’re all set.

It offers more features on the premium version. You can visit their website to see the pricing. But they offer so many tools on their free version. If you have a basic WordPress website, it is more than enough for your site’s needs.

Conclusion

Defer parsing of JavaScript WordPress is an essential component for your website performance. It can be very costly to overlook this aspect of web pages.

If you have worked on a website, you know how important page speed is. It is the time required for rendering a page. You can measure your website’s page speed using performance testing tools. More often than not, you get a message that tells you to defer parsing of JavaScript.

Now you know why it is essential to defer JavaScript and how to resolve this drawback.

However, it should be noted that you must check your site for broken files or URLs. Sometimes, tweaking with the core files of WordPress results in some unexpected difficulties. So, you should check for damaged key contents. This is a common issue with jQuery. And this is why a lot of analysis tools give you an option to exclude jQuery.js

You should test your site through GTmetrix or any other tools. This ensures that your site is deferring as many of the scripts as possible. We hope this guide will help you to know much about the defer parsing of JavaScript and guide on how to solve that using plugins especially even manually.