June 14th, 2015
We’ve all done it. Write a bunch of CSS, then decide later there’s a better way to do things and rework everything. At this point, I usually just try to leave well enough alone because I’ve managed to get it to work, but to optimize a site it’s important to make sure the only things getting downloaded are things that will be used, and a bunch of unused CSS rules flies in the face of that idea.
For single page and other small sites, Chrome’s built in Web Page Performance audit can be used to find out if you have any extra CSS rules that aren’t really being used.
- Open up dev tools and go to the Audit tab.
- Make sure you have the
Web Page Performanceaudit selected.
3. Push “Run”
You should get something that looks like the following:
From there, you can expand each CSS File to see which selectors are not being used. Unfortunately, Chrome doesn’t provide any way to generate the files with these selectors removed, but it is a good place to start and make sure you aren’t dragging down your site with a bunch of excess CSS.