How to Defer Parsing of JavaScript in WordPress

JavaScript is one of the most popular programming languages in the world. Most websites use it to create more dynamic experiences for visitors. Critical features like contact forms and site analytics are just a couple of ways JavaScript is put into practice on a daily basis. Unfortunately, while it’s highly useful, all of this code has the potential to slow down your site. 

Deferring parsing of JavaScript (also just called, “deferring JavaScript”) means telling your site to load your non-essential JavaScript code last. This simple tweak can improve your page loading times and overall performance, depending on the number of scripts your website uses.

In this guide, we’ll break down exactly what parsing is and what deferring involves. We’ll also discuss how deferring JavaScript can benefit your site and show you how to do it. Finally, we’ll wrap up with some frequently asked questions (FAQs) to address any remaining doubts. 

What does “defer parsing of JavaScript” mean?

When you visit a website, your browser requests files from a server. These files contain HTML, CSS, and JavaScript for the browser to parse (interpret) in order to create a visual and interactive web page.

Websites often require your browser to load dozens (or even hundreds) of elements and files for just a single page. Here’s a quick example from one of Google’s pages, so you can see how many files it uses:

When your browser parses HTML files, it stops to render any CSS that it finds and to execute JavaScript code. Until the browser has finished executing that code, it won’t continue to load the rest of the page.

In practice, you might not notice this delay if your website is very well optimized (if it loads really quickly). But the delay is there, and the more JavaScript your site uses, the longer it can be. If your website isn’t optimized for performance, parsing of JavaScript can significantly slow down its loading times.

Deferring the parsing of JavaScript means telling your browser, “Hey, if you run into this JavaScript code, don’t parse it until you’re done with the rest of the page.” From the visitor’s perspective, this means the visible elements of the page will load faster. Then, the JavaScript will finish executing in the background, and no one will be any the wiser (except you and the browser).

What are the benefits of deferring JavaScript?

The primary benefit of deferring JavaScript is that pages will load faster for visitors. Scripts will still need to load in the background, but deferring them should improve your Largest Contentful Paint (LCP) score, which is one of three Core Web Vital metrics.

It’s important to remember that page loading time is one of the most important aspects of a great user experience. If a website takes too long to load, you’ll typically lose a percentage of visitors. Moreover, slow loading times can give the impression that there’s something wrong with your site.

How to defer parsing of JavaScript in WordPress

WordPress offers more than one way to optimize your website. When it comes to deferring JavaScript, there are two methods you can use. 

The first method is the easiest because it involves using a plugin.

1. Defer JavaScript parsing with a free plugin

If you’re not comfortable editing your website’s files and adding code to WordPress, your best bet is to use a plugin. One of the best tools you can use to defer non-essential JavaScript in WordPress is Jetpack Boost.

Jetpack Boost is a free plugin you can use to optimize your WordPress site’s performance. It’s incredibly straightforward to configure, making it an excellent choice for beginners. 

Once you activate the plugin, you’ll need to connect to a WordPress.com account (you can use a free account for this). 

When you’re ready, go to Jetpack → Boost in your WordPress dashboard, and you’ll get a quick overview of how your website is doing in terms of performance.

If you look at the options below, you’ll see a setting that says Defer Non-Essential JavaScript. You can toggle this setting, and it will automatically defer parsing of JavaScript throughout your website.

The plugin specifies non-essential JavaScript because it only impacts scripts that aren’t critical to the website.

Once this setting is enabled, be sure to look through your website to ensure that everything is working well. If you notice anything unexpected, simply disable the feature.

Note that Jetpack Boost can also enable lazy loading and optimize your site’s CSS. This means that the plugin will move critical CSS to the start of each HTML document so that the browser parses it first. This setting is particularly important for improving your First Input Delay (FID) score.

2. Defer parsing of JavaScript using the functions.php file

The second method involves editing your theme’s functions.php file. The process is not overly complicated, but adding code to WordPress can sometimes result in unexpected side effects.

This method is for experienced users, as a lot can happen by deleting just one file or even accidentally adding a space in the wrong place. Remember, you’ll want to only defer non-essential JavaScript to avoid hurting the user experience.

To be safe, we recommend backing up your website fully before editing any WordPress files. Even if you have a recent backup, create another one so that you have a restore point before making any changes. If you have Jetpack VaultPress Backup, the most recent version of your site will already be saved for you. 

There are two ways to edit the functions.php file. You can use the WordPress Theme File Editor, which you can access from the Appearance menu. Keep in mind that this option is only available if you’re not using a block theme that supports Full Site Editing (FSE).

Once you access the editor, select your active theme from the dropdown menu to the right and look for the functions.php file in the list.

You can use the editor to add or remove code from any theme files. Still, we recommend against modifying any existing code unless you understand its purpose.

Adding code to functions.php should be safe as long as it’s from a trusted source. The following code snippet will configure your website to defer parsing of JavaScript:

function defer_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', 'defer_js', 11 );

This code will automatically defer all JavaScript on your site, but it won’t touch jQuery scripts. However, it won’t work if you’re logged in to avoid issues with the dashboard not loading properly.

Add that script at the end of the functions.php file so that it doesn’t interfere with any of the other code inside. Click Update File at the bottom of the page, and that’s it!

If you don’t have access to the WordPress theme file editor but are comfortable working with code on a server, you can edit functions.php by connecting to your website via File Transfer Protocol (FTP). You’ll need to use an FTP client like FileZilla to do this. Remember, be sure you take a full site backup before doing anything.

Once you connect to your website’s server, you’ll need to find the WordPress root folder. This is the folder that contains all of your site’s files. It’s usually named www, public_html, or your site’s name.

Open that folder and go to wp-content/themes. There should be several folders, one for each theme installed on your site. Identify your active theme’s folder and open it. The functions.php file should be right inside.

Right-click on that file and look for an option that says something like Edit (this will vary depending on the FTP client you use). That option will open the file using your default text editor. From here, you can add the code snippet we shared earlier and then save the changes to the file.

The same rules apply when editing WordPress files via FTP. Don’t edit any code if you’re unsure what it does, and be wary about adding code snippets unless you trust their source.

You can always restore your WordPress site using the recent backup if you run into errors after editing the functions.php file. Jetpack VaultPress Backup is a fantastic option in these cases because it offers one-click restore functionality even if your site is completely down.

Frequently asked questions about deferring JavaScript

If you still have any questions about how deferring JavaScript works, this section will answer them. Let’s start by talking about the potential side effects of deferring scripts.

Can deferring JavaScript break your site?

Yes, depending on the plugins and theme you’re using, it’s possible that deferring JavaScript could break certain elements of your site. And, if you’re using the manual method, an error in your code could bring your site down entirely.  

That’s why it’s safest to use a tool like Jetpack Boost to take care of this task. While it’s still possible that deferring JavaScript could cause an issue, you can easily deactivate the feature or plugin entirely. 

Is deferring parsing of JavaScript the same as “removing render-blocking JavaScript”?

If you use website performance measurement services like PageSpeed Insights or GTMetrix, you might notice they also recommend eliminating render-blocking JavaScript from your website. Due to the language, it can be easy to confuse this optimization suggestion with deferring parsing of JavaScript.

Render-blocking JavaScript refers to any code that blocks your site from rendering. In many cases, the best solution is to eliminate this code if it doesn’t fulfill a specific purpose. If it has a function, you can defer it instead.

Determining which scripts are needed and which aren’t will depend on your judgment. But services like GTMetrix can help you identify unused JavaScript on your website.

Any scripts that fall under this category should be safe to remove. For other scripts, you can use either plugins (like Jetpack Boost) or modify the functions.php file manually to defer them.

Can I safely remove JavaScript instead of deferring it?

This depends on which scripts you’re referring to. It’s not uncommon for WordPress websites to accumulate unused code as they grow. This happens as you install and deactivate plugins, try out third-party services, and stop using them.

Leaving that “orphaned” JavaScript on your website can sometimes create a security risk. Moreover, it can impact your website’s performance because browsers might still need to parse it. 

If you check out the previous question, we show you how to use GTMetrix to identify JavaScript on your website that you can remove safely.

Does deferring JavaScript improve page performance?

Deferring JavaScript should make your website’s pages load faster. How much faster will depend on the number of scripts you’re deferring and how well optimized your website is.

If you already have a fast website, and you’ve taken steps to optimize it, like removing unused scripts, deferring JavaScript might not have a significant impact. Still, every bit of optimization counts when it comes to page performance.

What else can I do to improve my page loading speeds?

There are a lot of ways to improve page loading speeds for a website. For the greatest impact, here are the optimizations we suggest implementing:

1. Consider using a managed WordPress hosting provider.
2. Implement a Content Delivery Network (CDN).
3. Improve Core Web Vitals in WordPress.
4. Minify CSS.
5. Enable lazy loading in WordPress.

Optimizing your website for performance can take a while, but WordPress plugins like Jetpack and Jetpack Boost make the process much easier and faster.

Remember that any effort you make to improve your page loading speeds will more than pay off over time. If you can keep your website running in top shape, your visitors will have a much better experience.

Improve your website’s performance today

There are a lot of changes you can make to your website to improve its performance. If you use multiple third-party scripts and plugins on your site, there’s probably a lot of JavaScript code running in the background. That code is important, but it may prevent the rest of your website from loading as fast as possible.

Deferring parsing of JavaScript in WordPress is easier than you might think and can significantly impact your website’s performance. Here are the ways you can defer JavaScript parsing:

1. Use a plugin like Jetpack Boost.
2. Defer JavaScript using the functions.php file.

Jetpack offers several plugins to improve your WordPress website’s performance. Jetpack Boost is only one of them. If you use the Jetpack plugin, you also get access to a free CDN that can drastically improve your site’s loading speeds. Consider starting with Jetpack today!

---