Identify and remove unused css across entire site

Identify and remove unused css across entire site

This post will show you a range of ways to detect and remove unused css from your site.

removing unused css will help your stylesheets load faster which, in turn will help your site load faster.

there are several ways to do this.

one way is to use a firefox extension : dust me selectors it can take a sitemap.xml and can scan your entire site. it will show you all the unused css from your stylesheet.

there are other ways:

unused-css.com will take your url and will scan it and will output the css file with the unused css already removed! – by default it only scans the homepage, but if you provide it with an email address then it will scan your entire site and will mail you the results and the clean css file!

gtmetrix.com have a cool little tool that will analyse a single page at a time using ySlow! and google pagespeed.

google pagespeed online is very good and analyses a lot of other things that can slow down your site, but the css part is very useful. it shows you slow css rules, etc

see this page about browser caching to speed up your site too

(Visited 10,476 times, 1 visits today)
  • Thank you, very interesting post. But i’ve some doubts about dust me selectors. It give a different result for each page…why?Anyway i love this blog’s theme! :D

    • I never answered this comment, not sure why, but there is an answer: dust me selectors identifies the css thats not used on a per-page basis, so eg if you had a class of ‘info-box’ and only used that on one page of your site, then it would identify that as not used on every other page :)

  • I’ve used unused-css.com, it gives an output of the whole css file with lines through the unused code for manual removal. This can be very time consuming but they can do the removing for a fee.

  • Unused CSS doesn’t seems good as a free user. And Dust Me Selector isn’t compatible with my firefox version. Any other option?

  • Lee Moss82

    You think this would be a simple thing to do, this should most certainly be a feature of Dreamweaver and other text editors. I agree with you teckdevil. very annoying.

  • To remove useless CSS and JS in WordPress you can use following plugin: https://tomasz-dobrzynski.com/wordpress-gonzales