Having a light CSS file is essential in optimizing a web page loading speed. While techniques like minifying CSS files can help reduce the size of files significantly, many developers find it challenging to create CSS files that contain only CSS styles rules actively used for the web pages. So, even better performance is achievable by removing unused CSS styles rules before minifying CSS files. We explore the merits and demerits of 6 major tools commonly used to clean up unused CSS styles rules from CSS files.

UnusedCSS

This is extremely easy to use web-based application; all you have to do is to supply the URL of the website, and it automatically finds unused CSS styles rules and removes them. It also displays an optimization percentage gain as well as the cleaned up CSS styles preview before downloading the cleaned up CSS files.

unusedcss

The available monthly plan includes the Free, Basic and Premium packages. The Basic package sets you back $30 ($25 if billed annually) while the Premium package sets you back $75 every month ($63 if billed annually).

unusedcss package

Advantages:

  • Extremely easy to use
  • Users can log in to download the cleaned up CSS file produced
  • Can scan JavaScript files to check for CSS rules
  • Can perform scheduled optimizations
  • Media query and responsive design exploration
  • It cleans up unused CSS rules automatically
  • Can scan up to 10000 pages

Disadvantages:

  • Cleaned up CSS files are downloadable by only paid users
  • Works only on a live website

GTMetrix

This is a comprehensive tool that provides a full web audit including checking for unused CSS styles rules in a live website. Provide your website URL, and it gets to work.

gtmetrix

This tool allows you to view the cleaned up version by clicking on “optimized version”.

gtmetrix

When you click the “optimized version” link, the optimized version is displayed plainly in the browser; you have to resave this version by yourself.

gtmetrix features 02

Advantages:

  • Easy to use
  • It’s free
  • Can scan multiple pages
  • Nice user-friendly interface
  • Cleans up rules automatically
  • Cleaned up CSS files can be saved

Disadvantages:

  • Works only on live websites

JitBit

jitbit

This is another easy to use tool. However, development work is still in its infancy; it only lists unused CSS styles without providing an option to download or clean them up. There is a known issue with this tools as it shows pseudo-classes like :focus and :hover as unused.

Advantages:

  • Extremely easy to use
  • It’s free
  • Nice user-friendly interface
  • Can scan up to 100 pages

Disadvantages:

  • Only displays unused CSS, does not clean up unused CSS rules automatically
  • Works only on a live website

UnCSS

uncss

This is another useful tool but with limited use cases. You would have to copy your HTML and CSS code one after the other to clean up the CSS code.

Advantages:

  • Easy to use
  • It’s free
  • Nice user-friendly interface
  • Cleans up rules automatically

Disadvantages:

  • Does not work on live websites
  • Cannot scan pages automatically
  • Could be tedious when cleaning up multiple pages

Google Developer Tools Audit

Google has an inbuilt add-on called Developer Tools that can help locate unused CSS sheets and styles rules. Open the Developer tool by clicking on the top left of the browser window.

google dev tools audit

Alternatively, by clicking on View -> Developer -> Developers Tools (Mac Only) or CTRL+SHIFT+I(Windows only).

google dev tools features 01

Once the developer tool opens, click on “Perform an audit…”.

google dev tools features 02

After clicking the “perform an audit…”, click the “Run audit”.

google dev tools features 03

Then a list of unused CSS rules and stylesheets are displayed with the potential percentage saving of removing these unused rules and sheets also highlighted.

google dev tools features 04

Advantages:

  • Easy to use
  • It’s free

Disadvantages:

  • Works only on live websites
  • Multiple pages cannot be scanned at the same time which means the unused stylesheets rules could have been used in other pages
  • Does not clean up unused CSS rules automatically

PurifyCSS

This is a console based tools that can be used after installation to remove unused CSS styles rules from HTML, PHP, JavaScript or CSS files. This is particularly useful when a CSS framework like Bootstrap is used, and many of the selectors are unused. However, it does not modify the original CSS file but produces a new one.

Advantages:

  • It’s free
  • Works on raw CSS, PHP, JavaScript or HTML file
  • Cleans up unused CSS style rules before storing them in a separate file
  • Can scan manually specified files
  • Useful during code development stage

Disadvantages:

  • Does not work on live websites
  • Can only scan manually specified files
  • Does not clean up unused CSS style rules automatically
  • More difficult to use in comparison to other tools

Other Tools

Many other tools exist out there, but most of them are very old without any active maintenance in recent years. A good example is Dust-Me Selector; a Mozilla Firefox add-on which does not seems to be compatible with recent versions of the browser. The plugin was last maintained in 2015. Mozilla Firefox has an inbuilt experimental tool called CSS Coverage which should be available soon.

Summary

A summary of the major features include:

summary unusedcss

Conclusion

UnusedCSS remains the only complete tool out there to carry out full CSS code clean up on multiple CSS stylesheets and rules automatically; even in non-CSS files. GTMetrix is also an excellent choice but lacks the comprehensive functionality and automation of UnusedCSS. JitBit and UnCSS are good alternatives but lacks in functionality in comparison to UnusedCSS and GTMetrix. Google Developer Tool audit is also useful, but it does not attempt to clean up the CSS rules and only scans one page at a time. PurifyCSS is an excellent choice during actual development coding but more difficult to use.