How to Defer Parsing of JavaScript in WordPress

JavaScript can delay how fast your site loads and how quickly users can interact. By deferring non-essential scripts, you free the browser to show content first, cut wasted energy, and make pages feel instantly more responsive. This guide shows you how to do it in WordPress, step by step.

Why defer JavaScript?

Loading JavaScript before your content is visible slows everything down, from user experience to load metrics. Deferring changes that sequence and gives control back to the browser.

Scripts delay content – deferring lets your site load faster

Every script you load competes with your content. If JavaScript is forced to execute before text or images appear, users wait longer and bounce faster. Deferral changes the order: first the essentials, then the extras.

Fewer blocking scripts means lower CO₂ per page

That shift isn’t just about speed, it’s about efficiency. Cutting render-blocking scripts reduces the carbon cost of each page view. In our tests, deferring only two large files saved up to 0.5g CO₂ per page.

If you’re curious how this fits into broader load-time fixes, see our Web Hosting Performance Guide for a complementary set of speed wins.

Defer parsing of JavaScript in WordPress to boost speed and cut waste

Some scripts load before your page content. That’s a problem. These render-blocking JavaScript files slow down perceived performance and inflate your site’s carbon footprint. Deferring them tells the browser: “Wait until the page is visible, then load this.”

You’ll usually see the biggest gains on homepages, landing pages, and theme-built layouts with animations or sliders.

Look for “render-blocking resources” and high TTI

Run your URL through PageSpeed Insights or GTmetrix. Look for:

“Eliminate render-blocking resources” or “Defer offscreen JavaScript”
Long Time to Interactive (TTI)
Third-party scripts like embeds, sliders, or analytics

Choose a plugin to handle deferral for you

The fastest path is a plugin that adds the defer attribute to non-critical scripts. Most give you a toggle for exclusions like jQuery.

Free and beginner-friendly:

Async JavaScript – Developed by the Autoptimize team, offers both async and defer plus script exclusions.
Jetpack Boost – One-click “Defer Non-Essential JS” toggle, no setup needed.

Premium and more precise:

Perfmatters – Per-page script management, jQuery safe mode, plugin-based exclusions.
WP Rocket – Caching plugin that includes defer by default with smart exclusions.

If you’re already trimming scripts, our guide on how to remove jQuery from WordPress shows how to go further.

The Quick Fix for a Slow, Heavy Site

We optimise your site for speed, efficiency and sustainability. No rebuild. No delays. Just better performance and a lighter footprint.

Get Tuned Up or discover DIY improvements →

Enable defer in the plugin settings

Once installed, you’ll need to activate the defer feature. This usually means toggling one or two settings, and telling the plugin which scripts to leave alone.

Toggle “Defer JavaScript” or “Defer non-essential JS”

Once your plugin is installed, go to its settings and enable defer options. They may appear as:

Defer JavaScript
Defer non-essential JS
Exclude jQuery

Exclude jQuery unless your site doesn’t rely on it

Many themes and plugins load inline scripts that depend on jQuery. If you defer jQuery, you could break sliders, forms, or menus.

Tip: Perfmatters also offers “Delay JavaScript Execution”, which loads scripts after the first user interaction, useful for social widgets or heavy embeds.

Exclude anything that needs to load early

Not every script can be safely deferred. If you delay something essential, it can break your site. Here’s how to spot and exclude them.

Inline scripts, sliders, and menus may need to load first

Some scripts shouldn’t be deferred. Watch out for:

jquery.js or jquery.min.js
Sliders, carousels, animations
Inline JavaScript that controls menu interactions
WooCommerce cart or checkout scripts

Test interactions and use plugin exclusions to prevent breakage

After enabling defer, test your site’s interactions. If anything breaks:

Check your browser’s console for errors
Add the broken script’s handle to the plugin’s exclusion list

You can also turn off the WordPress Heartbeat API to remove excess backend scripts.

Prefer plugins – but here’s how to defer manually

If you prefer a lean, code-only setup, you can add a functions.php snippet instead of using a plugin. Just be sure you’re comfortable editing theme files and troubleshooting.

Add a defer filter in your child theme’s functions.php

For plugin-free setups, paste this into your child theme:

function add_defer_attribute($tag, $handle) {
  if (!is_admin() && strpos($tag, '.js') !== false && $handle !== 'jquery') {
    return str_replace(' src', ' defer src', $tag);
  }
  return $tag;
}
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);

Backup first and adjust the snippet if needed

Use a child theme
Backup your site
Adjust the conditions if any scripts break after adding defer

⚠️ This method doesn’t offer exclusions, so use with care.

Test your site after deferring scripts

After enabling defer, you need to confirm it’s working. Check if the scripts are delayed and if anything on the site is broken.

Confirm defer has applied in GTmetrix or PageSpeed

Re-run your performance tests. You should see:

Passed: “Defer offscreen JavaScript”
Lower TTI (under 3 seconds is ideal)
Smaller total blocking time

Look for improvements in TTI and fewer blocking requests

Check the GTmetrix waterfall chart: deferred scripts will show the defer attribute. Everything still functioning? You’re done.

Measure the carbon savings from your changes

Performance gains are only part of the story. Deferring scripts also reduces energy use. Run your site through a carbon calculator and compare before and after.

Test your URL with:

Compare grams CO₂/page before and after.

Even small script changes can cut grams per page

Just removing one heavy script can cut 0.2–0.5g CO₂ per view, especially if it previously blocked layout rendering.

For more, see our guide on how to calculate your website’s carbon impact.

Wrap-up: One toggle for faster, cleaner code

Deferring JavaScript can cut 200–500 ms from load times and prevent scripts from hogging the browser’s attention. It’s a one-time change with immediate returns: faster pages, lower bounce, reduced emissions.

Start with your heaviest page, defer its scripts, and retest. You’ll see just how lean WordPress can be.