How to Reduce Unused JavaScript in WordPress – 14 Methods You Should Test

Updated on

Do you want to reduce unused JavaScript in WordPress? If you are looking for a step-by-step guide, keep reading this article.

As the name suggests, our WordPress installation does not need unused JavaScript code/files. Most of the web pages of your website can be rendered entirely without any unwanted JS code/files. Hence, unwanted JS increases page size for no use. Moreover, some unused JS can conflict with the existing code, which makes the website’s performance too slow.

Fastest WordPress Hosting Anywhere!

So, to boost the website’s speed and save storage, you can reduce unused JavaScript in WordPress without causing any issues.

Wondering how to do it properly?

This article will discuss how to reduce unused JavaScript in WordPress and improve your website’s speed.

But before going further, let’s see how to find the largest JS files on your website which need to be optimized. 

How to Reduce Unused JavaScript in WordPress
How to Reduce Unused JavaScript in WordPress

How to Find the Largest Unused JavaScripts on Your Website

You can find the larger or unused JavaScript in WordPress through tools like

  • GTmetrix
  • Google Page Speed Insights
  • Pingdom

Below, I will show you how to monitor the JavaScript files that need optimization. For this demo, I will be using GTmetrix.

The first thing you need to do is, go to GTmetrix and analyze your website.

test your website
Test website using GTmetrix

After a few seconds, the tool will show you the test results.

gtmetrix speed result
GTmetrix speed test result

Now, go to Waterfall and choose JS.

waterfall js
GTmetrix waterfall results

There, you can see every JS file that got loaded. You will see several files if you run a website with multiple plugins, a heavy WordPress theme, and custom codes.

This way, you can track every JavaScript file in your WordPress or WooCommerce website. Now you know how to check the JS files a website uses. Next, let’s move to the main topic, where we will learn how to properly reduce unused JavaScript in WordPress.

How to Reduce Unused JavaScript in WordPress

There are several ways to reduce unused JavaScript in WordPress. In a nutshell, the most recommended methods are:

  1. Minification
  2. Combining files
  3. Removing page builders
  4. Delaying JavaScript execution
  5. Optimizing the Google Analytics code
  6. Disable WooCommerce Scripts
  7. Enable performance mode in page builder plugins
  8. Disable jQuery
  9. Limit Display Ads
  10. Avoid poorly coded plugin
  11. Disable Cloudflare email obfuscation
  12. Reduce third-party code
  13. Remove Unused JavaScript With Asset Unloading Plugins
  14. Deactivating unused plugins

Let’s review them individually and discuss how each affects the website’s performance. So you can make better decisions based on your requirement. Without any further ado, let’s get into the list.

1) Minify JavaScript Files

If you have a lot of static files like HTML, CSS, and JS in your website, minification would be an excellent way to boost your website’s speed. Minification will remove the whitespaces and unnecessary lines from the files and make them smaller in size.

There are so many plugins available to complete the task. I’m using WP Rocket on my website(s) to minify the static files. It is a popular WordPress plugin for optimizing your WordPress website or WooCommerce store.

The first thing you need to do is install and activate WP Rocket on your website. Since it is a premium plugin, you won’t be able to get it directly from the repository. You can purchase WP Rocket from here. After purchasing the plugin, upload it to your website, and install and activate it.

After activation, you can see the plugin’s settings under WordPress settings.

Under File Optimization, you can see the option for setting up modification.

file optimization minification
WP Rocket Minification settings

You need to enable it and save the changes.

That’s it! The JS files will be minified from now on, and you can expect better speed and performance. Here is a detailed guide on the topic.

This is how you can minify JS files. There are many plugins available for the task. You can pick any of them according to your preferences. You can also check our post on the best WordPress Speed Optimization plugins for free options.

This is the best method to reduce unused JavaScript in WordPress.

2) Combine JavaScript Files

The next thing you should try is combining the JavaScript files.

As usual, most WordPress caching plugins have this feature. Here is how you can use WP Rocket to combine JavaScript files.

Under the JavaScript minification option, you will see the settings for combining the JS files. You need to enable it.

combine js
Combine JavaScript files

Save the settings, and you are good to go.

Enter the file path in the box if you need to exclude specific JS files from merging. Using this feature will break your websites sometimes. If you are experiencing technical issues, I recommend turning off the feature.

NOTE: If your website uses HTTP/2 protocol, the combining JS file method won’t work correctly. So, once you have tested it, if you see an improvement in the performance, you can keep it. Otherwise, leave the option behind and move to the next step.

3) Get Rid of Page Builders (If Possible)

Page builders like Elementor, Divi, and Beaver Builder can be a great addition to a WordPress website when you need to tweak your website design or create a custom landing page.

page builder slow down a website
Page builder slows down a website

Since it adds too much unwanted JS and CSS to your site, page builders are not an ideal option for your website’s performance. If you are into optimizing the website’s speed by removing or reducing unused JavaScript files, consider eliminating page builder plugins.

Instead, you should use faster themes like GeneratePress, Astra, or Kadence and stick with the block editors plugins like GenerateBlocks, Kadence Blocks, Spectra, etc. 

If you do not need fancy features, you do not need page builders. These days, most people use FSE themes (Full Site Editing) to create a masterpiece. That won’t cause as much of a performance issue as page builders, and you can easily create custom landing pages.

You should explore FSE themes like Spectra One and Neve.

So, try to avoid page builders and stick with a minimal design. A minimal design will help you reduce unused JavaScript in WordPress.

4) Delay JavaScript Files

To delay JavaScript files, I am going to use WP Rocket. Under the JavaScript optimization section, you can see an option called delay JavaScript executions.

delay javascript
Delay JavaScript executions

Once you have enabled this option, save the settings. From now on, the JavaScript files will be loaded only after user interactions.

Delaying Third-Party JavaScript Files

If you are using third-party JavaScript files like Analytics or AdSense, follow this method to optimize the serving of those files.

Once you have enabled the delay JavaScript execution feature, you can see every possible third-party tool and service you can imagine.

third party js
third party js

You can select the service you are using or planning to use. Once you have chosen it, save the settings.

From now on, the external third-party JS files be delayed.

FlyingScripts is also a good option if you are looking for a free plugin to delay JavaScripts in WordPress. 

That’s how you can reduce unused JavaScript in WordPress properly.

5) Optimize Google Analytics Integration

When you insert the Analytics code into the website, your website will become slow. Google Analytics is an excellent service, but the JS code we add must be optimized for performance. Since the code is hosted on Google’s servers, your website will make additional HTTP requests and become slower.

To fix this problem, you can host Google Analytics locally. A lightweight plugin like Flying Analytics will do the job.

flying analytics
Flying Analytics

The plugin will help you host Google Analytics locally via any of these four methods:

  • Gtag.js v4
  • Gtag.js
  • Analytics.js
  • Minimal Analytics.js

These methods are feasible for optimizing the speed of the Analytics integration. You can choose a way according to your preferences or requirements. Hosting Analytics locally will help you reduce unused JavaScript in WordPress.

If you prefer a premium plugin that can help you with Google Analytics optimization and more speed optimization tasks, I recommend Perfmatters. It is a lightweight speed optimization plugin, and I highly recommend it.

6) Disable WooCommerc Scripts

If you use WooCommerce to run your online store, you should optimize it. WooCommerce comes with a lot of fancy features.

Perfmatters comes with a feature where you can disable WooCommerce scripts. Under the WooCommerce section, you will see it.

disable woocommerce scripts perfmatters
Disable WooCommerce Scripts

Once you have enabled it, save the settings.

What it does is when you enable this feature, the JS and CSS files will be loaded on the product, cart, and checkout page, turning off the JS files everywhere else and helping you reduce unused JavaScript in WordPress.

If you are looking for a free alternative, check out disable bloat for WordPress and WooCommerce.

7) Enable Performance Mode in Page Builders

As I mentioned earlier, page builders can slow down your website.

quora answer to page builders
Quora answer to page builders

But they can also give you a solution to optimize the performance. Most popular page builder plugins come with an option to boost performance by improving asset serving. Here’s an example of Elementor asset performance loading settings.

If you are using Elementor, here’s their configuration option.

improved asset loading
Improved asset loading

All you need to do is enable the option and save the changes.

activate improved asset loading
Activate improved asset loading

Divi also comes with a similar feature. You can find the same under General > Performance.

divi performance
Divi performance settings

So if you are using it, enable options like:

  • Dynamic module framework
  • Dynamic JavScript libraries
  • Defer jQuery and jQuery migrate
  • Enqueue jQuery-compatible script
  • Defer additional third-party script

This way, you can reduce unused JavaScript in WordPress and optimize the website’s speed.

8) Disable jQuery

jQuery can slow down your website. With the Permatters plugin, you can disable jQuery migrate option.

remove jquery
Remove jquery

Remember that some of the themes and plugins require this to function correctly. So if you encounter any error after turning off this feature, revert to the old state.

9) Limit Display Ads

Display ads such as Google AdSense and Media.net are a feasible way to make money online from your blog. But if you add too many ads on a single page, this will slow down your website.

adsense slows down website
AdSense slows down the website

Most ads will use JS files from third-party websites for proper working. You need to limit the ads you have on your website to optimize the site’s speed.

Apart from this, the process will also help you optimize the user experience. Limiting the ads on the page will reduce unused JavaScript in WordPress, making your website faster.

You can also delay ad loading by delaying ads’ JS file execution. The FlyingPress plugin offers a convenient option for JS delay; you can try that here. 

10) Avoid Poorly Coded Plugins

This is not a feasible option if you use too many plugins with poor code.

Some WordPress plugins will add a bunch of JS and CSS to the front end of the website. When someone lands on the page, the server will need to load every added CSS and JS file. This will leave a bad user experience.

You can use the Query Monitor plugin to monitor the plugins affecting the performance. This way, you can identify the plugins causing problems and eliminate them.

Ensure you do not leave the plugin activated after you finish your optimization. This plugin itself uses a lot of resources for monitoring. Please deactivate the plugin after you are done. 

11) Disable Cloudflare Email Obfuscation

Cloudflare has an email obfuscation feature to protect your email address from spambots. If you have enabled this feature, Cloudflare will add a tiny JS file to your WordPress/WooCommerce installation.

This can affect overall performance. Under the Scrape Shield, you can see the email obfuscation settings. By default, it will be enabled.

Email Obfuscation
Email Obfuscation

You can deactivate it and save the settings. This will reduce unused JavaScript in WordPress and help you optimize the website a little more.

12) Reduce Third-Party Code

Adding custom snippets to the website will help you enhance the features without using a dedicated plugin. In terms of speed and performance, it is a bad practice. You can use the inspect element tool tab to see all the third-party code used in your website.

third party codes
third party codes

If you can get rid of them, that will be a great decision. On the other hand, if your goal is to optimize them, host the files locally, prefetch the domains, and so on.

This is one of the best and simlpe ways to reduce unused JavaScript in WordPress.

13) Remove Unused JavaScript With Asset Unloading Plugins

To reduce unused JavaScript from WordPress, use an asset-unloading plugin. We will use the Permatters plugin’s asset unloading feature to clean the website.

The first thing you should do is enable the Script Manager feature in Perfmatters settings.

enable script manager
Enable Perfmatters script manager

Sometimes, enabling the Script Manager can break your website. To prevent this from happening, enable testing mode.

enable testing mode
Enable testing mode

Next, check how your website is doing. We can disable the testing mode and start configuring the plugin if everything is good.

The next thing you need to do is open the Script Manager settings.

script manager
Script manager

There, you will see all the scripts loading on your website. There will be CSS files and also JS files.

You can start disabling the scripts from there. For example, if you use a social media sharing plugin, you only need to display them on posts (and pages sometimes).

Hence, disabling the JS everywhere else will help you optimize the website.

Here’s how you can do that. First, you need to mention which JS files to disable. Next, choose the location you need the file to be loaded.

social snap JS
Social snap JS

Finally, save the settings. You can do this with every plugin and theme on the website.

It will take a while to complete the process, but at the end of the day, you can quickly reduce unused JavaScript in WordPress efficiently.

If you want a free tool to do the same, I recommend Asset CleanUp.

14) Deactivate Unused Plugins

WordPress plugins are the easiest way to enhance a WordPress website’s features or WooCommerce store. You can use them for almost every task you can imagine.

But, I will recommend using only a few plugins. It can slow down your website and could be a better practice. I highly recommend the coding method if you can use a few lines of code instead of relying on a dedicated plugin.

Disabled wordpress plugins
Disabled WordPress plugins

However, since the plugin comes with JS files, keeping the unused plugins would be a terrible idea. So, there is no problem deactivating the ones you do not need.

For example, if you feel comfortable with the Gutenberg editor, you can eliminate the Classic Editor plugin. Similarly, if your web hosting company has an in-built caching plugin, you do not need to use third-party caching plugins like WP Super Cache, WP Fastest Cache, or WP Rocket.

You can deactivate the plugins one by one.

deactivate akismet
Deactivate Akismet

On the other hand, if you have multiple plugins you do not need, mark them and choose the Deactivate option from the dropdown.

deactivate bulk
Deactivate plugins in bulk

There is no point in keeping the deactivated plugin files. So, choose the delete option to remove the plugin files from the WordPress installation. This way, you can reduce unused JavaScript in WordPress.

delete akismet
Delete Akismet

This way, you can reduce the number of plugins active on your website and optimize the speed.

Frequently Asked Questions

Next, let’s look at some of the frequently asked questions regarding the topic.

What are Unused JavaScripts and Why Remove Them?

Unused JavaSvript files are JS files that your website does not need to use for rendering any element of the site. As the name says, they can be avoided to optimize the website’s or WooCommerce store’s performance.

How to Check for Unused JavaScript

You can check the js files and their effect on the loading speed using any of the tools like GTmetrix, Page Speed Insights, and so on.

Do You Need to Know Coding to Remove Unused JavaScript?

Absolutely no. You can reduce unused JavaScript in WordPress without touching a single line of code. You can use dedicated speed optimization plugins for the task.

How to Remove Unused JavaScript from WordPress

There are several ways to remove unused JavaScript from WordPress. Some of the popular ones are delaying JS, combining them, minifying them, disabling WooCommerce scripts, and so on. We have covered all the methods in our article at technumero.com

Conclusion

When you run a WordPress website or WooCommerce store, optimizing it for the best performance is crucial. As I mentioned, since Google is also considering website speed as a ranking factor, you should ensure your website is faster.

A WordPress caching and image compression plugin will do the job quickly. But, if you still need to get the best performance rates for your website, you should reduce unused JavaScript in WordPress.

Each method is simple and efficient. You do not need to use any coding to do these tasks. Usually, a plugin like WP Rocket or Perfmatters will help you with multiple optimizations.

Which method are you going to try to reduce unused JavaScript in WordPress?

Or do you know any other methods?

Let me know in the comments.

Photo of author
Shashank Singh
Shashank is a web addict and amateur blogger. His current interests include blogging, SEO, and WordPress. See his social profiles to know him even better.
Disclaimer: Affiliate links of some product(s) are being used on this page, if you follow the link and make a purchase, we may receive compensation from respective companies. This compensation comes at no additional cost to you.

Leave a Comment

Your email address and website details will not be published. Required fields are marked with *.