How to Remove Unused JavaScript

website structure shown with 3 boxes of varying sizes on a screen

From videos to interactive graphics, JavaScript makes web pages interesting. But too much JavaScript can slow a site down. Learning how to remove unused JavaScript could immediately speed your site up. 

JavaScript is a lot like jet fuel. The script is what makes the website work. But more JavaScript or fuel doesn’t always help. Before takeoff, pilots and airline teams determine the right amount of fuel for the upcoming trip. They only fill the plane with that exact amount of fuel plus an extra safety margin. If they filled the entire fuel tank, the extra fuel would add excess weight and slow the plane down. When you load JavaScript on a page for features you’ll never use, you weigh down the page and cause the site to load painfully slow

In this post on how to remove unused JavaScript, we will:

  • Answer basic questions about JavaScript
  • Show you how to identify unused JavaScript
  • Provide options for removing unused JavaScript

What is JavaScript?

Web developers use JavaScript’s text-based programming language to create interactive elements on web pages. Websites contain three components: HTML, CSS, and JavaScript. HTML and CSS give pages their structure and style. JavaScript adds behavior to the page.  

Examples of JavaScript functions on a website include:

  • Embedding audio or video
  • Zoom functions on images
  • Slideshows
  • Showing or hiding information such as tabs or accordions
  • Dynamically modifying content or styles
  • Dropdown navigation
  • Validations on forms

How to Identify Unused JavaScript

If you’re reading this blog on Google Chrome, you have all the tools you need to identify unused JavaScript. Here’s how.

1. Open Developer Tools in Google Chrome

Go to your website. Click on the more options menu. It’s the three dots. Technically it’s called a “kebab menu,” but you’re probably more familiar with its cousin, the “hamburger menu.” 

A screenshot of illustrating how to open developer tools

2. Open the Coverage Tab

Click on the three-dot menu in the Developer Tools section. Select “Run command.” Start typing coverage in the prompt box and select “Show coverage” from the dropdown.  

Screenshot of while looking at the code

3. Analyze Code Coverage

In the coverage tab, click the reload button to begin the analysis. If you don’t see the reload button, you might need to resize the coverage tab by pulling it up. 

Screenshot of code coverage

4. Review Your Results

The results show the different resources used to load the page and the percentage of unused code in each of them. This tool will identify unused CSS as well as JavaScript. 

results of code after javascript is removed

What Causes Unused JavaScript

In our example, you can quickly spot a pattern in the sources of unused JavaScript. WordPress plugins caused the majority of the extraneous code. Plugins add a ton of functionality to a website. But, most sites don’t use every feature of their installed plugins. 

For example, suppose you added a plugin to build a slider. You wanted a way to show a slideshow gallery of images on a landing page. But the plugin can do so much more. The plugin has options for creating sliders based on posts or including captions on your images. You can also pick different transitions. Do you want images to slide in or fade out? You installed a plugin for one use case, but it loads the JavaScript for every possible combination. 

Why is Unused JavaScript a Problem?

In our post on rendering-blocking resources, we go into more detail about how JavaScript and CSS can slow down your site. JavaScript can impact a web page’s content, layout, and behavior, so a browser will download and parse all the JavaScript before rendering a page. If you have too much JavaScript, visitors could stare at a blank white screen for a few seconds before any images or content load. 

Back to our slider example. You wanted a slideshow for one page, but the plugin loads the JavaScript for every slider configuration on every page. The browser wastes time downloading and parsing JavaScript it doesn’t need to display the page. 

How to Remove Unused JavaScript 

So now that we know how to identify unused JavaScript and why it’s a problem, how do we get rid of it? Obviously, you can edit your site’s code to delete the unused script. But, you might want to try some less technical options first. 

Options for removing unused JavaScript include:

  • Removing Unused Plugins. Since plugins contribute a large share of unused code on a site, begin by uninstalling and deleting any plugins you’re not using. 
  • Using Lighter Plugins. For any plugins essential to your site, can you replace them with a lighter option? If you want a slider, can you find a plugin with more limited options tailored to your needs?
  • Installing an Optimization Plugin. Optimization plugins like WP-Rocket won’t remove unused JavaScript, but will include options to minify, combine, or delay loading scripts which could have similar speed-boosting impacts.  
  • Editing Your Site’s Code. You also could remove all the unused JavaScript from your site’s code, but this option requires considerable time and technical expertise. 

How Mindsize Can Help 

The Mindsize team excels at optimizing websites for speed and scalability. As your business grows, we make sure your website runs as fast as possible and can handle any spike in traffic. Excessive unused JavaScript weighs heavily on your site’s performance and could cause issues with scaling. Our experts can analyze your site and make recommendations for optimizing your JavaScript, CSS, and plugins for optimal performance. Contact us today to learn more.