These days a lot of my day-to-day work was centered around the loading speed of our pages. And a big bottleneck was unused code. We were serving too much JS and CSS code that was not used by that page.
While looking at how to improve this I've discovered how to use the Coverage tab. Great tool!
It's a bit hidden in the UI. To activate it you will need to press cmd + shift + p and search in the list for the Coverage tab.
After you run it, it will serve you a report like the one below pointing to the code that is not needed on your page. The blocks marked with red are not used on your page. This will work both for Javascript and CSS.
Jad Joubran has a nice video about it and how to use it.
It seems that the coverage tab was around for quite some while, but I've just found out about it only a few days ago 😅.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.