How to Properly Defer JavaScript in WordPress

Render-blocking JavaScript is one of the most common performance issues flagged by PageSpeed Insights and Core Web Vitals. When a browser encounters a script tag, it stops rendering the page until that script is downloaded and executed. Deferring scripts tells the browser to continue rendering while downloading scripts in the background.

defer vs async: Know the Difference

Both attributes load scripts without blocking rendering, but they behave differently:

• defer — Downloads in parallel, executes after HTML parsing is complete, maintains execution order
• async — Downloads in parallel, executes immediately when ready, no guaranteed order

For most WordPress scripts, defer is the safer choice because plugins often depend on execution order (jQuery first, then dependent scripts).

Adding defer in WordPress (The Right Way)

Since WordPress 6.3, you can use the built-in wp_script_add_data() approach or the script_loader_tag filter:

add_filter( 'script_loader_tag', function( $tag, $handle, $src ) {
    // Don't defer admin scripts or scripts already deferred
    if ( is_admin() ) return $tag;
    if ( strpos( $tag, 'defer' ) !== false ) return $tag;

    // Skip jQuery core — many scripts depend on it being available immediately
    if ( $handle === 'jquery-core' ) return $tag;

    return str_replace( ' src=', ' defer src=', $tag );
}, 10, 3 );

Scripts You Should NOT Defer

• jQuery — Too many plugins use inline jQuery. Deferring it breaks everything.
• Analytics/tracking scripts — These should load async, not defer, to capture early page events
• Above-the-fold interactive elements — Sliders, navigation menus that need JS immediately
• Scripts with document.write() — Deferred scripts cannot use document.write

Testing After Deferring

After adding defer, test thoroughly:

1. Check your browser console for JavaScript errors
2. Test all interactive elements — forms, sliders, menus, popups
3. Test on mobile — touch events can behave differently
4. Run PageSpeed Insights to confirm the improvement

If you want a safer approach, WP Multitool includes a Frontend Tweaks module that defers JavaScript, removes emoji scripts, disables XML-RPC, and cleans up wp_head output — with one-click toggles and automatic rollback if something breaks.

The Performance Impact

Properly deferring render-blocking scripts typically improves Largest Contentful Paint (LCP) by 0.5-2 seconds and can push your Total Blocking Time (TBT) well under the 200ms threshold. Combined with critical CSS inlining, it is one of the highest-impact optimizations you can make.