CSS Optimization with Google Chrome Developer Tools

After spending a little time searching for CSS Optimization solutions, I was pleasantly surprised to learn that one was bundled in Google Chrome’s Developer Tools.

I like to start web projects with boilerplates or bootstraps like Twitter’s, and then I spend hours cleaning-up the unused selectors.

Now, I just:

  1. Navigate to the site in Google Chrome
  2. Hit ‘F12′ to access the developer tools
  3. Select the Audit tab
  4. With ‘Web Page Performance’ checked, hit the ‘Run’ button
  5. A list of unused selectors FOR THAT PAGE is available.

    UnusedCssRules

I did run across solutions that would automatically produce a clean version of the stylesheet for you, like Mincss, but I’d much rather do it manually so that I can see what I’m removing.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>