Useful Tools for Finding Unused CSS Styles
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.
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).
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.
This tool allows you to view the cleaned up version by clicking on “optimized version”.
When you click the “optimized version” link, the optimized version is displayed plainly in the browser; you have to resave this version by yourself.
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
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
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.
Alternatively, by clicking on View -> Developer -> Developers Tools (Mac Only) or CTRL+SHIFT+I(Windows only).
Once the developer tool opens, click on “Perform an audit…”.
After clicking the “perform an audit…”, click the “Run audit”.
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.
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:
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.