How to use the Coverage tool to find unused CSS and JS code?

During the development of large web applications, projects often accumulate a large amount of redundant code, including unused styles and scripts. This leads to increased page loading times and reduced overall performance. The Coverage panel in the developer tools is created specifically to analyze real code usage and show what part of it is actually executed by the browser.

To run this analysis, open the command menu using the keyboard shortcut, type the word Coverage, and select the corresponding tool. A new control panel with a record button shaped like a round red dot will appear at the bottom of the screen. Click it, and then reload the page or run the application use case to gather statistics on the loaded resources.

After stopping the recording, you will see a list of all style and script files indicating the percentage of used code. The green color of the bar shows the volume of actually executed instructions, while the red color indicates dead code that was loaded into the browser but never ended up being useful to the user. You can click on any file to open it and see detailed line highlighting, separated by the degree of necessity.

This tool is especially useful when auditing third-party libraries or refactoring old projects. Removing or lazily loading unused components identified using Coverage allows you to significantly reduce bundle sizes. As a result, initial page rendering speeds up and key performance metrics for search engines improve.