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

Need to remove unused JavaScript?

Delaying JavaScript and removing bloat are 2 common ways to remove unused JavaScript in WordPress. Many optimization plugins can delay JavaScript, disable plugins on pages they’re not used, and host third-party code locally. But, avoiding bloated plugins/page builders can save you trouble from having to optimize them.

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!

Javascript chrome dev tools
The “coverage report” of Chrome Dev Tools has more details than PageSpeed Insights
Reduce unused javascript
PageSpeed Insights only shows files with high potential savings
  • 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.

Wp rocket delay javascript exclusions
Source: WP Rocket

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.

Flying scripts

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:

Third party code
Find third-party domains in PageSpeed Insights
Litespeed cache localization files
LiteSpeed Cache can localize third-party JavaScript

 

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.

Perfmatters activate script manager

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.

Perfmatters test mode

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.

Disable social sharing plugins perfmatters
One example is disabling your social sharing plugin “everywhere but posts”
Disable elementor diaglog javascript
You can disable elementor-dialog if you don’t use popups
Remove contact form javascript
What Asset CleanUp looks like

 

5. Optimize Elementor + Divi

Elementor and Divi add more JavaScript/CSS than alternatives.

Fastest wordpress themes

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

Elementor css javascript

  • Activate performance settings – Elementor’s improved asset loading and Divi’s dynamic framework/library settings will only load JavaScript when it’s being used.
  • Use less widgets/columns – there’s a good YouTube tutorial on this, but you’ll want to design your pages in a way that reduces the number of columns/widgets.
  • Code your header/footer/sidebar in CSS – you may need a developer, but it can make a big improvement (WP Johnny offers it as a service). When he did it for me, “Elementor” went from a couple thousand to a couple hundred in my source code.
  • Avoid bloated page builder plugins – Elementor plugins are notoriously bloated and often load across your entire site. Check every plugin in WP Hive (and Chrome Dev Tools coverage report) before committing to it. I’ve personally replaced table, comment, and gallery plugins with Gutenberg blocks and lightweight alternatives.
  • Add delay JavaScript exclusions – when delaying JavaScript, remember to add exclusions that are specific to your page builder (see Perfmatters’ documentation).

Elementor with without experiments font optimization
Impact on file sizes when enabling Elementor Experiments + font optimization

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

Favorite theme poll

Generatepress-speed

Fastest-wordpress-themes poll

Elementor to oxygen builder

 

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

Lightweight Alternatives

  • Social Sharing – Grow Social.
  • Comments – native comments in CSS.
  • Gallery – Gutenberg Gallery or Meow Gallery.
  • Translate – MultilingualPress, Polylang (not WPML).
  • Security – use a firewall and use this security checklist.
  • Sliders – Soliloquy or MetaSlider, but I don’t recommend sliders.
  • SEO – Rank Math or SEOPress (less bloated than Yoast with more features).

Slow wordpress plugins query monitor
Use Query Monitor to find slow plugins

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:

Remove jquery

 

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.

Disable embeds emojis jquery migrate

 

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.
Cloudflare email obfuscation psi
Email obfuscation (and other Cloudflare features) can cause errors in PageSpeed Insights

 

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.

Disable woocommerce scripts styles

 

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.

Minify javascript

 

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.

Css js files sizes

 

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

You Might Also Like:

22 Comments...

  1. Thank you. This information is concise, helpful and executable. Unlike most of the devs I’ve hired who were quite executable. If you know what I mean :-) lol thank you

    Reply
  2. Thanks for this article, My website speed for desktop is perfect 90 and mobile 49, I can’t understand why my mobile speed not increase

    Reply
    • PSI tests mobile on a 3G connection. Checked out your site though, I would start by hosting fonts locally and optimizing those, or at least try the Swap Google Fonts Display plugin to ensure text remains visible during font load. They’re pulling from fonts.gstatic.com now. Also looks like you need to reduce TTFB which is obviously hosting.

      Reply

Leave a Comment