Deferring and lazy-loading JavaScript in WordPress with LiteSpeed Cache

LiteSpeed Cache for WordPress includes two settings that control when JavaScript files are executed by the browser. Used correctly, they can meaningfully reduce your page load time and improve your Core Web Vitals scores.

Make these changes on a staging site, not on your live production site. JS deferral settings can break interactive elements, forms, and checkout flows in ways that are not always obvious until you test thoroughly. Apply the changes to staging first, test everything, and only push to production once you are satisfied nothing is broken. If you do not have a staging site, our guide to creating staging websites with WP Toolkit explains how to set one up.

What deferring JavaScript actually does

By default, when a browser encounters a <script> tag in your HTML, it stops parsing the page, downloads the file, and runs it before continuing. This blocks rendering and makes your page feel slower than it needs to be.

Adding the defer attribute to a script tag tells the browser to download the file in the background and only execute it after the HTML has finished parsing. The visitor sees your page content sooner, even if some scripts have not run yet.

LiteSpeed Cache can add this attribute automatically, without you editing any code.

The two JS deferral settings

You will find both settings in your WordPress dashboard under LiteSpeed Cache > Page Optimisation > JS Settings.

JS Defer

This setting adds the defer attribute to external JavaScript files loaded by your theme and plugins. It is the main control for deferring render-blocking scripts.

When you enable JS Defer, LiteSpeed Cache applies it to all scripts that are not explicitly excluded. Scripts that must run before the page renders - such as certain analytics tags or A/B testing tools - can be excluded using the JS Defer Excludes field directly below the toggle.

JS Deferred Inline

This setting extends deferral to inline JavaScript - that is, JavaScript written directly into the HTML of the page rather than loaded from a separate file.

Inline scripts are common in WordPress because themes and plugins often output small blocks of JavaScript to pass configuration values or initialise widgets. Deferring them can help, but it carries more risk than deferring external files, because inline scripts sometimes depend on the DOM being in a specific state or on other scripts having already run.

Enable JS Deferred Inline with caution. Test your site thoroughly after turning it on, paying particular attention to contact forms, sliders, checkout pages, and any interactive elements. If something breaks, disable this setting first before investigating further.

How these settings interact with minification and combining

LiteSpeed Cache also offers JS minification and JS combining (sometimes called concatenation) under the same JS Settings tab. These are separate operations, but they work together with deferral in a specific order.

Minify - removes whitespace and comments from each JS file to reduce its size.
Combine - merges multiple JS files into fewer files to reduce the number of HTTP requests.
Defer - adds the defer attribute to the resulting files so they do not block rendering.

If you have combining enabled, LiteSpeed Cache defers the combined file rather than each individual script. This is generally the most efficient arrangement: fewer files, each deferred.

If you use JS Defer without combining, each individual script file gets deferred. This still helps, but you may still be making a large number of requests.

For a full walkthrough of minification and combining, see our guide to minifying and combining CSS and JavaScript in WordPress.

JS Deferred Inline is applied after combining. If you combine inline scripts into an external file, deferring the external file via JS Defer is usually sufficient and safer than also enabling JS Deferred Inline.

When to use each setting

Setting	Use it when...	Be careful if...
JS Defer	You want to stop external scripts blocking page rendering	Scripts must run before the page is visible (e.g. anti-flicker snippets for A/B testing)
JS Deferred Inline	You have many inline scripts adding to render-blocking time	Your theme or plugins rely on inline scripts running in a specific order

For most WordPress sites, enabling JS Defer alone gives the best balance of performance gain and stability. JS Deferred Inline is worth trying on sites where speed reports still flag inline scripts as a problem after JS Defer is on.

Recommended setup

Set up a staging site and make all the following changes there first. See creating staging websites with WP Toolkit if you need help with that.
In your WordPress dashboard, go to LiteSpeed Cache > Page Optimisation > JS Settings.
Enable JS Minify and JS Combine if you have not already done so.
Enable JS Defer.
Save your settings and clear your LiteSpeed Cache.
Test your site fully - check the homepage, a post or product page, any forms, and your checkout if you have one.
If everything works, consider enabling JS Deferred Inline and repeating your tests.
If any feature breaks after enabling JS Deferred Inline, disable it and use the JS Defer Excludes field to exclude the specific script causing the problem instead.
Once you are satisfied everything works correctly on staging, push the changes to your live site.

To clear your cache after making changes, go to LiteSpeed Cache > Manage > Purge All.

Excluding specific scripts from deferral

Some scripts must not be deferred. Common examples include:

Google Optimize or similar A/B testing tools that need to run before the page renders
Inline scripts that write to the DOM immediately on load
Scripts that other non-deferred scripts depend on

To exclude a script, add part of its filename or URL to the JS Defer Excludes field. For inline scripts, you can add a unique string from the script's content. LiteSpeed Cache will skip deferral for any script matching that string.

Checking your results

After saving your settings, use a speed testing tool to confirm the changes are working. Our guide on how to read speed reports explains how to interpret the results from GTmetrix, Pingdom, and Google PageSpeed Insights.

You can also confirm that LiteSpeed Cache is active and serving cached pages by following the steps in verify if LiteSpeed Cache is working.

If you are new to LiteSpeed Cache or want to review the broader configuration, our guide to configuring LiteSpeed Cache with WordPress covers the full setup from scratch.