Learn How to Defer Parsing of JavaScript in WordPress?

How to Defer Parsing of JavaScript in WordPress

Learn How to Defer Parsing of JavaScript in WordPress?

If you want to speed up your website’s loading time, you must try to defer parsing of JavaScript. It allows the browser to render JavaScript only after it finishes loading the main content of the site. In this training, we will discuss several methods on how to defer parsing of JavaScript in WordPress.

Why it is important to Defer Parsing of JavaScript?

When you browse a website, your browser will receive the site’s content from the live server, and it will load the code from top to bottom. If, in any case, it finds JavaScript code, the loading process will be discontinued until it finishes loading all the JavaScript.

To fix this issue, you should try to defer parsing of JavaScript, which allows the browser to load the full content without waiting for the scripts to download. By implementing this method, JavaScript parsing will not affect your website loading time, and there will be a better improvement in speed.

I want to let you know that having lots of JavaScript isn’t bad practice. After all, It’s one of the vital web components, which allows you to extend the functionality of your site.

Two Benefits of Defer Parsing of JavaScript

    • Improves user experience – People who visit your website, they will not have to wait long to view your website content.
    • Improved SEO Position & Ranking – Google bots can crawl your site faster.

How to Defer Parsing of JavaScript in WordPress?

This section will show you a step-by-step way to defer parsing of JavaScript. We will also show you how to analyze the issue and how to test the changes after fixing this method.

1. Analyze the website

To check whether you should defer parsing of JavaScript in your WordPress website, analyze it using site speed testing tools like GTMetrix or Pingdom. For example, here is the performance result of a website before implementing the method:

It shows that there’s an issue regarding JavaScript parsing, which means the website site needs to defer it.

2. Defer Parsing of JavaScript cvia functions.php in WordPress

Now, let’s get into the steps of deferring parsing of JavaScript! These are one of the best methods to defer parsing of Javascript in a simple manual way.

Before you implement, Make sure to backup your website before proceeding. Here are the steps:

1) From your WordPress admin area, go to Appearance -> Theme Editor

2)Select functions.php in the Theme Files
open theme editor to defer parsing of javascript

3) Copy the below code and paste 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 );

4) Click Update File.

3. Test the Changes

After using the above technique, re-analyze your site with GTMetrix:
successful defer parsing of javascript in gtmetrix

Conclusion

In this training, you’ve learned how you can improve your site performance by deferring parsing of JavaScript in WordPress by adding a simple code snippet to the theme’s functions.php file.

Always understand this that improving your site loading time will get you to be better user experience and improved SEO ranking of your website.

If you have a question on this topic? Do Share your feedback in the comment section below!