Use the code PERFMATTERS for 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 three 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

Defer Inline JavaScript

The second option is “Defer Inline JavaScript.” This adds a defer attribute to your inline JavaScript tags. Note: This requires “Defer JavaScript” to be toggled on.

Defer inline JavaScript
Defer inline JavaScript

Include jQuery

The third 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 or a unique identifier inside inline script content.

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

Add inline JS exclusion by string

To exclude inline JavaScript from deferral, enter a partial string that is within the <script type="text/javascript"> </script> tags.

For example, say we have this inline JavaScript.

<script type="text/javascript" defer>var lazyLoadInstance=new LazyLoad({elements_selector:"[loading=lazy],.perfmatters-lazy",thresholds:"200% 0px"});</script>

We can add lazyLoadInstance to the “Exclude from Deferral” box (one per line) and it will remove the defer attribute from the inline JavaScript. You can choose any string within the script tags, just make sure it’s unique.

Exclude inline JS script from deferral

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