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!

 

2. Avoid Page Builders

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.

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.

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

 

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

 

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.

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.

 

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”).

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.

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.

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

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

 

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.

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.

 

8. Code Your Header/Footer In CSS

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.

 

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.

 

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.

 

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.

 

12. Disable Cloudflare Email Obfuscation

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

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.

 

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.

 

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

 

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