Check how much of your CSS or JavaScript is actually used!

Working with JavaScript and CSS and particularly NodeJs and the millions of packages and libraries we download everyday has made it easy to look over the fact that we are making our JavaScript and CSS bundles huge without using much from them!

How can I check how much I use?

If you want to check how much of your JS or CSS bundle you are actually using you can use one of the latest Chrome Dev tools: Coverage.

To use this feature, you can open your website with Chrome, then using Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows, Linux), start typing Coverage and then select Show Coverage:

Then select the “Show Coverage” option.

Now you should be able to see the Coverage tab next to the browser Console.

Here you should be able to see the amount of CSS or JS that you are bundling but not actually using!

I hope this helps you improve the performance of your website by optimizing your application bundles.

Cheers!