Seeing the Remove unused CSS in Google Search Console or in the Core Web Vitals tool?
If you want to optimize your site speed, you should want to remove unused CSS in files. Since wordpress sites can use a lot of plugins, there are more chances of having unused CSS. Combining themes and these plugins, your site speed gets impacted causing the site to slow down. Removing unused CSS from your site to improve page speed score and performance is a great idea.
But before you start working on removing unused CSS you should know what is Unused CSS, why it is crucial to remove unused CSS from your site, and what will happen if you don’t remove it.
Let’s get started
What is Unused CSS?
Normally WordPress themes are made in a way that the theme supports almost all types of sites such as blogs, shop, forums and anything else you can think of. These themes contain different HTML elements such as icons, tables, forms, buttons, WooCommerce elements, author box, comments, galleries, typography, search bar, and so on. Themes developers design all these elements for multiple users and write the CSS in a separate file style.css. If this CSS code is not used then it’s unused CSS.
So basically, unused CSS is the CSS written in the stylesheet of the site but not used by the user to style the elements or part of the website. Since browsers download all the CSS files present on the page before rendering the content. If any CSS is present on the page that is not needed for the page, the browser will waste the time to download it.
The very basic example of unused CSS is contact form 7. Although it is used only on the contact us page the website will download it on all the pages. So if your home page or posts don’t use the contact form, the CSS will load and cause the page to slow down. Since plugins don’t have options to prevent this unused CSS to download on posts or pages, we have to remove it manually or by using a tool.
Why do you care about removing Unused CSS in the first place?
One of the obvious reasons to do this is to optimize your site speed and performance. You shouldn’t be here if you don’t want to accelerate your site speed. By removing unused CSS you can enhance page speed and provide a better user experience to your visitors.
Since almost all plugins load the resources on all pages and posts. When a visitor visits a page or posts on your site, their browser downloads all the CSS, it does not matter if your site uses it or not. This causes the site to slow down and impact user experience. Thus, to enhance the site speed and better user experience we need to prevent these CSS files from loading. This can be only possible by removing unused CSS from these files.
How to find out Unused CSS?
Before you remove the unused CSS from your site, you should know which CSS is not necessary and where it is present. The easiest way to find out the unwanted CSS on your site is using the coverage tab on Chrome dev tool.
Press Ctrl + Shift + I (or Cmd +Shift +I for mac users) or click the right mouse button and choose insect. Next click on settings icon > more tools > Coverage. Now reload the page and it will show all the CSS file reports on your screen. The blue colour shows the usable CSS and red shows unused. Further, click on links and find out which code is not usable.
Another easy approach to find the list of stylesheets with unused CSS is through Google PageSpeed Insight and Lighthouse.
How to remove Unused CSS?
There are multiple ways to remove unused CSS from your WordPress site. below are some solutions we suggest:
Asset CleanUp – I prefer to use the Asset CleanUp plugin to remove all the unwanted CSS from my site. It is free and easy to use. Install and activate the plugin. Next, go to plugin settings. To access plugin settings, click on WordPress Dashboard > settings > Assets CleanUp. Now unload all the unwanted CSS and Js from your site. To do this click on CSS and JS manager and unload all the CSS that you wanted to remove from your WordPress site.
What’s great about this plugin is that it allows the user to remove CSS for only the homepage, entire site or for a specific URL. You can remove CSS from any post, page or category. So take your time and carefully remove all the unwanted CSS from your site and boost your site speed with just a few clicks.
Here are some other useful plugins that you can use to do this job.
- Perfmatters – The addition of the Disable Javascript feature to this plugin means that it will significantly speed up your website. For example, emojis are loaded by default on every single page of your site. If you don’t utilize them, they’re just taking up space. By turning off the script, the system no longer loads it, so you’ll have fewer.
- CSS JS Manager – Allows you to remove unused CSS from the website completely or allows you to Defer it to the bottom of the page if you are not sure if its needed.
Clean the Style.css file
Another best practice to remove unused CSS from your site is by cleaning the style.css file on your theme to keep it concise and small in size. To do this, identify the unwanted CSS using the above tools and remove it from your style.css files.
Since it is a manual task I would recommend you to take a backup of your site before making any changes. If anything goes wrong you should have backup to sort out the problem. Here are some best WordPress backup plugins that you can use.
Use Critical CSS
Bonus – Generating critical CSS is a reliable way to render above the fold content of the web page. Generating critical CSS and defer non-critical CSS on your site. By doing this you can greatly increase your site speed and performance. There are several plugins available that can help to generate critical CSS on your site. Currently, I am using a WP Rocket and it works incredibly.
The Bottom Line
As explained earlier it is critical to remove unused CSS if you really want to boost your site speed and performance. It not only improves user experience on your site but also helps to rank higher on Google.
So check your site for unused CSS and boost your WordPress site speed by removing all the unwanted code from your site. Do it and you will notice a great improvement in your site speed and performance.
It is important to note that you can’t remove all the unused CSS from your site, but minimize it upto an extent. Use the above methods and let me know your precious feedback in the comment section below. I would love to hear from you.
Have any further queries, just drop a line in the comment section.
Need Help?
Know your websites slow and worried about Google reducing your visibility due to unused CSS issues scripts and other speed-related errors. Book in a call to talk to us today or book one of our free speed checks or paid speed audits.
