How to Defer JavaScript in WordPress to Improve Page Speed
What Is Render-Blocking JavaScript?
When a browser encounters a JavaScript file in the HTML <head>, it pauses rendering to download, parse, and execute the script. This delays how quickly the page becomes visible to the user.
Common sources of render-blocking JS:
- Theme and plugin scripts (like sliders, popups, animations)
- External scripts (Google Analytics, Facebook Pixel, etc.)
What Is the Difference Between defer and async?
async: Downloads the script without blocking HTML parsing. Executes it immediately after download — may cause conflicts if order matters.defer: Also downloads without blocking, but delays execution until HTML parsing is complete — safer and better for dependent scripts.
How to Identify Problematic JavaScript
Use these tools to see which scripts are blocking rendering:
- PageSpeed Insights
- Chrome DevTools → Lighthouse tab
- Chrome DevTools → Network → filter by JS
Focus on JS files loading in the <head> and marked as “render-blocking.”
How to Defer JavaScript in WordPress
Option 1: Add Defer with Code (No Plugins)
Add this code to your child theme’s functions.php to apply defer to all scripts except jQuery:
function add_defer_attribute($tag, $handle) {
// Skip jQuery
if (‘jquery-core’ === $handle || ‘jquery’ === $handle) {
return $tag;
}
return str_replace(‘ src’, ‘ defer src’, $tag);
}
add_filter(‘script_loader_tag’, ‘add_defer_attribute’, 10, 2);
Option 2: Use Async
Similar to defer, you can use async instead — just change `defer` to `async` in the code above. But be careful: some scripts depend on loading order and may break.
Using Plugins (With Caution)
If you don’t want to touch code, these plugins allow you to defer or async JS:
- **WP Rocket** – Easy interface, works well, but paid.
- **Asset CleanUp** – Lets you manually defer or disable specific scripts.
- **Flying Scripts** – Lightweight and focused on deferring JS after a delay.
⚠️ Always test after enabling — deferring the wrong script can break your site layout or functionality.
How to Test the Impact
- Use PageSpeed Insights or GTmetrix before/after
- Open your site in an incognito window to spot any visible issues
- Use DevTools → Network tab → check loading order and timing
Conclusion: Defer Strategically
Deferring JavaScript is one of the simplest yet most powerful techniques for speeding up your WordPress site. Start with safe scripts, avoid deferring jQuery (unless you inline it), and test thoroughly.
Want to go further? Request a free performance audit from SpeedWP Pro and we’ll help optimize your scripts and loading strategy for maximum results.