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?

  • Kendra Walker

    Since chrome has updated, you now need to use CSS and JS code coverage. Find unused CSS and JS code with the new Coverage tab. When you load or run a page, the tab tells you how much code was used, versus how much was loaded. You can reduce the size of your pages by only shipping the code that you need.

    The Coverage tab Figure 1. The Coverage tab Clicking on a URL reveals that file in the Sources panel with a breakdown of which lines of code executed.

    There is a breakdown of code coverage in the Sources panel. Each line of code is color-coded:

    Solid green means that line of code executed. Solid red means it did not execute. A line of code that is both red and green, means that only some code on that line executed. For example, a ternary expression like var b = (a > 0) ? a : 0 is colored both red and green. Note: The color-coding is likely to change in future Chrome releases. To open the Coverage tab:

    Open the Command Menu. Start typing Coverage and select Show Coverage.