If you have ever run Page Speed Insight on your website you may have seen the warning “Remove Unused CSS” and that might be the reason you are reading this article. In this article, we are going to know all about removing unused CSS.
We are going to know how we can identify them, how to remove them with and without plugins. Removing CSS can boost your website’s performance and speed.
What is unused CSS?
As the question itself suggests the CSS code of our website which is not being used to style any of our web page’s content is unused CSS. And in WordPress website chances of having unused CSS is more than any hardcoded website because in WordPress we use themes and a lot of plugins that have CSS of their own.
For example, your main theme has its CSS in style.css, but when you install a plugin such as WooCommerce it has its own CSS for displaying products. When you use page builders they have their own CSS for displaying pages and any other plugins to have their own CSS for displaying content.
These plugins often add CSS in site after installation automatically and even if we don’t use them, they still take space in our website and get downloaded but never used. Usually, these CSS files are very small and load very quickly but having a lot of them can decrease your site performance.
How to identify unused CSS?
Before identifying them you first need to check if your site has this issue or not. To check you can use PageSpeed Insight and if your site has this issue you will see a warning “Reduce unused CSS”. When you extend this warning you can see which specific CSS files have this issue.
Now to check specifically which specific code is used you can use a couple of methods.
1. Chrome Dev Tools
To manually identify each CSS code you can use Chrome Dev Tools, to identify first press Ctrl+Shift+I or click on the three-dot menu go to More Tools> Developer Tools to inspect the webpage.
Now click the developer menu three-dot menu go to More tool>Coverage and select it. One thing to keep in mind if your coverage tab is hidden drag and expand to see it.
Now when you reload the page you can see all the unused CSS files listed below, click on any single one and you can see the complete code of that file. The code which has marked in red is unused code and the code which is in green or blue is CSS which is being used on a page. You may find some codes are in both blue and red means some part of it is used and some of it is unused.
2. Tools to check used/unused CSS
There are several online tools available to check the used and unused CSS of your website.
- PurifyCSS: PurifyCSS is a great tool to check your website’s unused CSS. Just go to their website and paste your site URL, the site will provide you a list of all the CSS files and you can easily check which CSS codes unused and which are being used.
- Jitbit: Jitbit CSS checker can help you check unused CSS of your website. To use this tool just go to their website and paste your website URL then you can see the list of all your unused CSS selector.
- CSS-Used: CSS-Used is a chrome extension that you can download from the chrome web store to check your unused CSS.
How to remove unused CSS?
There are multiple ways by which you can remove unused CSS from your website. But the most important thing before any of this to take a backup of your website so you if mess up something you can always go back. And always check multiple times while removing CSS manually.
1. Remove from theme(style.css)
If you wanna remove CSS from your actual theme you need to edit your theme’s style.css file. But first, you should make a child theme so your changes won’t get affected if your theme gets updated. To know how to make a child theme you can flow this guide How To Create a Child Theme for WordPress.
Now to remove it go to your WordPress dashboard navigate to Apperance>Theme Editor and find the style.css and other CSS files of your theme. Since you already know which codes are unused you can remove them one by one or if you have downloaded the clean version from the above methods just replace everything with that.
2. Remove from other files
If you are able to see and modify all the CSS files from the theme editor then that is fine, but if some CSS files are not visible there and you wanna edit them you can do that in two ways. First, use FTP and load your website files in your system and edit CSS files in your code editor.
You can also use plugins like File Manager to access all the files of your WordPress website, and you can download, edit and modify them as you want.
3. Plugins to remove unused CSS
We know all of you are not experts in coding and don’t wanna do it manually, well you are using WordPress and there is nothing you can’t do with the help of a good plugin in WordPress. So let’s know about some plugins which you can use to clean your unused CSS from your website.
1. Asset CleanUp: Asset Clean Up is a great free plugin to get rid of your unused CSS. I am not going to get into installation cause by now you already know how to install a plugin. After installation and activation head over to your dashboard and navigate to Asset CleanUp>CSS/JS Manager.
Now when you reach there plugin will automatically start analyzing your home page and after a couple of seconds (time depends on your site size) show you the complete list of JS and CSS files of your homepage. You can checkmark Unload on this page to upload that CSS file from that page then clicks on Update to reflect the changes.
You can perform these same tasks for all your pages, the entire website, categories page, or so on. However, some pages are only available for pro users and if you really wanna unload all the CSS from your site you should consider upgrading. It will cost $49 for one website and $79 for three and $149 for an unlimited number of websites.
One thing to keep in mind when you are unloading CSS or JavaScript does that in test mode so you can exactly track the changes without affecting your main site.
2. Perfmatters: Perfmatters is a premium WordPress plugin and you need to purchase it in order to use this plugin. But it is very powerful and offers a lot of good options for removing unused CSS. After purchasing, install it and Activate the license. Now navigate to settings and turn on script manager.
Now go to any page or post on your website where you want to remove unused CSS, you will see a script manager icon on the dashboard menu, click on it. Now you can remove unused CSS and JS from the page or even globally.
One thing to keep in mind that this plugin is a performance plugin and it has a lot of features to boost your website speed, and removal of unused CSS is a part of it. This plugin cost starts from $24.95 per year.
3. CSS/JS Manager: CSS/JS Manager is also a good tool to reduce the unused CSS from your webpage. Installation of this plugin is the same as others. You can use critical CSS for your page, post, product, and other things with this plugin.
To use this plugin you need the URL of CSS files that you wanna remove you can get that from page speed insight or via using chrome dev tools, copy that URL and add it as a new resource in the plugin’s settings.
Now you can either use defer mode or normal mode hide or add the CSS file on your site globally or you can choose every single page if you want. You can do this for multiple links.
Few Tips
Now here are a few tips aside from removing CSS from your website, you should consider them to not have this problem in the first place.
- Choose a clean and minimal-looking website design, no I am not saying go with something completely basic but you should choose some clean design with not many unnecessary styling, and for a cleaner WordPress website, you should choose clean Themes.
- Always use an updated version of plugins, Developers often optimize their plugins and theme for better performance so keeping them up to date can be useful for avoiding unused CSS.
- Always use themes and plugins from a reputed developer because most of them optimize their plugins and theme properly.
- You can also CDN for faster CSS delivery.
- Utilize critical CSS for above-the-fold content, this will make your site a lot faster for your visitors.
Conclusion
Now you know how you can remove unused CSS from your WordPress website. I am sure now you are able to speed up your website and see a big improvement there.
One thing to keep in mind clean your CSS but don’t get obsessed with it unless you want the world’s fastest website like this one. So instead of removing everything try to remove only unnecessary one.
If you have any questions or suggestions regarding this article let us know in the comment below.
