Defer JavaScript Parsing in WordPress: 2 Simple Ways

Even the best WordPress theme for speed and performance contains a fair bit of JavaScript for base or bonus functionality. In other words, no matter how optimized it is, as you continue to modify its appearance and add new functions, its loading speed will be reduced. Luckily, you can still rely on a few tricks to speed things up without sacrificing UX (User eXperience), this one being among the easiest. It might take some tweaking with website elements, but once complete, your website speed should increase considerably. Let’s get into how to defer parsing of JavaScript in WordPress.

What does deferring JavaScript parsing mean?

First, you must understand how websites work normally. Opening a website in your browser sends an HTML request to the webserver. Once accepted, the website HTML content starts loading from top to bottom. When it reaches a JavaScript element, it must load it completely before continuing. It’s obvious how complex JavaScripts, especially animations and videos, can significantly slow the loading speed. That’s where deferring JavaScript parsing comes in. You instruct the visitor (browser/bot) to load your website content while it downloads JavaScript in the background. The visitor will only begin parsing (executing) JavaScript after the content is fully loaded.

Do I need to enable JavaScript parsing deferring?

You might. As we stated, almost everyone can benefit from it. The easiest way to check is to use a site speed test tool such as GTMetrix. Run a scan and see how much JavaScript was parsed during the first-page load under PageSpeed > Recommendations. It will also list JavaScript elements one by one and show their size. Furthermore, you’ll gain these 2 things by enabling deferring of JavaScript parsing:

1. Improved user experience

Studies show that people form an opinion within 50 milliseconds (0.05 seconds). Also, online studies show that you only have about 15 seconds to entice the visitor to stay on your website. For both of those reasons, the speed of your website will be impressive. Simultaneously, you gain a few more precious seconds to let your content convince them not to click away.

2. A rise in SEO ranking

The rise in speed allows Google bots to crawl faster, improving your website ranking.

1. Defer parsing of JavaScript in WordPress via a code snippet

First, we’ll give you a code snippet you can enter manually. Then, we’ll showcase 2 places you can enter it in, depending on your preference.

Code snippet to defer parsing of JavaScript

The following is a code snippet you’ll need to enter:

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

Be sure to make sure that everything works without any console errors.

1. Modify functions.php file

The most obvious place to put the code snippet in is the functions.php file, part of the currently installed WordPress theme. To do it, follow instructions for method 2 of our guide to duplicate a post or page in WordPress.

2. Use a WordPress plugin

We not only demonstrated how to create a site-specific WordPress plugin but provided 2 alternatives that might be better suited if you’re uncomfortable doing so.

2. Defer parsing of JavaScript in WordPress using a third-party plugin

We have two examples of WordPress plugins you can install and have the problem take care of. They are as follows:

1. WP Rocket

WP Rocket is our top caching plugin for WordPress. But, during our review of it, we forgot to mention this particular capability. By opening its settings in the WordPress Admin Section, and going to the File Optimization tab, then the JavaScript Files section, you can enable a Load JavaScript deferred option.

2. Async JavaScript

Async JavaScript is a lightweight alternative if you aren’t a WP Rocket user already. After installation, click on Settings > Async JavaScript in the Admin Section left sidebar. Now, follow these steps to turn on defer parsing of JavaScript in WordPress:

Put a checkmark in front of Enable Async JavaScript.
Under Async JavaScript Method, select Async or Defer.
Tip. Unlike “defer”, which waits for HTML content to be fully parsed before JavaScript is executed, “async” downloads JavaScript in the background, but pauses HTML to execute/parse JavaScript.
Optional. If you’re having trouble with your website rendering, you’ll have to play around with the jQuery script configuration below.

How to Defer Parsing of JavaScript in WordPress