In this article, you will learn how to remove unused JavaScript from your site, which will help to speed up its loading time. The issue is that a significant portion of JavaScript code is not utilised on the page and slows it down unnecessarily, as the more code on a page, the longer it takes to load. And nobody likes a slow-running website. Therefore, it is crucial to be able to locate and remove unnecessary JavaScript from your website.
What is JavaScript?
JavaScript is a programming language that allows, among other things, for the creation of dynamically updated content and the management of multimedia, and much, much more. It’s incredible how many effects can be achieved with just a few lines of JavaScript code.
Through the Document Object Model (DOM) API, JavaScript is also used to dynamically edit HTML and CSS code to refresh content on web pages. When creating a page, remember that the website’s code typically loads and executes in the order it appears on the page. So, if JavaScript that uses HTML code is loaded and run before the HTML it needs has loaded, errors may occur on the page.
What is Unused JavaScript?
Unused JavaScript refers to resources that are not used or required for rendering and displaying the site’s content.
Despite this code not being used, the user’s browser still has to load it into memory. There is no benefit from this; it only slows down the page loading and burdens the user’s computer memory.
Why is it Worth Removing Unused JavaScript?
Loading unnecessary JavaScript can have a significant negative impact on site performance and the overall user experience. The “First Contentful Paint” (FCP) parameter, one of the main indicators in Google PageSpeed Insights that assesses user experience, is heavily influenced by JavaScript code.
Types of Unnecessary JavaScript Code
Let’s divide unused JavaScript code into two categories:
- Non-critical JavaScript: This is used elsewhere on the site but does not need to be loaded first and block the loading of other site elements. Such code blocking the site’s loading worsens our FCP parameter.
- Dead JavaScript: This is not used at all on the page and can be safely removed.
Disadvantages of Loading Unused JavaScript Code
Unused JavaScript has a negative impact on website performance and delays page loading. Our site’s position in Google search results depends, among other things, on its speed. This is one of the key parameters. Furthermore, the likelihood that users will leave our website and visit another increases if our site runs slowly. This affects the bounce rate, which is extremely important for SEO and causes Google to lower our site’s search rankings.
It is important to distinguish between two different things: the actual loading time of the site is not the same as how users perceive its loading time. The most important thing for the user is to see the first elements at the top of the page as quickly as possible and for them to be responsive. The rest of the page elements below can load later; it is important that the user sees a blank page for the shortest possible time.
Advantages of Removing Unused JavaScript Code
It is obvious that the more JavaScript, HTML, or CSS the browser has to download and execute, the longer the page takes to load. It doesn’t matter whether the JavaScript code is needed or not; if it is on the page, the browser will always download and run it.
This is especially important for mobile users on smartphones. Not only does unnecessary code use up our data allowance, but mobile devices are also not as powerful as desktop computers. To speed up your site’s loading, you should be able to find and remove unused JavaScript, or at least make it load later so it doesn’t block the initial stages of page loading.
How to Reduce the Amount of Unused JavaScript?
First, we will try to find large JavaScript files using GTMetrix, and then I will show you ways to remove the unwanted code.
Use GTMetrix to Find Large JavaScript Files
Go to the GTMetrix website and enter your website address in the appropriate field.
Click on the Waterfall tab.
Below, click on the JS tab, and you will see the JavaScript files. Click on Size to sort them from largest to smallest.
JavaScript Minification
JavaScript minification involves removing unnecessary code from the script.
NOTE: Improper code minification can damage your site. Before using this guide, be sure to make a full backup of your entire site, including the database.
Removing Unnecessary JavaScript Code with the LiteSpeed Cache Plugin.
If your site runs on a LiteSpeed or OpenLiteSpeed web server, you can use the LiteSpeed Cache plugin to minify JavaScript code. If you also use the CyberPanel, this plugin is installed by default.
- Go to your WordPress Dashboard and click on LiteSpeed Cache.
- Click on Page Optimization.
- Click on JS Settings at the top, and then enable JS Minify.
- Click Save Changes.
Removing Unwanted JavaScript Code in Elementor
If you use the Elementor plugin, you can remove unwanted JavaScript code with it.
- Go to the WordPress Dashboard, click on Elementor on the left, and then on Settings.
- Click the Experiments tab at the top.
- Scroll down to the Stable Features section and enable the Improved Asset Loading option.
- Go to the very bottom of the page and click Save Changes.
Delaying the Loading of Necessary but Non-Critical JavaScript with Async JavaScript
- Go to your WordPress Dashboard and install the Async JavaScript plugin if you don’t have it.
- Click on Settings, then Async JavaScript.
- Click on the Settings tab at the top, then click the Apply Defer button.
- Go to the very bottom of the page and click Save Settings.
Removing Unused Code with the Asset CleanUp Plugin
When certain files or plugins do not need to be loaded on a specific subpage of our site, we can disable them using the Asset CleanUp: Page Speed Booster plugin. This plugin is a powerful tool, but in inexperienced hands, it can cause damage to our site. Remember to make a backup of your site before editing it.
- Install Asset CleanUp if you do not already have this plugin.
- Go to the WordPress Dashboard, then click on Asset CleanUp and Settings on the left.
- Click the Test Mode tab on the left and enable the Test Mode function. This is a very useful feature. When enabled, only logged-in administrators will see the changes made. If it turns out during testing that our site is not working correctly, only administrators will see it, and the pages will still work correctly for normal users of our site. Only after making sure that everything is working correctly can we disable the Test Mode, and from then on, the site will load faster without the unnecessary JavaScript code.
- After making changes, scroll down the page and click Update All Settings.
- On the left, click the Optimize JavaScript tab.
- Enable the option Combine loaded JS (JavaScript) into fewer files.
- Scroll to the bottom of the page and click Update All Settings to save the settings.
Summary
Loading unnecessary JavaScript code makes a site load more slowly because the user’s browser has to download, parse, compile, and execute it needlessly. Unused code consumes mobile data allowance and slows down page rendering. All of this worsens the user experience and lowers our site’s ranking in Google search results.
By minifying JavaScript and removing unnecessary code, you will speed up your site’s loading time and improve its overall functionality.