Wondering how to do it properly?
But before going further, let’s see how to find the largest JS files on your website which need to be optimized.
- Google Page Speed Insights
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.
- Combining files
- Removing page builders
- Optimizing the Google Analytics code
- Disable WooCommerce Scripts
- Enable performance mode in page builder plugins
- Disable jQuery
- Limit Display Ads
- Avoid poorly coded plugin
- Disable Cloudflare email obfuscation
- Reduce third-party code
- 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.
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.
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)
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.
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.
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
- Minimal Analytics.js
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Or do you know any other methods?
Let me know in the comments.