To reduce page size (also reduces data usage for your mobile users) and improve loading speed it is best to minify JS and CSS files. Fortunately, many developers already do this when possible.
However, minifying these files makes it more difficult to see what exactly is happening in such files. Finding unused JS for example is a lot more difficult in a file that has been minified.
In order to more easily see what is going on in a file and come up with proper recommendatios, I always unminify files. I did this in way too many steps before, I'll spare you the details of this.
Chrome DevTools Coverage panel for unused JS and CSS
So, the Chromium DevTools offers thissolution. You can reach it in the following way:
- Open Chrome DevTools
- Control + Shift + I
- or Command + Alt + I on Mac
- Open the Command Menu
- Control + Shif t +P
- or Command + Shift + P on Mac
- Type + click the following: "Show Coverage"
- Click the reload button to reload the page and to see which code is loaded
- Then double click on the JS or CSS file that you want to unminify.
- The file gets opened in a new pane, unminified, even if the original file is minified by the developer, build proces or CDN.
Detailed steps for viewing unused JS and CSS
I am always using the shortkeys, but you can also use the steps shown in the image below.
Once you got DevTools opened up, for example using right click within the window and picking "Inspect element", go to Customize and control DevTools [1.] in the top right.
Within the context menu, pick "More Tools" and then "Coverage" [2.]. Then click the reload button within the Coverage panel, identified by "Start instrumenting coverage and reload page" when using a screenreader. A table with CSS and JS files will be filled, with the following columns:
- URL, showing the urls of the resources;
- Type, indicating if the file is a JS or CSS file;
- Total bytes of the file;
- Unused bytes;
- Usage Visualization, to also get a grasp of the relative usage.
You can then double click on any file listed [3.], to see the unminified version and start determining what could be removed.
What are the benefits of Chrome DevTools Coverage?
Using this method has a number of advantages. First, it makes it considerably easier to read the files as a developer. Additionally, the Coverage function indicates which parts of the code in the files are not used. The image above clearly shows that the Google Developers environment itself parses quite a bit of unused JS.
You might recognize the following recommendation which could be seen when running a test in Lighthouse or PageSpeed Insights:
I made a screenshot of Google PageSpeed Insights analyzing the developers.google.com environment because, well.. I like the irony ;)
Finally, when using the Coverage tab in order to determine and fix unused bytes, the tool clearly indicates which file contains the most unused code via the "Usage Visualization" column. This makes it easy to see the (not always quick) wins of a page when it comes to removing unused code.
Why removing is JS important
You were able to determine the bottlenecks, but are wondering how to properly address this issue for once and for all? You're not the first, just get in touch or let me perform a pagespeed and JavaScipt performance audit on your site or shop.