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

When testing your site in PageSpeed Insights, you may need to remove unused JavaScript.

A good starting point is to find your largest JavaScript files in the Chrome Dev Tools coverage report. This way, you’ll know whether it’s from your theme, certain plugins, or third-party code.

By far the easiest way to reduce JavaScript is with lightweight themes/plugins (Gutenberg, Query Monitor, and WP Hive will be your best friends). Elementor and Divi have too much bloat and you’re much better off with something like GeneratePress (what I use), Blocksy, or Kadence.

If the JavaScript is from third-party code, this can often be hosted locally like Google Fonts, Analytics, and YouTube thumbnails (videos/iframes can also be lazy loaded). For third-party code that can’t be hosted locally, most cache plugins let you delay their JavaScript or you can use FlyingScripts for this. You can even offload them to Cloudflare using the new Zaraz feature.

There are other ways to remove unused JavaScript too: activating certain settings in Elementor Experiments (or Divi’s built-in performance settings), and using the Perfmatters script manager to disable plugins or specific JavaScript files on pages where they’re not being used can all help.

But like I said, if you open your coverage report and your largest JavaScript files are coming from your theme or a certain plugin, you may want to re-evaluate how your site is designed.

 

1. Find Your Largest JavaScript Files

Find large JS files in Chrome Dev Tools (recommended), PageSpeed Insights, or your GTmetrix Waterfall chart. For Dev Tools, visit the site and use Ctrl + Shift + J (PC) or Ctrl + Option + J (Mac).

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

The URL will usually tell you what 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
Find heavy JavaScript in Chrome Dev Tools → Coverage
Reduce unused javascript
PageSpeed Insights only shows files with high potential savings

 

2. Use A Lightweight Theme

In case you didn’t know, Elementor and Divi are bloated.

Sure you can optimize them with Elementor’s Experiments and Divi’s performance settings, then code your header/footer in CSS so it doesn’t use as much bloated code. But it’s much easier to design your website without worrying about your page builder adding bloat.

I redesigned my site in GeneratePress + GenerateBlocks, but Blocksy and Kadence are popular choices too. Not a fan of Astra because of their ethics and Oxygen Builder is a big learning curve.

Start adding Elementor Pro and other page builder plugins into the picture and you’re asking for a speed optimization disaster.

Fastest wordpress themes
Learn more about the test

I was using Elementor and did everything I could to reduce JavaScript, but I was still getting errors in PageSpeed Insights. I decided to redesign my site (again) using GeneratePress and instantly noticed an improvement in my scores, load times, and when clicking through my blog.

Elementor source code

There’s a large trend of people moving away from slow page builders:

Favorite theme poll

Generatepress-speed

Fastest-wordpress-themes poll

Elementor to oxygen builder

 

3. Avoid Bloated Plugins

Some plugins add extra JavaScript/CSS to the frontend while others run resource-hungry background tasks and increase memory usage.

While neither are good, JavaScript heavy plugins are usually “design plugins” like galleries, sliders, comments, or contact forms. View my full 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.

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 your slowest plugins

 

4. Reduce Third-Party Code

Third-party code is another source of JavaScript. You can use PageSpeed Insights or Chrome Dev Tools to see all third-party code loading on your site.

Third party code
Find third-party domains in PageSpeed Insights
Third party code chrome dev tools
Find third-party domains in Chrome Dev Tools → Sources → Page

How To Optimize Third-Party Code

  • Host files locally – fonts, Google Analytics, Tag Manager, and other third-party code can be hosted locally on your server instead of pulling from external domains. For blogs with lots of comments, use a local avatar plugin to prevent third-party gravatar.com requests.
  • Delay – most cache plugins can delay JavaScript or use FlyingScripts (see section #9).
  • lazy Load – most cache plugins have settings to lazy load iframes/Maps, replace YouTube iframe with a preview image, and FlyingPress can even host YouTube thumbnails locally.
  • Prefetch – for domains that can’t be hosted locally, use the prefetch resource hint. CDN URLs and external fonts are usually the only domains that should use preconnect instead.
  • Limit third-party code – 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 to only load your social sharing plugin on your blog as opposed to across the entire website.
Litespeed cache localization files
LiteSpeed Cache has an option to localize JavaScript

Prefetch dns requests

 

5. Delay Third-Party JavaScript

Delaying JavaScript isn’t removing it, but it delays loading it until user interaction (i.e. scroll, mouse click, touching the screen on mobile). This can significantly improve initial load times while fixing several items in PageSpeed Insights (including the remove unused JavaScript item).

WP Rocket and LiteSpeed Cache automatically delay JavaScript (just enable this in WP Rocket’s file optimization settings or LiteSpeed Cache’s JS settings under “load JS deferred”).

Wp rocket delay javascript execution

FlyingPress and Pefmatters require you to manually add the JavaScript files to delay. Check your third-party usage report in PageSpeed Insights or see my list of common JS files to delay.

Delay javascript third party code

Perfmatters delay javascript

SiteGround Optimizer and most other cache plugins don’t support delaying JavaScript, in which case you need to use Flying Scripts. This also requires manually adding JavaScript 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.

 

6. Activate Elementor/Divi Performance Settings

If you’re using Elementor, go to Elementor → Settings → Experiments and active the improved asset loading setting. This reduces Elementor’s JavaScript files by dynamically loading widget JS handlers and Swiper only when these are actually being used. Elementor says “in order for this experiment to work properly, you’ll have to use the Elementor Pro 3.0.9 version and above.”

Elementor improved asset loading

Divi has similar options to remove unused JavaScript in Theme Options → General → Performance. Definitely enable dynamic module framework and dynamic JavaScript libraries.

Remove unused javascript divi

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

 

7. Remove Unused JavaScript With Asset Unloading Plugins

Perfmatters (paid) and Asset CleanUp (free) let you disable unused JavaScript on pages where certain files/plugins don’t need to load.

I prefer Perfmatters because it has more optimizations than Asset CleanUp, many of which aren’t found in most cache plugins (like hosting fonts/analytics locally and delaying JS). The interface is cleaner and new features are released more frequently with better documentation. Plus, it lets you disable unused CSS/JS files on mobile devices. This is what I’m currently using.

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
Disabling social sharing plugin everywhere but posts (just one example)
Disable elementor diaglog javascript
You can also disable elementor-dialog if you don’t use popups
Remove contact form javascript
What Asset CleanUp looks like

 

If you don’t want to completely remove your page builder, try hard coding your header, footer, and sidebar in CSS instead of relying on bloated page builder code/plugins. CSS is much faster and you’ll still be able to design your actual pages (the main content area) in Elementor or Divi.

I hired WP Johnny to do it but it was expensive and he’s a busy guy. You may want to try and hire a WordPress developer on freelancer.com or upwork.com if you don’t currently have one.

Wp johnny hardcode header footer service

 

9. Minify JavaScript

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

Minify javascript

 

10. Combine JavaScript (Or Not)

Combining JavaScript isn’t always a good thing.

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, then decide whether you should combine.

Css js files sizes

 

11. Disable jQuery

Some themes/plugins use jQuery, so be careful when disabling it.

It may be possible to disable certain parts of jQuery (e.g. jquery-migrate) without it breaking your site. Test it in Perfmatters or Asset CleanUp and see if you can at least remove a few KBs.

Wordpress jquery
Avoid jQuery-dependent plugins and disable files if they’re not being used

 

12. Disable Cloudflare Email Obfuscation

Cloudflare’s email obfuscation loads a very small JavaScript file.

Cloudflare email obfuscation psi

Either you enabled this yourself or you’re using WP Rocket’s “optimal settings” for Cloudflare. This stops bots from collecting your email. So unless you publicly show your email address on your site, you don’t need it. You can also try listing it like this: tom(at)onlinemediamasters.com.

Cloudflare email address obfuscation
Cloudflare Email Obfuscation adds a small JavaScript file (email-decode.min.js)

 

13. Disable WooCommerce Scripts

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

 

14. Use A Smaller Google Analytics Tracking Code

You can save up to 50KBs by using a smaller tracking Google Analytics code while also preventing a 2nd request to DoubleClick. This assumes you’re OK not using certain Google Analytics features (demographics, interests, site speed monitoring, remarketing, advertising data). Check the Perfmatters documentation to learn what each one tracks and doesn’t track. The following plugins support analytics-minimal.js: Perfmatters, CAOS, and Flying Analytics.

  • minimal: 1.5 KB
  • analytics.js: 18.4 KB
  • gtag.js: 39.3 KB
  • gtag.js v4: 51.5 KB
Perfmatters analytics settings
Perfmatters lets you use a smaller GA tracking code with other settings

 

Frequently Asked Questions

How do I remove unused JavaScript in WordPress?

Use the Chrome Dev Tools coverage report to view your largest JavaScript files which are usually from bloated WordPress themes and page builders, plugins, and third-party code.

How do I remove unused JavaScript in WP Rocket?

WP Rocket removes unused JavaScript by minifying/combining JavaScript and delaying third-party code. Most other JavaScript optimizations cannot be done using WP Rocket.

Can Autoptimize remove unused JavaScript?

Autoptimize can minify/combine JavaScript files and defer them, but chances are this won't improve scores much for the remove unused JavaScript recommendation.

Cheers,
Tom

You Might Also Like:

21 thoughts on “How To Remove Unused JavaScript In WordPress (Usually Caused By Plugins, Third-Party Code, Themes/Page Builders)”

  1. 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