A Lifehack for removing unused JS/CSS.. or just unminify

.. 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.

Unminify JavaScript and CSS in your browser

In order to more easily see what is going on in a file and come up with proper recommendations, I always unminify files. Before, I did this in way too many steps, I'll spare you the details of this and just jump to a better solution.

Because, when using Chrome's solution for determining unused JavaScript and CSS, you basically get this feature out of the box!

Chrome DevTools Coverage panel for unused JS and CSS

The Chromium DevTools offers this solution. You can find it via the following steps:

1. Open Chrome DevTools
   • Control + Shift + I
   • or Command + Alt + I on Mac
2. Open the Command Menu
   • Control + Shif t +P
   • or Command + Shift + P on Mac
3. Type + click the following: "Show Coverage"
4. Click the reload button to reload the page and to see which code is loaded
5. 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.
A faster alternative to unminify JS and CSS code can be found at devtoolstips.org.

Unused CSS/JS 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.

Lighthouse: Remove unused JavaScript

You might recognize the following recommendation which could be seen when running a test in Lighthouse or PageSpeed Insights:

The screenshot says: "Remove unused javascript to reduce bytes consumed by network activity". To get this message, 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

JS will block the main thread of the browser, impacting performance. What that looks like, can be seen in the pagespeed impact visualization as part of the blogpost about fixing chatbot performance.

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.