How to Remove Unused CSS Properly + WordPress Fix (Possible?)

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.

Fastest WordPress Hosting Anywhere!

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.

How to Remove Unused CSS Properly
How to Remove Unused CSS Properly

Before we start removing unused CSS from stylesheets, let’s understand what is unused CSS and why is it there in the first place.

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
  • Tables
  • Search box
  • Forms
  • 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.

For example:

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)

Consider a scenario, where a JavaScript is used to trigger/launch a dynamic page element like search box, overlay notifications, etc. In such case JS may contain CSS classes and other HTML tags that are used for dynamic elements.

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:

  1. Choose one of the tools mentioned below.
  2. Generate used/unused CSS for your site.
  3. Remove the unused CSS from stylesheet files manually.
  4. Save changes.
  5. 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

Chrome Dev Tools to find unused CSS
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 + I on Windows (Command + Shift + I on 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.

UnCSS Online to remove unused CSS
UnCSS Online to remove unused CSS

UnCSS Online Link

#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.

CSS Used Chrome Extension to find used CSS
CSS Used Chrome Extension to find used CSS

CSS Used Link

#4 Unused-CSS

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.

Unused-CSS Link

#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.

Using purify CSS you can remove unused CSS from HTML PHP JavaScript and CSS files. It does not make changes in the original CSS files by itself. Rather you need to create a new file CSS file.

In case of frameworks like bootstrap, you can reduce up to 75% size of your CSS using purify CSS.

Purify CSS Link

#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.

Purge CSS Link

#7 UnCSS

UnCSS is another to remove unused CSS from stylesheets. It can detect JavaScript-injected CSS as well.

The downside is, it does not work with non-HTML pages such as PHP files.

UnCSS Link


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.

Few of them are Astra, GeneratePress, and Genesis, etc.

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.

Asset CleanUp Plugin Link

#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.

Bonus Tip:

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:

And this guide will help you implement web safe font on your site.


Conclusion

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.

Cheers!

Photo of author
Shashank Singh
Shashank is a web addict and amateur blogger. His current interests include blogging, SEO, and WordPress. See his social profiles to know him even better.
Disclaimer: Affiliate links of some product(s) are being used on this page, if you follow the link and make a purchase, we may receive compensation from respective companies. This compensation comes at no additional cost to you.

4 thoughts on “How to Remove Unused CSS Properly + WordPress Fix (Possible?)”

  1. Avatar of AstroTalk

    Great article, thank you for writing this.
    We reduced unused CSS on our site using tools and methods mentioned by you.

    Reply
    • Avatar of Shashank Singh

      Hi
      I am that folks at AstroTalk are following/reading our stuff.
      Thanks for dropping by!

      Reply
  2. Avatar of James

    After reading this post, I am able to remove unused css form my website. Thanks for sharing.

    Reply
    • Avatar of Shashank Singh

      Hey James
      I am glad I could help.
      Thank you for dropping by!

      Reply

Leave a Comment

Your email address and website details will not be published. Required fields are marked with *.