How To Remove Unused JavaScript In WordPress (Usually From Bloat, Plugins Third-Party Code, Themes/Page Builders)

Need to remove unused JavaScript?

For example, a popular setup (Elementor/Divi + WP Rocket/SiteGround Optimizer) adds more JavaScript than GeneratePress + FlyingPress/LiteSpeed Cache. With GeneratePress, there’s no need to tweak performance settings (because it doesn’t need it), use less widgets/columns, or code your header/footer in CSS like you would with Elementor and Divi. And unlike most cache plugins, FlyingPress + LiteSpeed Cache can not only minify/delay JavaScript, but also removes bloat and hosts third-party code locally. This is why the “right” setup is so critical for web vitals.

No matter which setup you use (and no matter which JavaScript files are causing you trouble), I’ll cover everything I can in the guide. You can also leave a comment if you have any questions!

 

1. Find Your Largest JavaScript Files

Open your Chrome Dev Tools coverage report by viewing your site and click Ctrl + Shift + J (PC) or Ctrl + Option + J (Mac). Go to the coverage tab and you’ll see your largest JavaScript files. I prefer this over PageSpeed Insights as it shows more data. You can also use GTmetrix Waterfall.

The URL usually tells you where it’s from. You can filter by type to see all your JavaScript files, or look at usage visualization to see total bytes and unused bytes. It should tell you everything!

• Is it jQuery?
• Is it a plugin?
• Is it your theme/page builder?
• Is it third-party code from external domains?

After you find out what is adding JavaScript, use my tutorial to optimize it.

 

2. Delay JavaScript

Most cache plugins do this, or use Flying Scripts.

This is usually done with third-party code (like Google Analytics or Facebook Pixel) or heavy JavaScript files loading below the fold (like social sharing and third-party comment plugins). While this won’t “remove” JavaScript, it delays it from being loaded until user interaction (i.e. scroll, mouse click, touching the screen on mobile). This can significantly improve web vitals.

FlyingPress + LiteSpeed Cache both have settings to delay/exclude files. Delay all gives you better scores, but you’ll need to exclude files or things can break. Perfmatters has a nice list of common JS delay exclusions. Still, you’ll want to check your plugin’s documentation on how they handle this. Delaying specific scripts is safer but you risk missing JavaScript files to delay. In this case, view your coverage report from step 1 and add JS files IF they load below the fold.

WP Rocket + Perfmatters automatically delay JavaScript files and let you toggle specific themes/plugins ON or OFF. You can also manually exclude files if delaying causes them to break.

SiteGround Optimizer and most other cache plugins don’t support delaying JavaScript, in which case you’ll want to use Flying Scripts (free plugin). This requires manually adding JS files.

You may need to increase the timeout period to see better results (I generally recommend 5-7 seconds). Just be careful when delaying AdSense or Analytics since this can affect data/revenue.

 

3. Host Third-Party JavaScript Locally

If third-party code can’t be delayed, try to host it locally.

For example, you can replace YouTube iframes with a preview image in most cache plugins. Or host Gravatars locally if you have lots of comments (using FlyingPress or Simple Local Avatars).

If you must use third-party code, avoid loading it above the fold and limit where it’s used. For example, only load Maps on contact/local SEO pages, don’t load AdSense above the fold, and avoid over tracking in Tag Manager. Use Perfmatters or Asset CleanUp to only load your social sharing plugin on your blog instead of your entire website. Check your third-party code report:

 

4. Disable Plugins On Pages They’re Not Used

Perfmatters (paid) and Asset CleanUp (free) let you disable plugins on pages/posts they’re used, which removes unused JavaScript and CSS.

I prefer Perfmatters because the interface is cleaner and has several optimizations not found in WP Rocket and SiteGround Optimizer. But if you’re already using FlyingPress, many Perfmatters features overlap. Which means you may want to save the money and use Asset CleanUp instead.

Step 1: Install Perfmatters or Asset CleanUp.

Step 2: Enable the script manager if using Perfmatters.

Step 3: Enable test mode in the settings. This prevents the script manager from breaking your website since only you will see the changes. Once you’re done configuring the script manager (and assuming it doesn’t break anything), deactivate this and it will make your changes go live.

Step 4: Head to the script manager and disable JavaScript files (or entire plugins) where they don’t need to load. For example, you may be able to disable contact form plugins everywhere but contact page, social sharing plugins everywhere but posts, and comments everywhere but posts. It depends where plugins are being used and whether they load JS/CSS across your site.

 

5. Optimize Elementor + Divi

Elementor and Divi add more JavaScript/CSS than alternatives.

If you absolutely must use a page builder, take the time to optimize it so it doesn’t look like this:

Lots of people are moving away from page builders (I went from Elementor to GeneratePress).

 

6. Replace Bloated Plugins (Especially If They Use jQuery)

Some plugins load extra JavaScript/CSS on the frontend (and can also use jQuery). Other plugins run resource-hungry background tasks and increase memory usage. Neither are good.

JavaScript-heavy plugins are often “design plugins” like galleries, sliders, comments, or contact forms. View my list of slow plugins and avoid them if possible. If you used the Chrome Dev Tools coverage report or Query Monitor, the culprits will be obvious. Look for lightweight alternatives.

Plugin	Category	Memory Impact	PageSpeed Impact
All In One SEO	SEO	X	X
Disqus	Comments	✓	X
Divi Builder	Page Builder	X	X
Elementor	Page Builder	X	X
Elementor Premium Addons	Page Builder	✓	X
Elementor Pro	Page Builder	X	X
Elementor Ultimate Addons	Page Builder	✓	X
Essential Grid	Gallery	✓	X
JetElements	Page Builder	X	X
NextGEN Gallery	Gallery	X	X
Popup Builder	Popup	X	X
Slider Revolution	Slider	X	X
Social Media Share Buttons	Social Sharing	✓	X
wpDiscuz	Comments	X	X
WPML	Translate	X	X

jQuery is used in many themes/plugins. It may be possible to disable certain parts of jQuery (i.e. jquery-migrate) without breaking your site, which you test in Perfmatters + Asset CleanUp. However for best results, this goes back to using jQuery-free plugins/themes. Like this guy did:

 

7. Disable Emojis, Embeds, jQuery Migrate

All these add JavaScript and can be disabled using FlyingPress, Perfmatters, or Unbloater.

• Disable Emojis: On – removes a JavaScript file needed for emojis (use Unicode instead).
• Disable oEmbeds: On – when you paste a URL into your WordPress editor, this loads a pretty preview (from YouTube, Facebook, Tweets, etc). If you don’t need this, turn it on.
• Disable jQuery Migrate: Off – if you’re not using a page builder, turn it on. Perfmatters has docs on dealing with jQuery in the script manager, defer, delay, and preload settings.

 

8. Disable Email Obfuscation, Rocket Loader, Bot Protection

These Cloudflare features also add JavaScript. Unless you really need them, disable them.

• Email Obfuscation (email-decode.min.js) – stops bots from collecting your email address. If you publicly show it, you can list it like this: tom(at)onlinemediamasters.com.
• Rocket Loader (rocket-loader.min.js) – lots of compatibility issues with plugins/themes and is notorious for breaking WordPress sites, or has an opposite effect of slowing it down.
• Bot Protection (cdn-cgi) – blocking bad bots is recommended and can even reduce CPU usage, but there are other ways to go about this… like the Blackhole For Bad Bots plugin.

 

9. Disable WooCommerce Scripts On Non-eCommerce Pages

If you’re using WooCommerce, try the Disable WooCommerce Bloat plugin. In addition to disabling WooCommerce scripts/styles on non-eCommerce pages, it also has bloat removal options like removing WooCommerce junk in the dashboard. GitHub also has a few solutions.

 

10. Minify JavaScript

Minifying JavaScript removes unnecessary characters from your code. If this breaks your website, find the problematic files in your source code and exclude them from minification.

 

11. Don’t Combine JavaScript

Combining JavaScript isn’t almost always not recommended.

WP Johnny recommends only combining JavaScript on small websites where the total CSS + JavaScript file size is under 10KB (most websites are well over 10KB). Check your GTmetrix Waterfall chart, see how big your CSS and JS files are, and decide whether you should combine.

 

Frequently Asked Questions

How do I reduce unused JavaScript in WordPress?

Two easy ways to reduce unused JavaScript in WordPress are to host third-party code locally and delay JavaScript. Page builders can be optimized and plugins can be disabled on pages they're not used. Avoiding bloated page builders/plugins can save also you work.

How do I remove unused JavaScript in WP Rocket?

WP Rocket removes unused JavaScript by minifying/delaying it. Other JavaScript optimizations (like hosting it locally and removing bloat) can't be done in WP Rocket.

How does Autoptimize remove unused JavaScript?

Autoptimize can minify/combine JavaScript and defer files, but you'll need to do other JavaScript optimizations (like delaying files and hosting them locally) for better scores.

Cheers,
Tom