How to Defer Parsing of JavaScript in WordPress

Have you tried running a WordPress site via speed testing software only to be told to defer JavaScript parsing in WordPress? If that’s the case, in this article we’ll go into how to defer parsing of JavaScript in WordPress.

This change will improve the page load times of your website, particularly for mobile users. However, the warning can be a little confusing, so we’ll clarify precisely what deferring JavaScript parsing means and how to make this modification on your WordPress site.

This article will teach you the following:

• What does it mean to defer parsing of JavaScript in WordPress?
• How to tell if you need to defer parsing of JavaScript?
• Methods to defer parsing of JavaScript in WordPress
• How to defer parsing of JavaScript in WordPress?

What Does It Mean to Defer Parsing of JavaScript in WordPress?

If you’ve ever used Google PageSpeed Insights, GTmetrix, or other page speed checking software on your WordPress site, you’ve already seen the recommendation to defer JavaScript parsing. What exactly does that indicate, and why is it such a critical factor in performance?

In simple terms, anytime anyone visits your WordPress site, the server sends the HTML content of your site to the visitor’s browser. The browser of the visitor then begins at the top and works its way down the code to render your website. If it detects some JavaScript when going from top to bottom, it will avoid rendering the rest of the page so it can fetch and parse the JavaScript file.

This will be done with each script it detects, which will slow down your website so the visitor will be forced to look at a blank screen while all of the JavaScript files are being downloaded and parsed by the browser.

You don’t want a script that isn’t essential to the core functionality of your website to get in the way of loading more critical sections of your website, which is why page speed monitoring tools often advise you to defer JavaScript parsing.

So, what does it mean to defer parsing of JavaScript in WordPress? In general, the site will instruct visitors’ browsers to hold off on downloading and/or parsing JavaScript until after the main content has loaded. Visitors can still see and communicate with your website at this stage, so the time it takes to download and parse JavaScript isn’t as detrimental. You will make Google happier and give your users a great, faster experience.

How to tell if you need to defer parsing of JavaScript?

You should run the WordPress website via GTmetrix to see whether JavaScript parsing can be deferred. GTmetrix will provide you with a grade as well as a list of scripts that need to be deferred.

Methods to defer parsing of JavaScript in WordPress

There are a few options for deferring JavaScript parsing. To begin, you should provide two attributes in your scripts:

• Async
• Defer

Both attributes allow browsers to download JavaScript without interrupting HTML parsing. However, while async does not pause HTML parsing in order to fetch the script (as the default behaviour would), it does pause the HTML parser in order to execute the script until it has been fetched.

With defer, the browser of the visitor can also download the scripts when parsing the HTML, but they will wait until the HTML reading is complete before parsing the document.

Another option is to easily shift the JavaScript to the bottom of the page. This approach, though, isn’t ideal because, while the page will be available faster, visitors’ browsers will only show the page as loading before all of the scripts have completed. This may cause some users to abandon your website because they believe the content isn’t completely loaded.

How to defer parsing of JavaScript in WordPress?

There are two key ways to defer the parsing of JavaScript in WordPress:

• plugin – there are some great free plugins to defer JavaScript parsing
• functions.php – you can add a code to your child theme’s functions.php file

Frank Goossens, the man behind the popular Autoptimize plugin, has released Async JavaScrip, a free WordPress plugin. Download and activate the free plugin from WordPress.org to get started. Then go to Async JavaScript Settings to configure the plugin.

Other plugin that you can use is WP Rocket. WP Rocket can help you defer the parsing of JavaScript in the File Optimization tab of the WP Rocket dashboard, in addition to a variety of other performance optimization strategies. In the JavaScript Files column, look for the Load JavaScript deferred choice.

Finally, you can use the following code snippet in your functions.php file to apply the defer parameter to your JavaScript files without using a plugin:

function pe_defer_parsing_of_js( $url ) {
    if ( is_user_logged_in() ) return $url;
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'pe_defer_parsing_of_js', 10 );

This snippet basically tells WordPress to apply the defer attribute to all JavaScript files excluding jQuery.

In conclusion

The performance of your WordPress site can be improved by deferring the parsing of JavaScript.

We suggest doing two things after you’ve used one of the approaches above to defer JavaScript parsing in WordPress:

1. Check your site to see if deferring scripts has broken any important above-the-fold stuff. Again, jQuery is prone to this, which is why certain software allows you to remove jQuery.js. It might, however, happen with other scripts as well.
2. Run the site via GTmetrix once again to ensure that it is deferring as many scripts as possible (you won’t get a perfect score if you don’t use jQuery, but you can get a decent score).

If you have any more questions about deferring JavaScript parsing in WordPress, please post your questions in the comments section.

Related links

• https://wordpress.org/plugins/async-javascript/
• https://developers.google.com/speed/pagespeed/insights/
• https://tools.pingdom.com/
• https://gtmetrix.com/