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

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.

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

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

Now, go to Waterfall and choose JS.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.

Sometimes, enabling the Script Manager can break your website. To prevent this from happening, 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.

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.

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.

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.

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

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.

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.

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.