Web optimization: removing dead code with the Chrome Coverage tab

The modern web is becoming increasingly heavy. Sites load massive files. Yet, a large part of this code is never used. Developers often use complete libraries. They only use a small fraction of the functions. This surplus of data slows down navigation. It consumes battery on mobile. It wastes bandwidth.

Google Chrome offers a very powerful integrated tool. It is called the Coverage tab. This tool analyzes your code as you browse. It shows what is executed. Most importantly, it shows what remains inactive. Removing this dead code is a priority for performance. It is essential for improving your Core Web Vitals.

#Why is dead code dangerous?

Every byte sent has a technical cost. The browser follows a strict process to display a page.

The impact on CSS rendering

CSS blocks the page display. The browser must read the entire file before drawing. If your file is 200 KB but only 10 KB are useful, you are wasting time. The user sees a white screen. This increases the LCP (Largest Contentful Paint) score. A fast site retains its visitors better.

The cost of JavaScript

JavaScript is very expensive for the processor. The browser must download the file. Then, it must decompress it. Then, it must parse and compile it. This work uses a lot of resources. On an old smartphone, this creates stutters. The Coverage tool helps you reduce the TBT (Total Blocking Time).

#How to open the Coverage tab?

The tool is hidden in Chrome’s advanced options. Here are the steps to access it:

1. Open your website in Chrome.
2. Open the developer tools with the F12 key.
3. Press Ctrl + Shift + P (or Cmd + Shift + P on Mac).
4. A search bar appears.
5. Type the word “Coverage”.
6. Select the “Show Coverage” option.

A new panel opens at the bottom of your window. To start the analysis, click the reload button. It is the icon with a circular arrow. The page will refresh. The tool will then record every line of code used.

#Understanding data visualization

The Coverage tab presents a complete table. Each row corresponds to a loaded file.

• URL: The name and address of the file. This includes your scripts and styles.
• Type: Indicates whether it is JS or CSS.
• Total Bytes: The total weight of the file.
• Unused Bytes: The amount of code that was not used.
• Usage Visualization: A very useful horizontal bar.

Analyzing colors

In this tool, the colors are simple to understand. The red bar represents code that has never been executed. The grey bar represents useful code.

If you see a bar that is almost entirely red, the file is a problem. In the image above, some files show 100% unused code. This is a total loss of efficiency. This often happens with icon fonts or old tracking scripts.

#Detailed analysis in sources

Click on a row in the table. The file opens in the Sources tab. Look to the left of the line numbers. Color strips appear.

• A grey strip means the line was read by the browser.
• A red strip means the line is ignored.

#The human factor: interaction

The Coverage tool is a live recorder. It cannot guess the future. When the page loads, everything related to dropdown menus or pop-ups will be red. This is normal. The code has not been used yet.

To obtain a reliable report:

1. Start the recording.
2. Browse your entire page.
3. Click on all the buttons.
4. Open the menus.
5. Scroll to the footer.

You will see the red bars turn grey in real time. The code you really need reveals itself little by little.

#How to eliminate unnecessary code?

Once the diagnosis is complete, you must act. Here are three methods to clean your project.

1. Manual removal

This is the simplest method for CSS. If the tool shows that entire styles are red across the whole site, delete them. It is often old, forgotten code.

2. Code splitting

Do not load the code for your “Contact” page on your “Home” page. Split your scripts into small pieces. Only load them when necessary. This is very easy to do with modern frameworks.

Here is an example of conditional loading in JavaScript:

Copyconst feedbackBtn = document.querySelector('.js-feedback');

if (feedbackBtn)
{
  import('./modules/feedback.js').then(module =>
  {
    module.init();
  });
}

3. Tree Shaking

This is an automatic technique. It removes dead code during the site’s creation. For this, use tools like Vite or Webpack. They analyze your code and remove what is not called.

Copy// We only import what is useful
import {computeTotal} from './math-library.js';

const result = computeTotal(10, 20);
console.log(result);

// The multiply() function in math-library.js will remain unused
// It will not be included in the final file

#Browser extensions and the Coverage tab

The image of the Coverage tab often shows lines starting with chrome-extension://. This is not your site’s code. These are the scripts from your own extensions (like uBlock or LastPass).

Warning: Do not confuse these files with your own assets. Focus only on files that start with http:// or https:// with your domain name. Extensions consume a lot of resources. They can distort your performance tests. Always test your site in Incognito mode to avoid this.

#Benefits for SEO and indexing

A light site ranks better on Google. The search engine analyzes speed. If your JS files are too heavy, the Google bot will spend less time indexing your pages. This is called the crawl budget.

By reducing dead code:

• The site loads faster.
• User experience improves.
• Bounce rate decreases.
• Your Lighthouse score increases.

#Conclusion

The Coverage tab is a vital diagnostic tool. It allows you to see the invisible. In a few clicks, you identify the culprits of slowness. Cleaning your code is a mark of respect for the user.

Start today. Open your tools. Launch an analysis. Every red line removed makes the web faster and greener.

Frequently Asked Questions

Lionel Péramo

Web Performance & Eco-design Expert

Full Stack Developer and creator of the OTRA framework (PHP) and EcoComposer library. I write to make the web faster and more inclusive.

About me →