Did you run your website through performance testing tools only to met with instructions on how to defer parsing of JavaScript in WordPress?
Implementing defer parsing of JavaScript change can have a positive impact on your site’s load speed, especially for mobile visitors. But the warning can be a bit difficult to understand, which is why we’re explaining what exactly it means to defer parsing of JavaScript. How you can implement it to your WordPress website.

Here’s what you’ll learn in this blog:

Table of Contents

What Exactly It Means to Defer Parsing of JavaScript in WordPress?

If you’ve run your website through Google PageSpeed Insights, GTmetrix, Pingdom, or other page speed testing tools, you’ve probably come across the suggestions to defer parsing of JavaScript. But…what does that really mean? And why is it important for performance optimization?

Basically, when someone visits your WordPress site, your web server delivers the HTML contents of your website to that visitor’s browser. The visitor’s browser then starts from the top and goes through the code to render your site. If moving from top to bottom, it finds any JavaScript snippet, it will stop rendering the rest of the page until it can fetch and parse the JavaScript file.

The operation starts for each script that it finds, which can have a negative effect on your site’s loading because the visitor needs to stare at a blank screen while their browser downloads and parses all the JavaScript files. If a certain script isn’t required for the core functioning of your website (at least on the initial page loading), you don’t want it to get in the way of loading important elements of your site, that is why those performance testing tools always recommends you to defer parsing of JavaScript.

So, what does that mean to defer parsing of JavaScript?

Essentially, your site will tell visitors’ browsers to wait for the download and/or parse JavaScript until your site’s main content has already finished loading.
The fact is visitors already look and interact with your page, so the wait times to download and parse that JavaScript no longer has such a negative effect. By optimizing your content’s above-the-fold load times, you make Google happy and create a better, user experience for your visitors.

how to defer parsing of javascript in wordpress

GTmetrix will give you a grade and also tilt out specific scripts that need to be deferred:

How to State If You Need to Defer Parsing of JavaScript?

To test out whether your website needs to defer parsing of JavaScript, you can run your site through GTmetrix.

How to Defer Parsing of JavaScript in WordPress?

Plugins – there are some free and premium WordPress plugins to defer parsing of JavaScript. We’ll show you how to do so with the most popular plugins.
Varvy method – if you’re tech-savvy, you can edit your website’s code directly and use the code snippet from Varvy.
Functions.php file – You can directly add a code snippet to your child theme’s functions.php file to automatically defer all the scripts.

Free Async JavaScript Plugin

Async JavaScript is a free WordPress plugin. It gives you a simple way to defer parsing of JavaScript using either async or defer method.
To get started, you need to install and activate the free plugin from the WordPress repository Then, go to Settings → Async JavaScript to configure the plugin. On top of that, you can enable the plugin’s functionality and choose between async and defer. Remember:

Async downloads JavaScript while still parsing HTML but it pauses the HTML parsing to execute the JavaScript.
Defer downloads JavaScript while still parsing HTML and waits to execute it until after HTML parsing is completed.

Further, you can also choose how to handle jQuery. A bunch of themes and plugins rely on jQuery. So, if you try to defer parsing the jQuery scripts you might be experiencing broken your site’s core functionality. The best approach is to exclude jQuery, but you can experiment by deferring it. Just to make sure test your site passing through.
Further down, you can also manually include or exclude specific scripts that need to be deferred, including a user-friendly feature that lets you target specific themes or plugins that are active on your site:

Use Premium WP Rocket Plugin

WP Rocket plugin allows a built-in integration to play nice with server-level caching. In addition to a lot of other performance optimization techniques, WP Rocket can help you defer the parsing of JavaScript within the File Optimization tab in the plugin dashboard. You can take a look at the Load JavaScript deferred option in the JavaScript Files section.

Similar to the Async JavaScript plugin, WP Rocket also lets you exclude jQuery to avoid issues with your site’s content:

Use Varvy’s Method (Code)

You can implement that method by tweaking the code snippet that Varvy supplies and then adding the script to your theme immediately before the closing </body> tag.
Here’s the code from Varvy:

Generic Highlighting:

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Make sure to replace “defer.js” with the actual file name/path of the JavaScript file that actually you want to defer. After that, you can use the wp_footer hook to inject the code in your child theme’s functions.php file.
With this method, you would wrap Varvy’s code like this:

Generic Highlighting:

/**
Defer parsing of JavaScript with code snippet from Varvy
*/
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}

Defer JavaScript via functions.php File

Lastly, you can also add the defer attribute to your JavaScript files without any plugin by adding the following code snippet to your functions.php file:

Generic Highlighting:

function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don't break WP Admin
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', 'defer_parsing_of_js', 10 );

Essentially, this code snippet tells WordPress to add the defer attribute to all your JavaScript files except jQuery.It’s a quick and easy method, but it doesn’t give you the granular level of control that something like the Async JavaScript plugin has to offer.

Deferring the parsing of JavaScript on your website is an important performance optimization. Once you’ve used one of the above methods to defer parsing of JavaScript in WordPress, we’d recommend doing two things:

Test your site to make sure that deferring certain scripts hasn’t broken above-the-fold content. Again, this can usually happen with jQuery, which is why a lot of tools let you exclude jQuery.js.

Run your site through GTmetrix again to make sure that your site is deferring scripts as much as possible (you might not get a perfect score if you exclude jQuery – but your score should be better).

Do you have any questions about how to defer parsing of JavaScript in WordPress? Ask away in the comments! If you really enjoyed this blog, then you’ll love our Business Solutions. Turbocharge your business and get 24/7 support from our veteran team of — Renowned WordPress Development Company.