How to Defer JavaScript in WordPress (The Right Way)

If you have ever run your WordPress site through Google PageSpeed Insights and seen "Eliminate render-blocking resources" in the list of opportunities, JavaScript deferral is what that warning is about.

What Is Render-Blocking JavaScript?

When a browser loads a webpage, it reads through the HTML from top to bottom. When it encounters a script tag that loads an external JavaScript file, it stops everything and waits for that JavaScript file to fully download and execute before continuing.

This is called render-blocking. The script is blocking the browser from rendering the page.

Most modern JavaScript does not need to run before the page loads. Analytics scripts, chat widgets, social sharing buttons, Facebook pixels — none of these need to execute before your visitor can see your page.

How Much Does It Actually Cost You?

A single render-blocking script from a third-party service might add 300–800ms to your page load. Three or four render-blocking scripts stack on top of each other. A site with a Facebook pixel, a Hotjar session recording, an Intercom chat widget, and a cookie consent manager can easily add 2–3 seconds of render-blocking time.

On checkout pages this is particularly damaging. Studies consistently show a 1-second delay at checkout increases abandonment by 7–10%.

The Two Ways to Fix Render-Blocking Scripts

defer

<script src="script.js" defer></script>

The browser downloads the script in the background while the page continues loading. The script executes after the HTML has fully parsed. This is the right choice for most scripts.

async

<script src="script.js" async></script>

The browser downloads the script in the background and executes it as soon as it is downloaded. This is the right choice for completely independent scripts like analytics tags.

How to Implement JavaScript Deferral in WordPress

Method 1: WP Rocket (easiest)

WP Rocket (€49/year) handles WooCommerce specifics correctly out of the box.

Setup:
1. Install and activate WP Rocket
2. Go to Settings > WP Rocket > File Optimization
3. Enable "Load JavaScript deferred"
4. Enable "Delay JavaScript execution"

After enabling, test your site thoroughly — click through every page and test your checkout flow end to end.

Method 2: Asset CleanUp (free, more control)

Asset CleanUp is a free plugin that gives you per-page control over which scripts load and how they load.

Setup:
1. Install Asset CleanUp from the WordPress plugin directory
2. Visit a page and open the Asset CleanUp panel
3. For each script, decide whether it should load on that page and how
4. Start with your checkout page — disable chat widgets, social share buttons, and analytics scripts there first

Checkout-specific advice: On your checkout page, disable everything that does not directly serve the transaction. Analytics can load on the thank you page. Chat widgets serve no purpose at checkout.

Scripts You Should Never Defer

  • jQuery — most WordPress plugins depend on it
  • Payment gateway scripts — Stripe, Mollie, PayPal need to load synchronously
  • Inline scripts that run immediately on page load

Measuring the Improvement

After implementing deferral, re-run your site through PageSpeed Insights and look at Total Blocking Time (TBT). A well-optimised site should be under 200ms.

Run your site through the HigherHost speed test to see TBT across all your key pages simultaneously.


HigherHost provides managed WordPress and WooCommerce hosting with infrastructure-level script optimisation at checkout, server-level caching, and free site migration. View our hosting plans.

©2026 Higher Host. All Rights Reserved.