How to Defer Parsing of JavaScript in WordPress

1. Install and activate the Autoptimize plugin.

2. Go to Settings > Autoptimize.

3. Under the JavaScript Options section, check the box next to “Force JavaScript in ?”

4. Scroll down and check the box next to “Add try-catch wrapping?”

5. Click the “Save Changes and Empty Cache” button.

6. Go to Settings > Autoptimize and scroll down to the “JavaScript Options” section.

7. Check the box next to “Force JavaScript in ?”

8. Scroll down and check the box next to “Defer JavaScript execution?”

9. Click the “Save Changes and Empty Cache” button.

Your WordPress site should now be deferring the parsing of JavaScript.

If you want to cut your website’s loading time, you can try to defer parsing of JavaScript. It allows the browser to render JavaScript only after it finishes loading the main content of a site. In this tutorial, we will cover several ways on how to defer parsing of JavaScript in WordPress CMS.

Why Should You Defer Parsing of JavaScript?

When you open a website, your browser will receive the site’s content from the server and loads the code from top to bottom. However, if it finds JavaScript, the loading process will be interrupted until it finishes downloading all the JavaScript.

To solve this issue, you can defer parsing of JavaScript, which allows the browser to load the full content without waiting for the scripts to load. By implementing this task, JavaScript parsing won’t negatively affect your website’s loading time.

Keep in mind that having lots of JavaScript isn’t bad. After all, It’s one of the essential web components, which allows you to extend the functionality of your site.

The point is, there are two main benefits you can get:

  • Better user experience – visitors won’t have to wait long to view your website content.
  • Improved SEO rankingGoogle bots can crawl your site faster.

How to Defer Parsing of JavaScript in WordPress?

This section will show you a step-by-step guide to defer parsing of JavaScript. To top it off, we’ll also show you how to analyze the problem and test the changes after applying the task.

1. Analyze the site

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

GTMetrix recommending to defer parsing of JavaScript to reduce blocking of page rendering

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

2. Defer Parsing of JavaScript in WordPress

Now, let’s get into the steps of deferring parsing of JavaScript! There are two ways to do it – installing a plugin or adding a code snippet manually.

Using WordPress plugins

Speed Booster Pack WordPress plugin

One of the easiest ways to defer JavaScript parsing is by using a plugin. Speed Booster Pack is one of the most popular plugins for this task. To begin, install the plugin and activate it, then follow these steps:

  1. Go to your WordPress Dashboard.
  2. On the left sidebar, navigate to Speed Booster.
  3. Click the Advanced tab, and activate Defer parsing of JS files.
    defer parsing of wordpress javascript using speed booster pack plugin
  4. Once done, tap Save Changes.

Defer Parsing of JavaScript via functions.php

Alternatively, you can carry out the task manually by editing one of the WordPress core files. 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. Enter this 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 );
  4. Click Update File.

3. Test the Changes

Successful defer parsing of JavaScript in GTmetrix.

After using one of the above options, re-analyze your site with GTMetrix:

Conclusion

In this tutorial, you’ve learned how to improve your WordPress site speed by deferring parsing of JavaScript. You can do so by using a plugin or adding a code snippet to the theme’s functions.php file.

Keep in mind that improving your website’s loading time will lead to better user experience and improved SEO ranking.

Do you have any questions regarding this topic? Share your thoughts in the comment section below!

How to Defer Parsing of JavaScript in WordPress

If you’re running a WordPress website, you may have noticed that your page loading times are slower than you’d like. One of the main culprits of slow page loading times is JavaScript. Fortunately, there is a way to improve your page loading times by deferring the parsing of JavaScript in WordPress.

What is JavaScript Parsing?

JavaScript parsing is the process of loading and executing JavaScript code on a web page. When a web page is loaded, the browser must parse the JavaScript code before it can be executed. This can take a significant amount of time, especially if the JavaScript code is large or complex.

Why Should You Defer Parsing of JavaScript?

By deferring the parsing of JavaScript, you can improve the page loading times of your WordPress website. When the browser parses the JavaScript code, it must wait until the code is fully loaded and executed before it can continue loading the rest of the page. By deferring the parsing of JavaScript, you can ensure that the browser can continue loading the rest of the page while the JavaScript code is still being parsed.

How to Defer Parsing of JavaScript in WordPress

There are several ways to defer the parsing of JavaScript in WordPress. The easiest way is to use a plugin such as Autoptimize or WP Rocket. These plugins will automatically optimize your JavaScript code and defer the parsing of it.

If you don’t want to use a plugin, you can also manually defer the parsing of JavaScript by adding the “defer” attribute to the

Open chat
Scan the code
Hello 👋
Can we help you?