How To Remove Unused JavaScript In WordPress

When testing your site in GTmetrix and Litehouse, you may come across an error to remove unused JavaScript.

In WordPress, you can remove unused JavaScript, CSS, and plugins using Asset CleanUp or Perfmatters. JavaScript can also be loaded by third-party code.

The first thing to do is check the source of where the JavaScript is being loaded (in GTmetrix Waterfall) so you can narrow down whether it’s from your site or a third-party source. For third-parties, try hosting files locally, delay loading them, or use browser hints like prefetch.

Most often however, most WordPress sites that need to remove JavaScript (including my own) use heavy page builders like Elementor or Divi. After trying everything in the book, I’m planning on moving from Elemetor to Oxygen Builder. Genesis Framework is also lightweight, but I recommend viewing your source code to see how many times your page builder shows up.

1. View Your JavaScript In GTmetrix Waterfall

Open your GTmetrix Waterfall chart and view the JavaScript tab. Look at each JavaScript file as well as it’s source and load time.

Is it jQuery?
Is it third-party services?
Is it your theme’s JavaScript files?

This should help you narrow down where your heaviest JavaScript files are. From my experience, most heavy JavaScript files come from page builders, third-party code (e.g. advertisements), and plugins. The next steps will help you reduce JavaScript in WordPress.

2. Remove Unused JavaScript Files With Asset CleanUp

Asset CleanUp and Perfmatters both let you disable unused JavaScript.

If scripts or plugins are loading across your site but only need to load on certain pages, you can disable them everywhere else.

This is common with contact form plugins, social sharing, tables, slider, rich snippet, comment plugin, and JavaScript in page builders like Elementor. Asset CleanUp has a Test Mode which lets you test disabling JavaScript without breaking your website, while Perfmatters does not.

Step 1: Install Asset CleanUp Or Perfmatters

I prefer Perfmatters over Asset CleanUp because it lets you disable plugins everywhere except pages and posts, while Asset CleanUp only lets you disable plugins everywhere except pages. Perfmatters is also known for being more user-friendly.

Step 2: Enable Test Mode If Using Asset CleanUp

Step 3: Review JavaScript Loading On Your Site

Step 4: Disable JavaScript Where It Doesn’t Need To Load

3. Use A Lightweight Page Builder (Or None)

If you have still remove JavaScript errors in WordPress, it’s probably because you’re using a heavy page builder.

Elementor, Divi, and Beaver Builder add lots of JavaScript to your site. Combine this with Ultimate Add-Ons and other plugins for page builders, your site can quickly become bloated.

I would know… I’m using Elementor and did everything I can to reduce JavaScript. But it’s not enough and I’m still getting errorsin Lighthouse. I decided to redesign my site (again) using Oxygen Builder. Genesis Framework is also very lightweight – I recommend one of those two.

Check your source code and see how many time your page builder shows up.

4. Minify And Combine JavaScript Files

Minifying JavaSciprt removes unnecessary characters from the code, while combining them merges multiple JavaScript files into one single file (reducing the number of HTTP requests).

These can usually be done in your cache plugin.

Minifying JavaScript can be done in most cache plugins and is as easy as enabling the setting. On occasion, minification can break your site in which you would need to find the problematic files in your source code, then exclude them from JavaScript minfication in your cache plugin.

5. Reduce JavaScript From Third Parties

Third-party code can also load heavy JavaScript files on your site.

Lazy loading advertisements (e.g. AdSense) and establishing earlier connections using preconnect and prefetch can significantly improve your page’s initial load time. Check your third-party code in PageSpeed Insights and try to limit it, or at least optimize it. Social sharing buttons and embedded YouTube videos (and social widgets) are also types of third-party code.

Common Third-Party JavaScript And How To Optimize It

Maps – only load Maps on contact/local pages.
Heatmaps – delay loading heatmap JavaScript in WP Rocket or Flying Scripts.
YouTube – lazy loading embedded videos and replace iframe with preview image.
Fonts – limit fonts, weights, icons, host them locally, and trying preloading them.
Analytics – host locally and use a smaller tracking code size (analytics.js or minimal).
Tag Manager – avoid when possible, don’t overtrack, delay loading it’s JavaScript.
Advertisements – avoid when possible, limits number of ad spaces, lazy load them.
Facebook Pixel – host locally using the WP Rocket’s Facebook Pixel add-on setting.
Social Networks – usually from heavy social sharing plugins or embedded widgets.
Gravatars – use WP User Avatar plugin to host locally and delay Gravatar JavaScript.

Prefetching third-party scripts can help reduce their load times. You can do this in WP Rocket, Perfmatters, and many other speed plugins. View which third-party code is loaded on your site, grab their hostnames, and prefetch them. Luke has a great list of common domains to prefetch.

6. Defer JavaScript Loading Of Non-Essentials

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. Simply grab the JavaScript file that should be deferred and paste it into the Async JavaScript plugin. If you prefer to defer JavaScript manually, you can use the following code from Varvy.

7. Delay Loading Non-Critical JavaScript

JavaScript can be delayed until user interaction (scroll, click) using WP Rocket, or the Flying Scripts plugin does the same thing only sets a timeout period.

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 make my posts load much faster.

In some cases, deferring JavaScript may be enough. But if you have JavaScript that can be delayed, I suggest trying this out.

WP Rocket, Perfmatters, and Flying Scripts all let you delay JavaScript.

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

9. Disable jQuery

Many themes and plugins use jQuery, so be careful when testing this.

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.

10. Disable Unused Modules In Plugins

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 analysis, don’t enable it. Same with other modules.

11. Disable Email Obfuscation From Cloudflare

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.

12. Disable WooCommerce Scripts On Unneeded Pages

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.

13. Avoid Multiple reCAPTCHAs

Captchas also create extra JavaScript files, so limit how many you’re using. If you have a problem getting spam from bots, trying putting an image of your email address instead of text.

14. Test Rocket Loader In Cloudflare

Cloudflare’s Rocket Loader can go both ways IMO.

Rocket Loader can be a blessing for speed, but it can sometimes cause issues. Either way, I suggest trying it out. This will defer the loading of all of your JavaScript until after rendering.

If your visitors are local, you may not want to use a CDN at all and choose a host with a data center close to your visitor’s location. Otherwise, CDNs can often do more harm than good.

15. Avoid Slow Plugins With Heavy JavaScript

JavaScript is often created by plugins.

Review this list of slowing loading plugins or use Query Monitor to find your slowest plugins.

Even if some plugins don’t appear in your GTmetrix Waterfall report, that doesn’t mean they’re not slowing down your site. For example, plugins that collect ongoing data (backups, statistics, broken link checker) can slow down your site even though they’re not running on the frontend.

I hope this helped! Leave a comment if you have questions.

Cheers,
Tom

Keep reading the article at Tom Dupuis. The article was originally written by Tom Dupuis on 2020-12-24 16:25:58.

The article was hand-picked and curated for you by the Editorial Team of WP Archives.