CSS Front-End Development

Authored by Corey Ballou


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 Ballou is the CEO of Whether you're a student, young professional, entrepreneur, startup, or small business, you can be up and online fast with your own custom domain, email, and webpage on POP. Corey is a professional PHP developer by trade, specializing in custom web applications development for startups, small businesses, and agencies. Follow Corey on Twitter @cballou.

  • 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.

  • 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.

  • Dan Robertsson

    Yeah. This is good but its kinda useless actually if you cant resolve it. Every developer knows theres probably plenty of CSS unused, question is how to get rid of it in a automated fashion…

  • Dan

    Developer Tools is totally USELESS as it does not tell you which specific selectors are not used.

    • FredButters

      Yeah it does. If you expand the arrow next to one of the CSS files after running the audit, you’ll see a list of the specific css selectors that are not used.

  • Dafydd

    Your title is misleading. Chrome does not remove unused CSS. It gives you a list of unused CSS. How could that possibly be helpful? Giving me a list of things I don’t use?? Give me a list of things I do use and let me export that list… now THAT would be useful.

  • surbhi singh

    Is there any way to check for unused CSS throughout the website?