Show HN: Record your CSS usage on your website - remove unwanted CSS

5 points by laurencei ↗ HN
This is a follow up to: http://news.ycombinator.com/item?id=5095516 regarding CSS optimisation.

The common request/theme in these comments was the ability to 'record' your CSS usage on your website as you used it, thus capturing all the CSS selectors (i.e. on a dynamic website).

Turns out this functionality is actually inside Chrome Developer Tools; "CSS Selector Profile".

The profiler seems to be designed to record how much work each CSS selector takes - but I've noticed that it actually 'records' your usage (you press start + stop) - and shows you how many times each selector was called during your usage.

i.e. some selectors were used 100 times, other selectors 0 times.

So now you can look at your CSS across your whole dynamic site - and remove selectors that are never used.

1 comment

[ 3.1 ms ] story [ 15.2 ms ] thread
Is there a tool that will remove the selectors for you? It would be nice to have something included in a site build process that does this for particularly large CSS frameworks like Bootstrap and Foundation.