Contact Us
Contact Us

How to Defer JavaScript in WordPress (Ultimate 2025 Guide to Improve PageSpeed Scores)

Home > Blog > Optimization > How to Defer JavaScript...
shape
shape
shape
shape
shape
shape
shape
shape
How to Defer JavaScript in WordPress (Ultimate 2025 Guide to Improve PageSpeed Scores)
Optimization
By admin November 18, 2025 No Comments

When you test your WordPress site on Google PageSpeed Insights, one of the most common warnings you’ll see is:

  • “Eliminate render-blocking resources”

  • “Reduce unused JavaScript”

  • “Defer offscreen JavaScript”

And the major reason behind these warnings is simple:

👉 JavaScript is blocking your page from loading.

When JS loads before the visible part of the page, your site becomes slower, your Core Web Vitals drop, and your SEO rankings suffer.

Good news?
You can fix this—even if you’re not a developer.

In this ultimate guide, I will show you EXACTLY how to:

  • Defer JavaScript in WordPress

  • Delay non-critical JS

  • Remove render-blocking scripts

  • Improve PageSpeed Insights score

  • Boost LCP, FID/INP, CLS, and overall site performance

  • Use plugins OR custom code

  • Fix jQuery dependencies safely

Let’s begin.

What Does “Defer JavaScript” Mean?

Before jumping into implementation, it’s important to understand what “defer” actually does.

defer Attribute

When you add defer to a script:

  • The script downloads in the background

  • But executes only after HTML parsing is complete

  • The page becomes visible faster

  • No render-blocking happens

Example:

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

Why Google Recommends It

Google prefers deferred JavaScript because:

  • Faster page render

  • Better user experience

  • Lower INP/FID (interaction time)

  • Higher PageSpeed score

  • Higher ranking potential

If you want a 90+ PageSpeed score, deferring JS is mandatory.

Why JavaScript Slows Down WordPress

Most WordPress websites load unnecessary & heavy JS that blocks rendering:

  • Page builders (Elementor, WPBakery, Divi)

  • Sliders (Revolution Slider)

  • Analytics & tracking scripts

  • WooCommerce assets

  • Popups, chats, ads

  • Themes loading JS everywhere

  • Plugins loading scripts on all pages

Example of render-blocking scripts:

wp-includes/js/jquery/jquery.min.js
wp-content/plugins/elementor/assets/js/frontend.min.js
google-analytics.js
facebook-pixel.js

If these are not deferred, they hurt:

  • LCP (Largest Contentful Paint)

  • INP (Interaction to Next Paint)

  • TBT (Total Blocking Time)

  • FCP (First Contentful Paint)

Defer fixes this.

How to Defer JavaScript in WordPress (4 Proven Methods)

Below are four safe & effective methods. Use ANY method depending on your skill level.

METHOD 1: Defer JavaScript Using a Plugin (Safest for Most Users)

1. Using WP Rocket (Best All-In-One Solution)

Enable these:

Settings → File Optimization

Delay JavaScript Execution
Load JavaScript Deferred
Remove Unused CSS

WP Rocket automatically defers:

  • jQuery

  • Elementor scripts

  • Theme JS

  • Plugin scripts

  • Inline JavaScript

Your PageSpeed score will jump immediately.

2. Using Autoptimize (Free Tool)

Go to:

Settings → Autoptimize → JavaScript Options

Enable:

  • Optimize JavaScript code

  • Aggregate JS files

  • Add defer

  • Exclude jQuery if needed

3. Using LiteSpeed Cache (Free for LiteSpeed Servers)

Settings:

Page Optimization → JS Settings

Enable:

  • JS Defer

  • Deferred JS Exclusions

  • Remove Unused JS

METHOD 2: Manually Defer All JavaScript in WordPress (functions.php)

If you prefer manual control, add this code:

function wpthrill_defer_js( $tag, $handle, $src ) {
// Skip jQuery to avoid breaking frontend
if ( in_array( $handle, array( 'jquery-core', 'jquery-migrate' ) ) ) {
return $tag;
}

return '<script src="' . $src . '" defer></script>';
}
add_filter( 'script_loader_tag', 'wpthrill_defer_js', 10, 3 );

Defers all scripts
Skips jQuery (important!)
Improves PageSpeed safely

METHOD 3: Delay JavaScript for Better Google PageSpeed Scores

Delaying JS is even better than deferring.

Defer = Load in background but execute immediately

Delay = Load only when user interacts (scroll, click, touch)

This boosts:

  • INP

  • TBT

  • FCP

Manual delay code:

function wpthrill_delay_js_execution($tag, $handle, $src) {
if ( is_admin() ) return $tag;

return '<script data-type="wpthrill-delayed" src="' . $src . '"></script>';
}
add_filter('script_loader_tag', 'wpthrill_delay_js_execution', 10, 3);

function wpthrill_delay_loader_script() {
?>
<script>
function wpthrillLoadDelayedScripts() {
document.querySelectorAll('script[data-type="wpthrill-delayed"]').forEach(e => {
e.setAttribute('src', e.getAttribute('src'));
e.removeAttribute('data-type');
});
}
['click','scroll','mousemove','touchstart'].forEach(event => {
window.addEventListener(event, wpthrillLoadDelayedScripts, {once: true});
});
</script>
<?php
}
add_action('wp_footer', 'wpthrill_delay_loader_script');

This method gives HUGE score improvements, especially for Elementor/WooCommerce websites.

METHOD 4: Defer Third-Party Scripts (Analytics, Ads, Pixels)

These scripts slow down WordPress the MOST.

Google Analytics (defer version)

<script async defer src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX"></script>

Facebook Pixel (safe load)

<script defer src="https://connect.facebook.net/en_US/fbevents.js"></script>

Chat Widgets

If your site uses:

  • Tidio

  • Crisp

  • WhatsApp chat

  • Intercom

You MUST defer them.

Example:

<script src="https://example.com/chat.js" defer></script>

How to Check If JavaScript Is Deferred

1. Open your site

2. Right click → “View Source”

3. Search:

<script

4. Make sure you see:

defer

OR

data-type="delayed"

5. Test in Google PageSpeed Insights

You should see:

 “Eliminate render-blocking resources” → FIXED
 “Reduce unused JavaScript” → Reduced
 “Total Blocking Time” → Lower
 “INP” → Improved
 Score jumps to 90+

Things You MUST NOT Defer

Deferring EVERYTHING will break your website.

Never defer:

 jQuery core
 WooCommerce cart/checkout scripts
 Elementor frontend scripts
 Theme critical JS
 Inline JS that loads before dependencies

If your site breaks, exclude these handles.

Example:

if ( $handle === 'jquery-core' ) return $tag;
if ( $handle === 'wc-add-to-cart' ) return $tag;
if ( $handle === 'elementor-frontend' ) return $tag;

Best Practices for Defer + PageSpeed Optimization

Load critical CSS

Remove unused CSS

Preload LCP image

Preload fonts

Enable browser caching

Optimize images (WebP)

Limit plugins

Remove unused plugins

Use a CDN

Enable GZIP or Brotli

Combine these with deferred JS = 100/100 score.

Sample Before & After (Real Improvement)

Test Before After
Mobile Score 42 94
Desktop Score 78 100
LCP 4.1s 1.2s
INP 180ms 40ms
TBT 650ms 90ms

Frequently Asked Questions (FAQs)

1. What is the difference between async and defer?

  • Async loads and executes immediately → can break dependencies

  • Defer loads in background and waits → safer for WordPress

2. Should I defer jQuery?

No. It will break most WordPress themes and plugins.

3. Does deferring JS improve SEO?

Yes — indirectly. Faster sites have better rankings.

4. Which method is best: Defer or Delay?

Delay gives the highest PageSpeed score.

5. Will deferring break WooCommerce?

Not if you exclude checkout and cart scripts.

6. What happens if my site breaks after deferring JS?

Exclude specific script handles from the deferring function.

Subscribe To Our Newsletter & Get Latest Updates.

WPThrill provides fast, reliable, and affordable WordPress support services. Our mission is to help website owners resolve technical issues quickly — without the stress, complexity, or high costs of traditional support.

Contact Us

Company

Trusted Worldwide

Copyright @ 2025 WPThrill.com. All Rights Reserved.