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
asyncanddeferplus 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.
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.jsorjquery.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.
