Backstory
I wanted to a to fully optimize my website for performance, and get the maximum google pagespeed score (and hopefully a good position in the search engine!). Google insights was telling me I had a lot of unused CSS in the main templates that I purchased and I set about optimising them by removing the unused code.
It wasn’t long before I realised just how tedious a process this would be, after about half an hour I had calculated it would take about 40 hours work to properly remove all the CSS (it was a fairly complicated site --- https://petcare.management), and being a developer I probably underestimated that ;P because I’d have to then re-test all the pages in the site to make sure they still work properly.
So, I looked to find a tool that could do this automatically. What I found was several groups of tools:
Online Tools
Online tools, like unused-css.com wanted to charge me between $25 and $75 per month for the use of the tool. You must be kidding me. While I am happy to pay something fair, this is a one off affair for this website and I’m not paying that much to subscribe to something I'll use pretty infrequently – and also it’s limited by “scans” as well, for $25 I could only scan my code 15 times per month and like most developers I tend to scan/edit/check, scan/edit/check so there are typically a few cycles
Worst of all, those were online anyway, so frankly pointless as my site requires the user to login to see most pages, which the scanner isn’t going to see for $25 per month.
Ok actually those things were not the worst things. The major problem was my projects always have plenty of pages and dynamic popups which you only access IF you click certain buttons or have certain scenarios in your code, right? Like a ‘save changes’ popup which is styled to look nice.. or a thank-you payment page… but the scanner is not going to be able to see that, unless it completes a purchase or the user makes changes. When I used those tools I found they completely broke my website look and feel and there were so many breaks it was really time consuming to get my website looking correct again.
So basically I ruled out online scanners except for simple single page website that have no popups or interactions that might be styled with css.
Build / Pipeline Tools For Removing Unused CSS
I also found several build pipeline tools, like uncss, purge css, purify css or optimize-css-assets-webpack-plugin some of which are now pretty old (e.g. not touched in about 5 years), kind of a neat idea but fundamentally wasn’t really that great for me anyway - I don’t want my developers maintaining a massive CSS file wondering what is used and what is not, I want that unused code removed once and then have a clean, readable maintainable CSS file of just the CSS I actually use.
Build tools are better for the minification aspects, not the removal which only needs to happen once! Not every single time I build the app… and it can be difficult or time consuming to trying to configure this type of tool into the build process anyway.. I wanted to remove it once and be done with it. If a build tool gets it wrong, then you have loads of wasted time trying to trace errors.. the the build tools change from time to time so sometimes it's better to do it once, and right.
Devtools
I also found some tools like google chrome devtools which has a code coverage feature on the coverage tab. At first I was very excited about this, as this very cool feature puts a nice bar beside which CSS code used and which isn't - great for fine tuning.
Unfortunately this suffers from the same major problem as the online tools, it can’t identify (or remove, or comment out..) the CSS correctly because it is only considering one single HTML file.
It constantly marks bits of CSS as “unused” when I know very well that CSS is used, just not on the page I happen to be viewing right now..
Still, it's a great idea and especially useful for single page sites or independent pages with no other stylesheets. You can access it via the 3 vertical dots and the code coverage tab.
Developers will be Developers
So, like a typical developer I built my own tool for my own use. I’ve decided to make it completely free although would love some donations or sponsorship to cover the cost of the hosting etc.
The difference with my tool is because you download it, it can consider all the relevant code not just one file, and identify the CSS across your whole project. It won’t be perfect because I’ve erred on the safe side.. eg. If it finds some CSS code it things might be referenced it keeps it, but code that is definitely not needed can be either automatically removed or commented out. Hope you find it helpful, please contact me with any issues you encounter; feedback is appreciated.