You might have come across ‘Remove unused CSS’ warning when you analyze your site through Google PageSpeed Insights.
In this article, I’ll discuss what this problem is and how is it different from other speed optimization issues.
We’ll discuss the possible work-around to fix this warning/error called – Remove unused CSS.
Also, we’ll discuss why this warning becomes even more complex in WordPress? And how to fix unused CSS warning by cleaning up CSS.
Before we start removing unused CSS from stylesheets, let’s understand what is unused CSS and why is it there in the first place.
Table of Contents
- What is Unused CSS?
- Why you should remove ‘Unused CSS’
- Removing Unused CSS is not Straight-forward
- How to Remove Unused CSS from CSS/Stylesheet Files
- How to Remove Unused CSS in WordPress?
What is Unused CSS?
If you’re not using a custom theme/template, there are greater chances that you’re using a theme/template that is designed to offer several layouts and different HTML elements like:
- Full width
- Left sidebar
- Right sidebar
- Custom post types
- Search box
- Navigation menus
- Author bio
And what not!
When theme developers design a theme keeping in mind a large group of users who need different features, most of the developers write all the style codes in a single CSS file called styles.css.
The Unused CSS
The problem here is – regardless of what features/elements you use on your site, CSS code written for all the features/elements served to your visitors.
That’s the Unused CSS!
Unused CSS is the code written in stylesheet(s) of the website but not used/utilized to style any HTML element or part of the website. You can improve your website’s pagespeed performance by removing this unused CSS.
Why you should remove ‘Unused CSS’
The reasons to remove unwanted CSS are pretty obvious.
- It is unused and unwanted yet it is delivered to your users.
- Unused CSS use resources (bandwidth, server, etc.) for no purpose.
- It also contributes to the loading time (site speed) of your site. That means unused CSS pulls down your site speed.
The importance of site speed cannot be emphasized enough. The site speed can make or break your site. Therefore, you should cut every unwanted-thing off to make your site leaner.
Removing Unused CSS is not Straight-forward
Removing unused CSS is not that easy, here’s why.
Single CSS File
In most of the themes/templates, there is only one main CSS file. This single CSS file contains CSS code for all type of pages, elements, and layouts.
This causes the problem when you try to identify the unused CSS on a website.
When you test your homepage through the unused CSS detector tool, all the CSS that pertain to inner pages, layouts, elements will be detected as ‘unused’ by the tool. Which is kind of true for the homepage – since those CSS selectors/classes are not used on the homepage of your site.
But such CSS is not completely unused on your site.
That means you have to test your site for every possible page, layout, element that use unique CSS to detect all the unused CSS.
Sound tedious, right!
Dynamic Elements (JS Inserted CSS)
These classes (inside the JS) are not easy to detect and hence make it difficult to extract unused CSS correctly.
CSS inserted by plugins
Plugins, add-ons, and extensions, etc. can insert CSS in CMS like WordPress and others.
Ideally, CSS and JS should load only on those pages where they come in use.
Some WordPress plugins insert CSS (and JS) in all the pages of website regardless of their use on specific pages.
Such WordPress plugins contribute to ‘Unused CSS’. You can unload such unwanted CSS and JS on specific pages using a simple plugin. I’ll explain how to do that later in this article.
How to Remove Unused CSS from CSS/Stylesheet Files
This method is useful for HTML sites and websites without dynamic elements.
Before making any changes to your site code, take a complete backup. So that you can restore your site, if needed.
Step by step process to remove unused CSS:
- Choose one of the tools mentioned below.
- Generate used/unused CSS for your site.
- Remove the unused CSS from stylesheet files manually.
- Save changes.
- Test your site again to see changes.
Tools to detect unused/used CSS
You can use one of the following tools to find unused/used CSS on your website.
#1 Use Chrome Dev Tools: to find unused CSS
Following are the steps to find unused CSS:
- Open your website in an incognito tab of Google Chrome.
- Go to Chrome Developer tools by following Chrome Menu > Developer Tools. Or Press
Ctrl + Shift + Ion Windows (
Command + Shift + Ion Mac).
- Press Ctrl + Shift + P to run command. And
- Then type Coverage and click on Show Coverage.
- A coverage tab will open in DevTools indicating all the CSS files with their used/unused stats.
- Click on the CSS file to check used and unused CSS code visually. Where ‘red’ indicates unused and ‘blue’ (sea green) indicates used CSS.
- You have to check different page templates of your site to detect the unused CSS completely (or say up to a maximum extent). These page templates may be – home page, single page/post, archive page, search page, 404 page, and the list go-on depending on your site design.
You can easily find unused CSS using Google Chrome Developers tools as explained above.
#2 UnCSS Online
Unused CSS online is a free online tool that generates a minified version of used CSS.
You need to input your HTML and your CSS in the text areas designated for the same in order to generate a version of used CSS.
#3 CSS Used
CSS Used is a free Chrome extension that you can use to find out used CSS on a webpage. This extension is really easy to use.
All you need is to install the extension. And open your website in a new tab. Then open inspect element and select any DOM to see all css rules used by the DOM and its children.
Unused CSS is a SAAS (software as a service) tool. It identifies unused CSS on a website by scanning it. The tool also tells you how much savings you can do you by removing unused CSS on your site.
You need to add your website to their platform to start finding unused CSS. Once a website is added to unused CSS it will scan the website to find can you CSS.
Unused CSS is free to try but you need to pay a monthly fee to use their premium features like unlimited scans, scheduled optimizations, etc.
#5 Purify CSS
It is a free tool available on GitHub. This tool is quite useful for developers who want to remove unused CSS from their projects in the development and testing phase.
In case of frameworks like bootstrap, you can reduce up to 75% size of your CSS using purify CSS.
#6 Purge CSS
Purge CSS is also a good tool for developers to identify unused CSS in their projects/websites during the development phase itself.
PurgeCSS scans and analyses your content and CSS files to find out unused CSS. Once it finds unused CSS it removes the same from CSS files to make CSS files lean.
The downside is, it does not work with non-HTML pages such as PHP files.
How to Remove Unused CSS in WordPress?
#1 Choose a Lean WordPress Site Design
First thing first, install a lightweight WordPress theme.
A good theme not only helps you prevent unused CSS issue but also offers a lot of advantages over other heavy themes.
There are thousands of WordPress themes available for different types of website design (appearance and features).
But not all the themes ensure a better site speed.
So, if you care about site speed, I want you to choose a theme which is
- optimized for performance
- carefully designed and
- do not bloat your website with unwanted code
There are several good WordPress themes offered by professional developers.
I can easily recommend any of these three for site speed.
#2 Unload CSS from Specific Pages
You can unload unused assets (CSS and JS) from specific pages using a plugin called Asset CleanUp. This plugin is available for free on WordPress plugin repository. And you can use Asset CleanUp to Remove Unused CSS files from WordPress.
Step by step procedure to unload unused CSS (& JS) in WordPress:
- Install and activate the plugin.
- Go to plugin’s Settings > CSS & JS Manager.
- Under CSS & JS Manager, you can enable ‘Manage in the front-end’ to manage files from front-end for logged-in user (admin).
- If you have enabled ‘Manage in the front-end’ option, you’ll see all the assets on the front-end of the page when you’re logged-in to your WordPress. Otherwise, you’ll need to edit the post/page to see assets loading on a specific page.
- Now go to the page on which you want to unload css and/or JS.
- At the bottom of the page, you’ll see all the assets (css, JS files) loading on that page.
- From here you can unload a CSS file (or any other asset) from a specific page.
- And finally, click on ‘Update’ button to save changes.
- Now, re-test your site with a speed testing tool to see the changes.
#3 Clean style.css file
As I have mentioned above, you can clean style.css file of your theme to keep it lean and small in size.
This is a manual task. First, you need to identify the unused CSS and then you can remove it from your style.css file.
For this purpose, you can make use of Chrome Developers tool method which I have explained above.
If you are planning to do the same, I would suggest you first take a backup of your files/site. In case of WordPress, here are the best WordPress Backup plugins you can use for the backup of your site.
#4 Utilize Critical Path CSS
‘Use critical CSS and defer rest of the CSS.’
Critical CSS is the CSS that is necessary for rendering above-the-fold content of the web page. Generating critical CSS and deferring non-critical CSS can help improve First Meaningful Paint and First Contentful Paint of a website.
In WordPress, critical CSS can be used inline with a WordPress plugin. There are several plugins available that offer this feature. But few of them really stand out.
And Autoptimize and WP Rocket are two of such plugins.
You use critical CSS and defers all the non-critical css to improve above the fold content delivery.
#5 Use a Content Delivery Network (CDN)
You can use a CDN for delivery of CSS files. A CDN makes content delivery fast not just by delivering css files but also other static files of the website.
Use of CDN improves network latency and reduces server load and download time as well.
You can use a CDN like, StackPath CDN, BunnyCDN etc.
Here is a list of top CDN for WordPress.
Since you’re working on make your site load faster here is a bonus tip for you.
If you want to go an extra mile to optimize your site, I would recommend removing unwanted/less used css elements as well.
For starters, you can remove those fancy fonts from your site.
Yeah, they increase your site’s page size!
And you must use web-safe fonts instead.
Wondering? How can you remove fonts?
You can refer following guides that help you remove fonts from your site:
- Removing Google Fonts from WordPress Theme
- How to Remove Font Awesome from WordPress Theme
- How to Remove Dashicons from Genesis Theme
And this guide will help you implement web safe font on your site.
We have already discussed that removing unused CSS is not a straight forward task.
In WordPress, it becomes more really difficult to remove unused CSS completely. But you can still work on it to minimize the margin.
Therefore, you should focus on removing unused CSS as much as you can with the available resources.