Deferring and Delaying JavaScript

JavaScript can hold up how quickly a page appears. xSpeed Cache gives you two ways to change when scripts run: defer and delay. This article explains the difference and how to fix scripts that stop working.

What this does

By default, many scripts are render-blocking. The browser pauses to download and run them before it finishes drawing the page. That delays what the visitor sees.

xSpeed Cache offers two settings to change this:

• Defer JavaScript tells the browser to keep building the page and run the script after the HTML is parsed.
• Delay JavaScript Until Interaction waits to load scripts until the visitor does something, like scrolling, moving the mouse, tapping, or pressing a key.

Defer vs. delay

The two settings solve the same problem in different ways.

• Defer still loads the script during the page load, just later in the process. It adds defer="defer" to the script tag so it runs after the HTML is parsed.
• Delay does not load the script at all until the visitor interacts with the page. xSpeed Cache holds the script back and swaps it in on the first interaction. If no interaction happens, the scripts load automatically after 8 seconds.

Delay has a bigger effect on first paint because nothing scripted loads up front. But it can break parts of the page that need to work before the visitor touches anything.

Note: If both Defer and Delay are turned on, delay takes priority for each script.

Why use it

Moving scripts out of the way lets the page appear sooner. Delay can make a large difference on pages with many scripts, because the browser is free to draw the page before loading any of them.

How to enable it

1. Go to the xSpeed Cache settings and open the Minify panel.
2. Turn on the setting you want:
   • Defer JavaScript
   • Delay JavaScript Until Interaction
3. Save your settings.
4. Visit your site and test menus, sliders, popups, and anything else that runs above the fold.

Warning: Delay can break interactive elements that need to work before the visitor scrolls or clicks, such as a sticky header menu or an auto-playing slider. Test your site before leaving this on.

Settings explained

Setting	What it does	Default
Defer JavaScript	Adds defer="defer" so scripts run after HTML parsing	Off
Delay JavaScript Until Interaction	Holds scripts until the visitor scrolls, moves the mouse, taps, or presses a key	Off
Defer / Delay Exclusions	Script handles or URL substrings that skip defer and delay	jquery-core, jquery-migrate

Defer JavaScript adds defer="defer" to enqueued script tags so they run after the HTML is parsed. jQuery and its hard dependencies are skipped automatically, because most themes expect jQuery to be available right away.

Delay JavaScript Until Interaction postpones script loading until the visitor scrolls, moves the mouse, taps, or presses a key. It can greatly improve first paint on script-heavy pages, but it can break above-the-fold scripted features. Test before leaving it on.

Defer / Delay Exclusions is a list of script handles or URL substrings that should skip both defer and delay. The defaults exclude jQuery (jquery-core and jquery-migrate) because most themes depend on it being available immediately. Add one entry per line. This list appears only when Defer or Delay is turned on, and it controls both features.

How exclusions fix broken scripts

If a script stops working after you enable defer or delay, that script probably needs to run earlier. Add it to the Defer / Delay Exclusions list and it will load normally again.

You can list either:

• the script handle (the name WordPress registers the script under), or
• a part of the script’s URL, such as a folder or file name.

xSpeed Cache matches either one and skips that script. The match on the URL is a simple text match, so a short, unique piece of the path works.

Tip: Some scripts (such as xSpeed Cache’s own admin scripts and core WordPress modules like wp-hooks, wp-i18n, wp-url, and wp-api-fetch) are always excluded, so you do not need to add them yourself.

Best practices

• Start with Defer, which is gentler, before trying Delay.
• After enabling either setting, click through your menus, forms, and sliders.
• When something breaks, add just that script to the exclusion list rather than turning the whole feature off.
• Keep jQuery in the exclusion list unless you are sure your theme does not need it early.

Troubleshooting

My menu, slider, or popup stopped working after enabling delay. These features often need to run before the visitor interacts. Add the script’s handle or a piece of its URL to the Defer / Delay Exclusions list, then test again.

A script works on first interaction but is missing on page load. That is how delay works: the script loads on the first scroll, click, tap, or key press, or after 8 seconds. If you need the script available immediately, exclude it.

An inline script broke after enabling delay. Delay also holds inline scripts until interaction. If an inline script must run right away, exclude the related handle.

Defer is not changing a script. xSpeed Cache skips scripts that already have defer or async, scripts with no src (inline scripts), and anything in your exclusion list.

FAQ

What is the difference between defer and delay in one sentence? Defer loads the script during page load but runs it later; delay does not load the script at all until the visitor interacts with the page.

Does the exclusion list affect combining too? No. The exclusion list governs defer and delay. Combining has its own automatic exclusions.

Related

• Minifying CSS, JavaScript, and HTML
• Combining CSS and JavaScript Files
• Loading CSS Asynchronously