How To Defer Parsing of JavaScript in WordPress

When you use a site performance testing tool such as GTmetrix, Google PageSpeed Insights, or WP Engine Speed Tool it might suggest you “defer the parsing of JavaScript.” While common, this recommendation can also be confusing. 

In short, browsers render and download JavaScript from the server before loading any other site content. This can interrupt page load times and negatively impact site speed. Fortunately, you can defer this so the browser can load the site content first, without waiting for the scripts to finish downloading. 

One way to defer JavaScript parsing is with WP Engine’s Page Speed Boost. In addition to deferring JavaScript parsing, Page Speed Boost offers more than 30 other front-end optimizations to help ensure pages are served lightning fast and your users aren’t kept waiting.

In this post, we’ll explain the different methods you can use to defer JavaScript parsing. We’ll provide step-by-step instructions and break down the pros and cons of each method. Let’s get started!

Before you get started

Before we get into the different methods you can use for deferring parsing of JavaScript, it’s important to first backup your site in case the worst happens and you lose your site. Then, you’ll be safe to proceed with either of the methods we’ll discuss. 

Method 1: Deferring parsing of JavaScript via functions.php

When you need to manually defer JavaScript files in WordPress, the recommended approach is to use a custom function that leverages the core WordPress API. This method is for users comfortable with editing theme files and gives you precise control over which scripts are deferred.

To defer a script, you’ll use the wp_enqueue_script() or wp_register_script() functions and include a strategy argument. This tells WordPress to automatically add the defer or async attribute to the script’s HTML tag. Here is an example of how to enqueue a custom script with the defer attribute. You can add this code to a child theme’s functions.php file or to a mu-plugin.

function my_custom_scripts() {
    wp_enqueue_script(
        'my-custom-script',
        get_template_directory_uri() . '/js/my-custom-script.js',
        array(),
        '1.0',
        array(
            'in_footer' => true,
            'strategy'  => 'defer',
        )
    );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

In this code snippet, the strategy key with a value of defer ensures the script will be deferred. The in_footer key moves the script to the footer (just before the closing </body> tag), ensuring the browser renders all the visible content first.

defer vs. async

WordPress supports both defer and async attributes. It’s important to choose the right one for your specific script:

• defer: Use this for scripts that depend on other scripts or the page’s HTML structure. A deferred script downloads in the background and executes only after the HTML document is fully parsed, in the exact order they were enqueued.
• async: Use this for scripts that are self-contained and don’t rely on other scripts or the DOM. An asynchronous script downloads and executes as soon as it’s ready, without waiting for the HTML to parse and without a guaranteed execution order.

Testing your changes

After implementing this code, test your website to ensure everything functions correctly. Deferring scripts can sometimes lead to unexpected behavior if not handled properly. Use a site speed tool like GTmetrix or Google PageSpeed Insights to confirm that the changes have improved your site’s performance.

Method 2: Defer parsing of JavaScript with a plugin

Even if you’re comfortable with manually editing code, using a comprehensive performance plugin is often the safest and most effective way to defer JavaScript. 

NitroPack is an all-in-one performance optimization plugin that automatically defers JavaScript parsing to improve page load speed. Instead of just adding a defer or async attribute, NitroPack’s approach is to delay the loading of non-critical scripts until after the main page content has loaded or until a user interacts with the page. This is a highly effective technique for passing performance tests and significantly improving perceived load times.

How to defer JavaScript using NitroPack

The first step is to install and activate the plugin. From your WordPress dashboard, navigate to Plugins > Add Plugin, search for “NitroPack,” and follow the on-screen instructions to install and activate it. You’ll also need to connect your website to your NitroPack account.

Next, click Nitropack in your WordPress admin to choose your optimization mode. NitroPack offers four pre-built optimization modes: “Standard,” “Medium,” “Strong,” and “Ludicrous.” Each mode has different preconfigured settings. To defer JavaScript, select “Medium” or above. This will remove render-blocking resources, which include both JavaScript and CSS. 

If you notice that a specific third-party script is still impacting your performance scores, you can manually add it to NitroPack’s delayed scripts list. This allows for a more targeted deferral. 

NitroPack simplifies the entire process of deferring JavaScript. It handles not just script deferral, but also caching, minification, image optimization, and more, all of which contribute to a faster, more performant website. 

Speed up your experience with WP Engine

JavaScript is an essential component of your WordPress site. However, it can also negatively impact the performance of your site and slow page load times. There are two methods you can use to defer parsing of JavaScript – manually via your functions.php file or a plugin. Either method will help improve load times and overall user experience.

Here at WP Engine, we understand the pivotal importance of following development best practices to provide an incredible user experience for your customers. Learn more about our fully managed WordPress hosting and find the right plan for you to see the many ways can help you speed up your experience and site performance.