The Coverage panel points out every line of JavaScript and CSS that sits unused on your page and slows it down. When your site takes a long time to load, extra code you do not need often causes much of the delay.
Why unused code slows your site
Many web developers (and tinkerers who have been “learning as we go” for 10 years) add a large framework such as Bootstrap because it looks good and saves time. You grab one button style from Bootstrap and import the entire library when you needed one component. The browser then carries all the CSS for modals, navbars, carousels, and every other component you do not use.
...
<head>
...
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
...
</head>
...That is like paying for an all-you-can-eat buffet when you only want fries.
Unused code causes two problems:
- Slower page loads. The extra code delays the browser while it downloads and processes your files.
- Mobile data drain. If someone loads your site on 4G, the unused code uses part of their data plan.
What the Coverage panel does
The Coverage panel in Chrome DevTools reports how much of your CSS and JavaScript runs and how much sits unused, using up bytes and contributing nothing.
The panel shows total file size, the number of bytes used, and the number of bytes wasted. It also color-codes the results: red for unused code and gray for used code.
How to open the Coverage panel
Follow these steps:
- Open DevTools. Right-click and select Inspect, or press
Ctrl + Shift + I. - Open the Command Menu (
Ctrl + Shift + P). - Type “coverage” and select Show Coverage.
- Press Enter to open the Coverage panel.
To use menus instead, click the three dots in the corner of DevTools, go to More Tools, and select Coverage from the list.
Recording coverage
Recording is the core of the workflow.
At the top of the Coverage panel, a drop-down sets your “coverage scope.” You can track code per function or per block. The choice matters little for a first look, and it matters more as your analysis gets more detailed.
Click the reload button. Chrome reloads your page and records which code gets used while the page loads and while you interact with it.
When you finish, click the stop button, and Chrome shows the results. The numbers can be alarming at first, like cholesterol results, but they are useful if you plan to fix something.
Reading the report
The report is a table with these columns:
- URL: where the code lives.
- Type: CSS or JavaScript.
- Total Bytes: the size of the file.
- Unused Bytes: how much of the file goes unused.
- Usage visualization: a bar that shows unused code in red and used code in gray.
Click any row to see a line-by-line breakdown in the Sources panel. Unused lines are marked red, like a teacher’s red pen, except you grade yourself.
You can filter by URL, show only CSS or JavaScript, or include Chrome extension scripts to see everything that loads.
The Export coverage button downloads your report so you can review it in a spreadsheet.
A word of caution
Finding unused code is easy. Cleaning it up is harder. As with cleaning a garage, knowing what is junk is simple, but deciding what you might need someday is difficult.
Refactoring your codebase so each page loads only what it needs depends on how your site is built. Some frameworks make this simple. Others make it hard.
The Coverage panel does not fix a slow site on its own. It shows you where your code is wasteful so you can tighten it. When you remove unused code, your pages load faster, your users have a better experience, and your mobile visitors use less data.
Go clean up that CSS.
I took this information from Google’s documentation about Coverage in the Chrome DevTools. For a complete breakdown of how Chrome’s embedding system works, read my article on how to optimize content for Chrome’s AI.