Originally published at https://makewpfast.com/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:
Check your browser console for JavaScript errors
Test all interactive elements — forms, sliders, menus, popups
Test on mobile — touch events can behave differently
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.
Get WordPress Performance Tips
Join developers and agency owners who get backend optimization strategies, tool releases, and deep-dive guides.
Join Free
No spam. Unsubscribe anytime. We respect your privacy.
Top comments (0)