Remove Unused CSS and Dead Rules From StyleSheets

When optimizing your website for faster loading, I am sure you have encountered a red flag in Google Page Speed Insights

Although it may look like the CSS file size is only a few KB and not even 1 MB, don’t be deluded by the size alone. All of these things add up and may slow down your website, so it is recommended to remove unused CSS and dead rules from your stylesheets, make the stylesheet file leaner, minify it and perfect it for loading faster on slow connections. A faster website has better chances of ranking higher, so you should take the loading time of your website very, very seriously.

What is Unused CSS and Dead Rules?

Unused CSS or “dead rules” is nothing but CSS code which is not being used on your webpage. If you remove this code, it will make the CSS file leaner, lightweight and help improve the page’s loading time to some extent.

Let’s take an example to understand this.

Let’s say you have the following CSS code in your stylesheet

.red_highlight_box {
  padding: 10px;
  background-color: black;
  color: white;
  cursor: pointer;
  max-width: 85%;
  margin: 0 auto;
  border-bottom: 2px solid white;
  //border-radius: 10px;
  font-family: 'Secular One', Arial, Helvetica, sans-serif; 
}

The above code is for the class name “red_highlight_box”. It is possible you are not going to use this class in your website’s theme and it is also not being used by any existing page on the site.

In this case, the above code is Unused CSS or a Dead Rule or “Bloated Code”. It’s doing nothing but slowing down your website and you should definitely consider removing it from the stylesheet file once and for all.

Imagine if you have 5 stylesheets being called from every page of your website and each of these stylesheets is filled with dead rules and code which is not being used in your website’s HTML at all. This is quite normal if you are using a Free WordPress theme or a premium theme because the CSS contains everything that your theme “may” require. The developer of the HTML template or WordPress theme has considered all the possibilities, widgets, sections, fonts, styling, background color and hence written a code which will satisfy all the possibilities.

But in reality, you aren’t going to use all the possibilities. Practice has shown that you will use less than 30% of all the possibilities coded in the CSS file and hence, there would be a lot of Unused CSS and Dead rules in stylesheets which would unnecessarily increase the loading time of your website’s pages.

Remove Unused CSS From StyleSheets Using Unused-CSS.Com

There are many tools to merge CSS files, minify them or remove dead rules from stylesheets. But I highly recommend using Unused-Css.Com. In fact, it is the only tool that worked for me every time without any failure. I have tested it on multiple websites and the output CSS file which I got has never failed me.

I have given Purify CSS a try but for larger sites with lot of CSS code, the output wasn’t correct. Some of the CSS codes were removed from the output file which are in use on some other page.

The best way to go about this process is not to manually remove unused CSS from your website’s stylesheet files. Because, when you are doing it manually, there is always a possibility of human error. It’s also not scalable and quite laborious to manually inspect each and every class and find in which pages or scenarios they are being used. So manual way is not full proof and we will leave it out.

You need an online tool that will crawl your entire website, consider all the pages and extract only the used CSS in every page. Once it has extracted the usable CSS on every page on your entire site, it will combine it and give you the final output file, which is the clean CSS – free from bloated code or dead rules.

Here is how you do it.

1. Signup for a free account at Unused-css.com. The free plan let’s you clean the CSS for one website only with a maximum of 100 pages. My website had more than 4000 pages so I took the monthly plan since I had to optimize CSS files in bulk for multiple sites.
2. Add your website(s) and set up a scan. Their Crawler will crawl your entire website and all the pages, so make sure your robots.txt or other scripts are not blocking their crawler in any way.
   
3. You will soon get an email when their crawler has finished crawling all the sites and has optimized all the CSS files used in your entire website. Don’t worry, all these files won’t be combined into one, you can selectively download each optimized CSS File on your own and then decide to merge it with another, totally depending on your individual requirement.
4. Login to your Unused-CSS account, select the project and you would see all the CSS Files listed in the left sidebar. In the left sidebar, first, select the CSS file which is being used by your website’s theme or HTML template (it should be somewhere down the bottom in the left sidebar). Next, click “Download CSS” and you get the minified CSS file with no bloated code or unused code.
5. Upload this new CSS file in your website’s theme directory. Don’t delete the original CSS file yet, instead upload this new one and call the new optimized CSS file from your website’s head section. Once that is done, go to Google page speed insights and run the diagnostics again.Use random pages on your website, it’s totally fine since Unused-CSS.com has scanned your entire site and combined all the active CSS classes being used into one file. You should see the warning – Remove unused CSS and remove dead rules from stylesheets no more showing up under the “Opportunities” section in Google page speed insights.

   

Of course, you don’t have to use a paid tool to get this done. You can use Chrome Dev tools and do it manually or defer Unused CSS. 

But after giving Unused-CSS.com a try for 3 of my sites, I am completely satisfied with the output. The premium plan comes with scheduled weekly scans and up to 5000 pages per website, which is more than sufficient to update your CSS files, in case, it needs to be done at a routine interval.

What if my Website’s Theme Updates? Do I have to Remove Unused CSS All Over Again?

Yes, you have to do this again and again if you are using a free WordPress theme or a free HTML template. This is because when your theme receives a new update, it will overwrite the code in your style.css file.

One good way to avoid this process is to rename your file as “main.css” or “somethingelse.css” and call this file from the head section manually. Keep the default style.css file as it is and make sure it is not being called in your website’s source code. You can dequeue stylesheets from your theme’s functions.php file (if you are using WordPress as a content management system)

That way, when the theme has a new update, it won’t overwrite the optimized CSS file which is free from bloated code.

My suggestion would be not to use Free WordPress themes. Use a premium WordPress theme that comes with developer support or hand-code your own WordPress theme from scratch, so you know how everything fits and which files are being called from which sections.