How To Remove Unused JavaScript In WordPress (PageSpeed Item)

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

A good starting point is to find your largest JavaScript files in Chrome Dev Tools or GTmetrix Waterfall. That way, you can learn if it’s from your theme, certain plugins, or third-party code.

Slow plugins and third-party code are the most common reasons you’ll see remove unused JavaScript errors. Review this list of 70+ common slow plugins or use Query Monitor to find your slowest plugins. Third-party JavaScript is usually from Google Tag Manager, Facebook and Twitter widgets, social share buttons, Facebook Pixel, reCAPTCHAs, Analytics, and AdSense. Some third-party code can be hosted locally, delayed, or you can add prefetch and preconnect.

Other than using lightweight plugins/themes and optimizing third-party code, you can use minify, combine, defer, or delay JavaScript. Asset unloading plugins like Perfmatters or Asset CleanUp can also help remove JavaScript and plugins on content where it doesn’t need to load.

 

1. Find Your Largest JavaScript Files

Find your largest JavaScript files using Chrome Dev Tools (recommend), PageSpeed Insights, or your GTmetrix Waterfall chart.

  • Is it jQuery?
  • Is it a plugin?
  • Is it your theme/page builder?
  • Is it third-party code from external domains?
Usage - chrome dev tools
Find heavy JavaScript in Chrome Dev Tools → Coverage
Remove unused javascript wordpress
Find heavy JavaScript in PageSpeed Insights
Gtmetrix waterfall javascript files
Find heavy JavaScript in your GTmetrix Waterfall chart

My heaviest JavaScript file by far is coming from my comments plugin (wpDiscuz). I’m in the middle of designing my comments in CSS and will delete the wpDiscuz plugin when I’m done.

 

2. Avoid JavaScript Heavy Plugins

Some plugins add large JavaScript files to your site while others increase CPU with resource intensive background processes. View my full list of slow plugins and avoid them when possible. If you used Chrome Dev Tools + Query Monitor, it will be obvious which plugins are the culprits (Elementor, Elementor Pro, and page builder plugins are notorious for adding JavaScript + CSS).

PluginCategoryMemory ImpactPageSpeed Impact
All In One SEOSEOXX
DisqusCommentsX
Divi BuilderPage BuilderXX
ElementorPage BuilderXX
Elementor Premium AddonsPage BuilderX
Elementor ProPage BuilderXX
Elementor Ultimate AddonsPage BuilderX
Essential GridGalleryX
JetElementsPage BuilderXX
NextGEN GalleryGalleryXX
Popup BuilderPopupXX
Slider RevolutionSliderXX
Social Media Share ButtonsSocial SharingX
wpDiscuzCommentsXX
WPMLTranslateXX

Lightweight Alternatives

  • Social Sharing – Grow Social.
  • Comments – native comments in CSS.
  • Gallery – Gutenberg Gallery or Meow Gallery.
  • Translate – MultilingualPress, Polylang (not WPML).
  • Sliders – Soliloquy or MetaSlider, but I don’t recommend sliders.
  • Security – Cloudflare, your hosting firewall, limit login attempts, strong password, latest PHP version, disable XML-RPC, rename your wp-login page.
  • SEO – Rank Math or SEOPress (less bloated than Yoast with more features).
  • Theme + Page Builder – GeneratePress, Oxygen, ACF, Astra + Gutenberg, Genesis Framework, or Elementor Hello Theme if you insist on Elementor. Code your header/footer in CSS. Elementor + Divi also have built-in settings for speed.
Query monitor slow plugins
Use Query Monitor to find your slowest plugins

 

3. Reduce Third-Party JavaScript

Third-party code can also load heavy JavaScript files on your site. Check your Chrome Dev Tools or PageSpeed Insights report to see third-party domains and how long they take to load.

Third-party-code-chrome-dev-tools
Find third-party domains in Chrome Dev Tools → Sources → Page
Third party usage
Find third-party domains in PageSpeed Insights
  • Maps – only load Maps on contact/local SEO pages.
  • Heatmaps – delay loading heatmap JavaScript in WP Rocket or Flying Scripts.
  • YouTube – lazy load embedded videos and replace iframe with preview image.
  • Analytics – host locally and use a smaller tracking code (analytics.js or minimal).
  • Tag Manager – avoid when possible, don’t overtrack, delay loading it’s JavaScript.
  • Advertisements – avoid if possible, reserve space to avoid layout shifts, lazy load.
  • Facebook Pixel – host FB Pixel locally using WP Rocket and delay it’s JavaScript.
  • reCAPTCHA – limit how many you’re using or use a picture of your email address.
  • Social Networks – usually from heavy social sharing plugins or embedded widgets.
  • Gravatars – use a local Avatar plugin to serve local Avatar images and delay them.

Prefetching third-party scripts can reduce DNS lookup times. You can do this in WP Rocket, Perfmatters, Pre* Party, and other speed plugins. View which third-party code is loaded on your website, grab their hostnames, and prefetch them. Here’s a list of common domains to prefetch.

Prefetch dns requests

<link rel="dns-prefetch" href="https://www.googletagmanager.com">

 

4. Remove Unused JavaScript In Elementor/Divi

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

But, page builders have gotten a bad rep since core web vitals.

Elementor and Divi (specifically) add lots of extra JavaScript to your site. Combine this with Ultimate Add-Ons and other page builders plugins, and your site can quickly become bloated.

Page builder speed test
Source: gutenberghub.com

I was previously using Elementor and did everything I could to reduce JavaScript. But I was still getting errors in Lighthouse. I decided to redesign my site (again) using Astra + Gutenberg and instantly noticed a big improvement in GTmetrix, PageSpeed Insights, and my overall load times when clicking through my blog. I usually recommend Astra Starter Templates with Gutenberg, GeneratePress, Oxygen Builder, Kadence theme, or Genesis Framework which are lightweight.

Elementor-souce-code

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

Fastest-wordpress-themes poll

Generatepress-speed

Favorite theme poll

Elementor to oxygen builder

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 this for me, but it was expensive and he’s a busy guy.

Wp johnny header footer service

 

6. Minify JavaScript

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

Minifying JS + CSS can be done cache plugins (or sometimes your theme), but it’s best to do it in your CDN since it’s closer to the end user, and disable it in your cache plugin.

Minify css javascript bunnycdn

 

7. Combine Or Don’t Combine?

Combining JavaScript isn’t always a good thing.

WP Johnny only recommends combining JavaScript on smaller websites whose CSS + JavaScript files are under 10KB. Check your GTmetrix Waterfall chart, see how big your files are, then decide whether you should combine or not. Of course, you should test your results.

Css size

 

8. Defer Or Delay Non-essential JavaScript

Social sharing, cookie consents, and other non-essential JavaScript should be deferred if it doesn’t need to load immediately. If your cache plugin doesn’t already support this, you can try the Async JavaScript plugin. Sometimes, Async JavaScript does a better job than your cache plugin and can help fix render-blocking resources. I use Async JavaScript on my own website.

Async javascript apply defer

JavaScript can be delayed until user interaction (scroll, click) using WP Rocket. Or use the Flying Scripts plugin which does the same exact thing only sets a timeout period in seconds. Perfmatters has an option to delay JavaScript if you’re already using it for the script manager.

I did this with comments (wpdiscuz and Gravatars) so my comments don’t load immediately. Since some of my articles have hundreds of comments, this made my posts load much faster.

Delay-javascript-execution
Delay JavaScript using WP Rocket, Perfmatters, or Flying Scripts

Here are common third-party scripts you can consider delaying:


addtoany
cookie-law-info
apps.elfsight.com/p/platform.js
xfbml.customerchat.js
fbevents.js 
fbq(
/busting/facebook-tracking/
/sdk.js#xfbml
feedbackcompany.com/includes/widgets/feedback-company-widget.min.js
ft.sdk.min.js
getbutton.io
adsbygoogle.js
google-analytics.com/analytics.js
ga( ' 
ga('
/gtag/js 
gtag(
/gtm.js
/gtm-
translate.google.com/translate_a/element.js
static.hotjar.com/c/hotjar-
static.leadpages.net/leadbars/current/embed.js
snap.licdn.com/li.lms-analytics/insight.min.js
livechatinc.com/tracking.js
LiveChatWidget
widget.manychat.com
olark
//a.omappapi.com/app/js/api.min.js
pinit.js
pixel-caffeine/build/frontend.js
shareaholic
ShopifyBuy
sharethis
simple-share-buttons-adder
smartsuppchat.com/loader.js
Tawk_API
widget.trustpilot.com/bootstrap
static.ads-twitter.com/uwt.js
twq(
platform.twitter.com/widgets.js
wpdiscuz

Rocket Loader can be a blessing for speed, but it can sometimes cause issues. I generally don’t recommend it (use your cache plugin to defer JavaScript instead), but it might be worth testing.

Cloudflare rocket loader
Rocket Loader can hurt or help performance (test carefully)

 

9. Remove Unused JavaScript With Asset Unloading Plugins

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

Asset CleanUp also has a pro version which lets you unload custom CSS, while Perfmatters does not. However, I use Perfmatters because the UI/UX is much easier than Asset CleanUp. Asset CleanUp has a Test Mode which lets you test disabling JavaScript without breaking your site, while Perfmatters does not. I wrote a comparison of the two – choose the one best for you.

Now it’s time to learn which scripts and plugins load across your entire WordPress site, but are only used in certain areas. This is common with contact form plugins, social sharing plugins, tables, sliders, rich snippets, comment plugins, and JavaScript in page builders like Elementor.

Step 1: Install Asset CleanUp or Perfmatters.

I prefer Perfmatters because it lets you disable plugins everywhere except pages and posts, is more user-friendly, and has an option to disable unused JavaScript on mobile.

Step 2: Enable “Test Mode” if using Asset CleanUp.

Asset cleanup test mode

Step 3: Enable the script manager if using Perfmatters.

Perfmatters-script-manager-toggle

Step 4: Disable specific JavaScript files where they don’t need to load. If you’re using Perfmatters, view any page on your site and you’ll find the “script manager” in the admin bar.

Remove contact form javascript
Disabling contact form plugin everywhere except contact page (using Asset CleanUp)
Disable plugins perfmatters
Disabling social sharing plugin everywhere but posts (using Perfmatters)
Remove elementor javascript
Disabling unused Elementor JavaScript (using Perfmatters)

 

10. Disable jQuery

Many themes and 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.

Jquery-javascript
Avoid jQuery-dependent plugins and disable files if they’re not being used

 

11. Disable Unused Plugin Modules

Many plugins are module-based and let you disable individual features you don’t use.

You can do this in JetPack, Ultimate Add-Ons, Rank Math, Yoast, and other module-based plugins. If you’re not using Rank Math’s analytics, disable it. Same concept with other modules.

Rank math modules
Module-based plugins let you disable features you don’t use

 

12. Disable Cloudflare Email Obfuscation

Cloudflare’s email obfuscation loads an extra JavaScript file.

Either you enabled it yourself, or you’re using WP Rocket and checked the “optimal settings” box for Cloudflare. Email obfuscation is supposed to prevent bots from collecting your email, but also loads a JavaScript file throughout your site which will be found in GTmetrix Waterfall.

Cloudflare email address obfuscation
Cloudflare Email Obfuscation adds email-decode.min.js to your site

 

13. Disable WooCommerce Scripts

WooCommerce loads extra scripts and styles across your site (even on non-product pages).

The easiest way to disable these is in Perfmatters. Cart fragments update the cart total without refreshing the page, but can sometimes add a few extra seconds to your load time. Choose which options you want to disable and whether speed or cart fragments are more important.

If you’re not using Perfmatters, there are quite a few solutions on GitHub or you can use the Disable WooCommerce Bloat plugin.

Disable woocommerce scripts
Use Perfmatters or the Disable WooCommerce Bloat plugin to disable WooCommerce scripts

 

14. Use A Smaller Google Analytics Tracking Code

Some Google Analytics scripts are larger than others.

Larger scripts collect more data for you to view in Google Analytics, but you may not even be using that data in the first place. If you only need basic data (page views, users, locations, devices, traffic sources, and real-time), you can use the minimal option. If you need more data in Google Analytics, you can use a large script type, but it will also slightly add to your load time.

  • analytics.js – 18.4 KB
  • minimal – 1.5 KB
  • gtag.js v4 – 51.5 KB

Perfmatters, for example, lets you choose your Google Analytics script type and whether you want to disable GA’s Display Features which prevents a second HTTP request to DoubleClick.

Perfmatters google analytics script type
Use a GA tracking code with a smaller file size (i.e. minimal.js)

 

Frequently Asked Questions

How do I remove unused JavaScript in WordPress?

View your largest JavaScript files in Chrome Dev Tools → Sources → Coverage. Chances are, it's caused by JavaScript-heavy plugins or third-party code. Optimizing them depends on which plugin or third-party code is causing errors.

How do I remove unused JavaScript in WP Rocket?

WP Rocket can help remove unused JavaScript by minifying/combining files, delaying third-party JavaScript, and loading JavaScript deferred. But unlike their remove unused CSS feature, there is not option to do this with JavaScript.

Can Autoptimize remove unused JavaScript?

Autoptimize lets you aggregate JavaScript and force it in the head, but this really only helps eliminate render-blocking resources, not remove JavaScript.

How can I remove unused JavaScript from YouTube?

Lazy loading videos/iframes, and replacing the iframe with a preview image can reduce the amount of JavaScript initially loaded from YouTube. You can also try delaying loading of videos using WP Rocket or Flying Scripts.

See Also: Ultimate WordPress Speed Guide

Cheers,
Tom

About Tom Dupuis

Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.

22 thoughts on “How To Remove Unused JavaScript In WordPress (PageSpeed Item)

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

Leave a Reply

Your email address will not be published.