Part of my job as a Tech SEO is to optimize our pages for speed. It’s not only done so our Core Web Vitals look prettier, but – and this is, in my opinion, even more important – improving the perceived speed of the page build-up in the browser makes browsing our pages much more attractive to the user.
When it comes to speed optimization, we’re looking at many different attack vestors. One of them is to check the actual usage of the CSS we’ve got sitting in our CSS files.
Here’s a quote from Google on stylesheets and their impact on speed.
By default, a browser must download, parse, and process all external stylesheets that it encounters before it can display, or render, any content to a user’s screen. It wouldn’t make sense for a browser to attempt to display content before the stylesheets have been processed, because the stylesheets may contain rules that affect the styling of the page.
Each external stylesheet must be downloaded from the network. These extra network trips can significantly increase the time that users must wait before they see any content on their screens.
Unused CSS also slows down a browser’s construction of the render tree. The render tree is like the DOM tree, except that it also includes the styles for each node. To construct the render tree, a browser must walk the entire DOM tree, and check which CSS rules apply to each node. The more unused CSS there is, the more time that a browser might potentially need to spend calculating the styles for each node.
Chrome Developer Documentation
So in short: Browsers need to spend time calculating the styles for each HTML element. And for that, it needs to first download and parse the stylesheet files.
If you’ve got CSS in your stylesheets that is never actually being used on your pages, the browser (and crawlers) will spend time and resources on downloading and parsing elements that could be simply deleted.
To check our pages, I have created (in my free time, I may add) a little tool called “The Big SEO’s Unused CSS Finder” (not trademarked… yet :D). Yes, I am not just tall, I am also big. Hence the name. And yes, I am very unimaginative when it comes to naming things.
What does my tool do?
I am using an actual website for this test, with permission. The site is kreditkarten.com, a credit card comparison website built on WordPress.
Basically, you feed the tool your sitemap (or sitemap index) file and, in case you need it, a UserAgent string.
If you feed it a sitemap index, it will automatically collect all referenced sitemap files.
It will then get all the URLs from the sitemap file(s) and download the HTML content of each referenced URL.
While it’s doing that, it does the following on every URL:
- get all referenced stylesheet file URLs
- get all on-page CSS declarations from <style> tags
- get all CSS classes used in the “class” attributes on HTML elements on that page
This way we get a list of all CSS classes used on all pages of your website. Note: The pages have to be referenced in the sitemaps to be checked! The tool does not crawl the site or discover URLs in the HTML. It’s not a crawler 🙂
The app then compares the used CSS classes against the the declared classes (within stylesheet files and <style> tags) and outputs a list of unused classes, together with the stylesheet files they have been declared in.
You will also get to save the unused classes and their stylesheet files as CSV. You can save the data as CSV from the menu “Data -> Save as CSV”.
To get a quick overview, there is also a table view of the same data. You will get the CSS classes and the stylesheet files they have been declared in.
I had to blacken some parts of the paths to not give away the domain 🙂
Limitations
There seems to be an issue with parsing tailwind… so don’t expect this to work on your tailwind projects.
Download
Note: This app is still in very early development. Please double check everything and don’t just blindly trust anything. You’re using it at your own risk. Thank you.
You can download this tool for free. I have received so much help to grow and become a better SEO from this wonderful community, so the least I can do is give something back.
The only thing I would kindly ask you to do is to send me feedback to chris@chaensel.de if you have any suggestions or find any bugs.
Quick but important info: It’s an .exe file in a ZIP file. I promise: NO malware, NO spyware, nothing. This thing also doesn’t “call home”, nor does it collect any usage data.
And yes, it’s available for Windows only. Sorry.
Changelog
Current version: 0.1.2
- 03.06.2023: v 0.1.2 Bugfix: Stylesheet URL collection wasn’t working properly.
Thank you to Hasan Deniz for reporting it!
02.06.2023: v 0.1.1 Revamped the visuals to make it look prettier 🙂 - 02.06.2023: v 0.1.0 Initial release
Keep in touch
If you’d like to find out about new releases or other tools I am developing, simply follow me on Twitter and add me on LinkedIn.