Table of Contents
“Remove unused CSS” (or the latest: “Reduce unused CSS”) is one of the PageSpeed Insights recommendations you’ll likely get when testing your site speed.
You’ll then read the PSI explanation: “Remove dead rules from stylesheets and defer the loading of CSS not used for above-the-fold content to reduce unnecessary bytes consumed by network activity.”
In plain English, it means that some CSS files affect your site loading time — and you should address the issue to improve speed.
In this article, you’ll learn what unused CSS means and how you can remove or reduce it and optimize your site for speed and performance — manually and with a plugin.
First, watch our video!
What Unused CSS is and Why It Makes Your Site Slower
Unused CSS are stylesheets completely useless for rendering and loading the page — yet, they’re included in the page’s code. If you remove all of them, nothing will happen. The page will be displayed correctly above and below the fold.
At the same time, unused CSS affects the page’s loading time. If they’re on the page, the browser has to download, parse, and render them — and it takes some time.
This is especially true for the CSS above the fold — that’s the essential content on the page, and it should be rendered as fast as possible. A fast rendering means that the most relevant content will be displayed fast, and users can start interacting with the page quickly.
That’s also why you should remove or reduce all the unused files that slow down the site and don’t provide a good user experience.
And there’s more.
The Impact of Unused CSS on Performance
Unused CSS affects loading time and specific metrics such as the Largest Contentful Paint (LCP) and the Total Blocking Time (TBT).
Both LCP and TBT play a crucial role in the PageSpeed Insights score: each of them holds 25% of the final PSI score. What’s more, the upcoming change in Lighthouse v8 will make Total Blocking Time even more critical — TBT will account for 30%. LCP and TBT will have a total of 55% weight on the PSI grade.
On top of that, Largest Contentful Paint is also one of the Core Web Vitals, and it may also affect SEO performance.
Here’s why it’s crucial to tackle the unused CSS issues and fix them.
As an additional performance benefit, removing unused CSS will reduce the number of HTTP requests and give another boost to your site speed.
How to Find the Unused CSS Files
The most common tools to identify unused CSS are PageSpeed Insights and the Coverage tab in Chrome DevTools.
Finding Unused CSS via PageSpeed Insights
By testing your page’s URL on Google’s page speed tool, you’ll get the performance score and the PageSpeed recommendations to address.
If the page has any unused CSS to remove (or reduce), you’ll find an orange or red flag under the Opportunities section, alongside the CSS files.
Finding Unused CSS via Chrome DevTools
Another way to identify unused CSS is through the Coverage tab in Chrome DevTools.
After opening the Command Menu and selecting the Show Coverage command, you can analyze the Coverage tab.
You’ll find all the files running on the page’s code, including CSS.
As you can see in the screenshot above, the table contains helpful information, such as the file type and the related unused bytes weight (with a pretty helpful percentage).
It’s then easy to identify and prioritize the unused files to manage.
| 💡 Want also to tackle unused JS? Learn how to remove unused JS files on our dedicated article! |
How to Remove Unused CSS Files on WordPress
Now the question is: how do you remove or reduce unused CSS on your site? You can do it both manually or with a plugin.
How to Remove Unused CSS Files Manually
The manual way requires some technical knowledge.
If you want to remove unused CSS entirely, you can use a tool such as PurifyCSS to find out how much CSS file size can be reduced. Once you get the CSS code you should eliminate, you have to remove it manually from the page.
If you want to deep dive into a manual solution, you can read the CSS-tricks in-depth article.
On the other hand, if you want to reduce the unused CSS impact, you can use an asset management plugin like Asset CleanUp. Be aware that such a plugin will only remove the unused stylesheets. It won’t remove the unused code from the non-unused stylesheets. So, the PageSpeed Insights recommendation won’t go away.
| ⚠️ These tools may still not be 100% accurate — and making the process very precise is tough. It’s always best to custom code the site and use only CSS code present on the page. |
How to Remove Unused CSS Files With a Plugin: An Easy Way
Removing unused CSS with a plugin is the simplest way to optimize your WordPress site with no effort.
WP Rocket offers a powerful feature that allows you to tackle unused CSS in one click. You only need to enable the option below, and the plugin will remove the unused CSS included in the HTML of the page. It’s an effective way to reduce page size and page load time.
You’ll find the option in the File Optimization tab:
As you can see, the feature is easy and straightforward. You only have to enable the option to start optimizing your WordPress site performance. No effort or technical knowledge is required!
| 💡 We wrote an in-depth article on critical CSS and CSS delivery: take a look! |
4 Additional Performance Tips
Removing or reducing unused CSS can be tricky, and choosing the best WordPress caching plugin can surely help you.
There are a couple of performance optimization tips to always keep in mind, and that will also come in handy to minimize the unused CSS impact:
- Choose a lightweight and lean WordPress theme — if you’re not sure about the one to choose, check out our list of the fastest free WordPress themes.
- Prioritize using themes and plugins with modular CSS inclusion (only load necessary code to style their modules or output on the page).
- Minimize as much as possible the number of plugins that add a lot of code on the front-end.
- Use assets control plugins to remove unnecessary CSS files from bloated themes and plugins.
Start Removing Unused CSS Right Now
Removing unused CSS will help you minimize the impact of code on performance — and WP Rocket can quickly help you speed up your site and fix any performance issues with no effort!
Not a WP Rocket customer yet? Save yourself time and let WP Rocket do the job for you. WP Rocket is the easiest way to improve your PageSpeed Insights score.
You can always count on our 100% money-back guarantee. Although we don’t think you’ll ever want one, we’ll gladly provide a refund if you request it within 14 days of purchase.
🚀 The only risk you’ll be taking with our plugin is speeding up your website. WP Rocket automatically applies 80% of web performance best practices, instantly boosting your Core Web Vitals scores.
