To improve load time and Pagespeed score, it is important to keep the CSS file size as low as possible. If you remove a CSS file, it will negatively affect the design of your website. You cannot remove a CSS file or a part of CSS code until you are sure that the file or part isn’t being used. If you are not a designer, it isn’t an easy job. In this article, I will discuss how you can remove unused CSS rules and optimize the CSS of your website.
Recently while optimizing my blogs, I found an interesting tool that helped me in optimizing
I am talking about PurifyCSS Online. This tool effectively helps in removing unused CSS code from your stylesheet. the CSS files of my blogs. I used this tool to remove unused CSS rules and managed to reduce CSS code by 65%.
You need to enter the URL of your blog and then click on the CleanUp CSS button. It will tell you what part of CSS is not being used by the page. You also get an option to download the combined, purified, and minified part of CSS that is being used by your web page.
But here is an important thing you need to understand before using this tool. A website or a blog contains different kinds of pages including Home Page, Page, Post, Archive, Contact, Tags, and a few more. Different page types use different CSS rules. So, you cannot just enter the home page to be sure what CSS is not being used. Maybe some part of CSS is not being used by the home page but is being used by post pages. So, first of all, make a list of all types of URLs your website has and then take 1 URL of each.
On this blog, I don’t have author pages and tag archive pages.
As in the screenshot, 20.65% of the CSS is still not being used by my pages. I can still save 123.49KB.
Now when you have a final CSS with just CSS rules being used by your blog, you can remove all existing CSS files and included just this one. Do not delete the existing CSS files from your server. Just comment on their import code from the header and include the import code of this new CSS file. After this check, if your website is working. Check all the components like sliders, forms, dropdown menus, Hover effects, and color effects. If anything isn’t working, you didn’t include all types of pages while finding the unused CSS. In this case, revert to older CSS files and then try again to check for unused CSS files by adding all the pages that may cover the CSS rule usage of your CSS files.
If you think this tool requires too much manual work and you are not able to find the best results, you can go with a professional but a paid tool called UnusedCSS.
This tool just asks you the home page URL and uses its own crawlers to find the CSS rules by different web pages. As it scans all the web pages available on your website automatically, you don’t need to do any manual work and it accurately finds the unused CSS rules. Then it gives you an optimized CSS file you can use on your blog.