Use code PERFMATTERS for an extra 10% off!

How to delay JavaScript until user interaction in WordPress

While defer JavaScript pushes the script to the bottom of the page load, you can instead delay JavaScript based on user interaction. This can be a great way to speed up the paint of the page for Google Lighthouse when something isn’t needed right away. Especially heavy third-party scripts like Google Adsense, Google Analytics, conversion pixels (FB, Google Ads), etc.

It also works great for things like cart fragments which is a common WooCommerce performance issue.

Delay JavaScript with Perfmatters

Follow the steps below to delay JavaScript with Perfmatters. This should work with a script tag with either the type='javascript' or no type.

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

Step 3

Scroll down and under the “JavaScript” section, you’ll find a “Delay JavaScript section. Enter the name of the script in the box. Such as example.js (one per line).

Delay JavaScript with Perfmatters
Delay JavaScript with Perfmatters

Step 4

Scroll down and click “Save Changes.”

Delay inline JavaScript

To delay inline JavaScript, enter a partial string that is within the <script type="text/javascript"> </script> tag.

For example, say we have this inline JavaScript.

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

We can add lazyLoadInstance to the “Delay JavaScript” box and it will delay it. You can choose any string within the script tags, just make sure it’s unique.

For some JavaScript, they might have a source file as well as an inline component. In this case, you will need to delay both for it to work properly.

Examples of scripts you can delay

Below are some examples of common scripts we delay on WordPress sites.

Delay Google Analytics

To delay Google Analytics, add the following to the “Delay JavaScript” box.

ga( '
ga('
google-analytics.com/analytics.js

If you’re using our local analytics, you can also delay the scripts.

Local Perfmatters analytics.js

To delay the local Perfmatters analytics.js script, add the following to the “Delay JavaScript” box.

analytics.js

Local Perfmatters gtag.js v4

To delay the local Perfmatters gtag.js v4 script, add the following to the “Delay JavaScript” box.

gtagv4.js

Local Perfmatters Minimal

To delay the local Perfmatters analytics-minimal.js script, add the following to the “Delay JavaScript” box.

analytics-minimal.js

Delay Google Tag Manager

To delay Google Tag Manager, add the following to the “Delay JavaScript” box.

/gtm.js
/gtag/js
gtag(
/gtm-

Google Adsense

To delay Google AdSense, add the following to the “Delay JavaScript” box.

adsbygoogle.js

Delay Facebook Pixel

To delay the Facebook Pixel, add the following to the “Delay JavaScript” box.

fbevents.js
fbq(
/busting/facebook-tracking/

Above are just a few of the many examples of scripts you can disable. If you are having any trouble delay a certain script, feel free to contact us.

Was this article helpful?

Related Articles