Use code PERFMATTERS for an extra 10% off!

How to defer JavaScript in WordPress

Due to the nature of how JavaScript works, you will most likely see an “Eliminate render-blocking resources” warning in speed testing tools. This means your JavaScript files slow down (block) the first paint of your WordPress site’s page when loading.

Eliminate render-blocking resources warning
Eliminate render-blocking resources warning

The best way to speed up the paint of a page is to defer all non-critical JavaScript. This means the scripts will load after the rest of the page has loaded. You are basically pushing them to the bottom of the waterfall. This is done by adding a defer attribute on each JavaScript file.

<script type='text/javascript' src='https://domain.com/script.js' defer></script>

How to defer JavaScript with Perfmatters

You can enable JavaScript deferring in Perfmatters to fix render-blocking warnings and speed up the paint of a page. Follow the steps below.

There is no need to defer JavaScript multiple times. If you’re already deferring it with another plugin, then you can keep using that or switch over to Perfmatters. This is phase one of our JavaScript optimization rollout, which we’ll keep improving.

Step 1

Click into the Perfmatters plugin settings.

Perfmatters plugin settings
Perfmatters plugin settings

Step 2

Click on the “Extras” tab and the “Assets” sub-navigation menu.

Perfmatters Assets
Perfmatters Assets

Scroll down and under the “JavaScript” section, you’ll find two different options you can enable.

Defer JavaScript

The first option is “Defer JavaScript.” This adds a defer attribute to all of your JavaScript files.

Defer JavaScript
Defer JavaScript

There is a check to see if the script already has a defer attribute, so you don’t need to worry about it getting multiple attributes applied.

Include jQuery

The second option is to “Include jQuery.” This allows jQuery core, which is part of WordPress, to be deferred. Note: This requires “Defer JavaScript” to be toggled on.

Warning: We recommend testing this separately or leaving it off. Many plugins and themes require jQuery and deferring it might cause problems on your site.

Defer jQuery core
Defer jQuery core

How to add JavaScript deferral exclusions

Based on the order a JavaScript file or tag is needed, deferring it might cause problems. If needed, you can exclude it by the src URL.

Add JS exclusion by script

For JavaScript files, enter the name of the script into the “Exclude from Deferral” box. Such as script.js (one per line).

Exclude JS script from deferral
Exclude JS script from deferral

This should be unique, so if you have a generic file name, you can add a partial path to include the plugin’s folder on your site. Example: /generatepress/js/menu.min.js

Troubleshooting Deferral

If you think deferral is causing an issue you can always uncheck the options above temporarily to test.

How to exclude a page/post from deferral

You can exclude JavaScript deferral on an individual post, page, or custom post type. In the editor, on the right-hand side uncheck “Defer JavaScript.” This will exclude the entire page from deferral. This can be useful for say a checkout or contact us page that might have more issues than the rest of the site.

JS deferral on individual page
JS deferral on individual page

Was this article helpful?

Related Articles