Search Marketing, Technology, WordPress

How to Find Unused CSS Styles in your Stylesheet

Even though your stylesheets are cached, the first time someone visits your site a bloated CSS file can really slow your site down. This isn’t too great for a first impression. As sites grow, they tend to expand with new widgets and objects that designers continue to fine-tune with more and more stylesheet options. Over time, your stylesheet can get quite bloated and be a key part of why your site downloads slower than others.

I’ve seen other CSS verification tools out on the web. We’ve used Clean CSS to reduce the file size by better organizing and minifying the data on it. When you’re using a third party to analyze your site, you have to be careful, though. If they scrape one page and analyze your CSS, the tool may have you remove reduce tons of styles that are utilized on other pages.

Not the case with Unused CSS – a tool that Andrew Baldock from Mindjet, a mind mapping application, showed me yesterday. The tool crawls your site and identifies unused CSS. You can even check styles you want to keep regardless of the analysis. To top it off, you can download the stylesheet after it’s run through a minify routine.

Above is the dashboard where Unused CSS found that it could reduce my stylesheet by 56%. We’re going to continue to test out the tool – I’m still concerned about objects we’re pulling in via Javascript and Ajax. However, it’s looking like a great resource for us.

Download a Sponsored Marketing Whitepaper:
SEO Best Practices for Commerce Product Pages: Volume 1

SEO Best Practices for Commerce Product Pages: Volume 1

Search engine optimization (SEO) can make or break any website, but it's critical for commerce sites that depend on attracting, converting, retaining, and delighting customers. Download Now