BLACKBELT

CSS Front-End Development

Authored by Corey Ballou

3 Comments

Removing Unused CSS Selectors from a Website with Google Chrome’s Audit Tool

Google Chrome’s developer tools have some gems that often go overlooked by developers and designers. One of these tools we’ll be covering today is the Audit Tool. To make use of this overlooked feature, perform the following steps:

  • Open Properties > Tools > Developer Tools (or press SHIFT + CTRL + I)
  • Click on the Audits tab within the Developer Tools window
  • Ensure the Web Page Performance option is checked.
  • Click Run

Audit Tool Settings

The resulting report will show you a bunch of useful information you can use to trim your bloated page down to a lean mean fighting machine. The resulting information will only show you a listing of CSS selectors that aren’t used on the current page. You still need to do the gruntwork of locating them in your stylesheet and removing the rules that you’re positive don’t apply under any circumstances or pages.

Audit Tool Results

Prefer Firefox? Check out the Dust-Me Selectors plugin

If you’re still an avid fan of Firefox, there’s a solution for you as well. Sitepoint released a Firefox extension that’ll do the trick. It actually goes a step beyond Chrome’s Audit Tool. Dust-Me extracts all of the selectors from all of the stylesheets on the page you’re viewing. It then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they’re encountered. Dust-Me gives you the option of testing pages individually or as an entire site. If you decide to test the site, it’ll spider the site and summarize a profile of which selectors aren’t in use anywhere.

Official Dust-Me Selectors Homepage

Author: Corey Ballou

Corey is a seasoned PHP developer specializing in custom web applications development. He is an avid blogger, open source contributor, beer lover, homebrewer, entrepreneur, and Queen City PHP co-organizer. You can follow him on Twitter @cballou or visit his website coreyballou.co.

  • http://twitter.com/samiullah1989 Sami89

    Wow great tip; never thought audit section in chrome dev tools despite using it heavily. But some time you can’t remove all of unused because it might contain a prefix version of css3 property so you can’t keep other browser out of the show. I believe that’s why chrome is not giving this option. And there is also another of using browser hacks for older versions of IE like # or * hacks.

  • http://en-gb.facebook.com/people/Rob-Record/511143845 Rob Record

    Very good tip! We could all use a tune up. Try it on your site too.

  • Chethan Ram

    Good tips Thanks and in my site it is saved a lot
    style.min.css.gz: 82% is not used by the current page.