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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Instagram