Check how much code was used versus loadedBlog

The Coverage function allows us to check how much code has been used versus loaded.

post-thumb

ON Feb 28, 2021

The Coverage feature found in Chrome Webmaster Tools allows us to see which code was used in relation to the one downloaded by the browser.

The list shows each downloaded file, its type, size, and most importantly, the percentage of unused code. On the visualization bar, the unused code is marked in red, while the one that has been launched is marked in green.

By double-clicking a specific file, we go to its code, where we get an overview of which lines have actually been called.

While most JavaScript code usually starts reactively, not when the page is launched, in the case of CSS code it may happen that we unnecessarily load all styles. The tool especially highlights the situations when the website has many external libraries and scripts, the functionalities of which have been used very selectively.

Subscribe
to our newsletter