How To Remove Unused CSS In WordPress (PageSpeed Insights Item)

Want to remove unused CSS in WordPress for better PageSpeed Insights scores?

Removing unused CSS can be done using asset loading plugins like Asset CleanUp or Perfmatters, CSS removal websites, and even using specialized CSS removal plugins. However, a good way to remove unused CSS is to avoid plugins and builders with heavy CSS to begin with.

Heavy CSS and JavaScript can affect multiple items in PageSpeed Insights. Reducing their file sizes can both improve scores for “removing unused CSS” as well as other items in PageSpeed Insights. Google’s core web vitals put a heavy emphasis on optimizing both CSS and JavaScript. Perfmatters and Asset CleanUp are asset unloading plugins to remove unused CSS/JavaScript.

Removed Unused CSS WordPress

Usage - Chrome Dev Tools
Find your largest CSS files in the Chrome Dev Tools → Sources → Coverage

 

1. Remove Unused CSS In WP Rocket

The easiest way to remove unused CSS is with WP Rocket.

The remove unused CSS feature is found in the file optimization settings when you enable “optimize CSS delivery.” This is an automatic process where WP Rocket does the following:

WP Rocket will collect all the stylesheets and scripts found on a page and send them to our external tool to process. The tool will pick anything that can be identified as a CSS selector. Later on, it will compare the HTML of the page with the selected data to match what CSS selectors are actually used on the page. Only matching CSS selectors will be preserved and saved as used CSS. Used CSS entries are saved in the Database.

Remove unsued CSS WP Rocket

Once the process is done, it will say it’s complete.

Remove unused CSS WP Rocket

 

2. Remove Unused CSS In LiteSpeed Cache

If you’re using LiteSpeed Cache, generating unique CSS (UCSS) in the Page Optimization CSS settings will remove unused CSS. This is a QUIC.cloud service, so you will need to generate a domain key before using it. You will also need to turn CSS Combine on in order to generate UCSS. After enabling this, you should turn on cache mobile since UCSS is different on mobile and desktop, then purge the cache. Obviously you will also need to be using a LiteSpeed host.

Remove Unused CSS LiteSpeed Cache

 

3. Remove Unused CSS In Asset CleanUp Or Perfmatters

Asset CleanUp and Perfmatters are popular plugins for removing CSS in WordPress.

Choose A Plugin To Remove Unused CSS

Asset CleanUp is free while Perfmatters is paid, but the UI/UX is better. Asset CleanUp has a pro version that lets you unload custom CSS (step 11) while the free version and Perfmatters do not. I wrote a comparison on Perfmatters vs. Asset CleanUp – but I personally use Perfmatters.

Activate The Script Manager

If using Perfmatters, enable the script manager in the settings. There are also settings for removing bloat, browser resource hints, and other settings that can improve speed. If using Asset CleanUp, enable Test Mode in the settings which lets you test removing CSS without it breaking your site. Perfmatters does not have a test mode so you will either need to create a staging site or check your site for visible errors after unloading each CSS file (trial and error).

Remove CSS Where It Doesn’t Need To Load

Some plugins, page builders, and CSS files load across your entire WordPress site. If some files are only being used in specific areas of your site, disable them everywhere else. Depending on which asset loading plugin you use, you can disable CSS files everywhere except current URLs, posts, pages, disable them on a single URL, or use regex to disable CSS files using URL patterns.

Examples:

  • Disable contact form plugin on pages that don’t have a contact form.
  • Disable affiliate link management plugin on pages that don’t use aff links.
  • Disable social sharing plugin on all pages (since it’s usually for blog posts).
  • Disable unused functionality in your page builder (see this post for Elementor).
Remove Contact Form JavaScript
Disabling contact form everywhere but contact page in Asset CleanUp
Remove Unused CSS Elementor
Removing unused Elementor CSS in Perfmatters
Disable Plugins Perfmatters
Disabling social sharing plugin everywhere but posts In Perfmatters

If you need to unload CSS that is hardcoded (non-enqueued), Asset CleanUp Pro lets you do this while the free version of Asset CleanUp (and Perfmatters) do not.

Asset CleanUp Pro also lets you change CSS location to HEAD/BODY as well as unload CSS on other pages such as taxonomies, author, search, WooCommerce search, 404, and date archives.

 

4. Generate Critical CSS

If you’re using WP Rocket or another cache plugin, you’ve probably seen an option to optimize CSS delivery (or similar).

This generates critical path CSS and loads all other CSS asynchronously without render-blocking. While it might not actually  help remove CSS, it can help with delivering it faster.

Sometimes, enabling CSS delivery causes FOUT (flash of unstyled text) and contributes to cumulative layout shift (CLS). If this happens to you, you will want to try the follow solutions:

  • Enable optimize CSS delivery.
  • Check for “rocket-critical-css” in your source code to make sure it’s working.
  • If it’s not working, regenerate critical CSS in WP Rocket and page builders (if using one).
  • Scan your website using PurifyCSS.
  • Download the combined, purified, and minified CSS.
  • Paste the code into your cache plugin (fallback critical CSS).
  • Exclude files from CSS delivery using WP Rocket’s helper plugin.
  • If those don’t work, Gijo Varghese’s FlyingPress plugin has great reviews.

Remove Unused CSS - PurifyCSS

WP Rocket fallback critical CSS

 

5. Use CSS Removal Tools

There are plenty of free online tools to remove unused CSS.

PurifyCSS – free CSS removal tool. Add your website, click “clean up CSS” with minify output turned on. Once the scan is complete, download your combine, purified, and minified CSS file.

Unused-CSS – freemium CSS removal tool. You can run a page through the tool and it tells you much CSS will be removed (and the percentage of CSS selectors used). You will need to give them your email and sign up for a paid plan if you want to download the CSS for your entire site.

UnusedCSS - Remove Unused CSS Tool

UnCSS – more tedious CSS removal tool which requires you to copy/paste your HTML and CSS into their tool and download it. KeyCDN says it’s more accurate than PurgeCSS since it looks at actual web pages rather than individual files but is also slower and requires more manual set up.

UnCSS - Remove Unused CSS Tool

 

6. Inline Critical CSS And Defer Non-Critical CSS

Autoptimize and Async JavaScript often does a better job at optimizing CSS and JavaScript than cache plugins, including WP Rocket.

WP Rocket lets you minify/combine CSS and optimize CSS delivery (to generate critical CSS and inline it). However, Autoptimize can yield even better results than WP Rocket – as it did for me.

Install Autoptimize then enable the settings to optimize/aggregate CSS and JavaScript files. Next, install Async JavaScript and click “apply defer” in the settings. If you retest your site, you may see improved scores not only for removing unused CSS, but render-blocking issues as well.

Optimize Aggregate JavaScript CSS

 

7. Minify And Combine CSS

Minify CSS should almost always be enabled and strips unnecessary characters from CSS files, making them smaller.

Whether combining CSS files is beneficial is debatable, but WP Johnny suggests enabling this for smaller sites and disabling it for large sites. You should enable it on your site and test results.

If you’re using Autoptimize to minify CSS (called “optimize CSS” in the settings), this should be disabled in your cache plugin. WP Rocket does this automatically when enabled in Autoptimize.

Minify Combine CSS

 

8. Serve CSS From A CDN

If you’re using a CDN, make sure CSS files (and other assets) are being served from the CDN. Sometimes, CDNs don’t automatically rewrite assets so they’re being served from the CDN. A CDN Rewrite can make sure they are. This can be enabled in Perfmatters or WP CDN Rewrite.

Without CDN:
https://example.com/style.css

With CDN:
http://cdn.example.com/style.css

 

9. Disable WooCommerce Styles On Non-eCommerce Pages

By default, WooCommerce loads styles across your entire website.

If you only use these styles on eCommerce pages, you can disable them everywhere else. WooCommerce has documentation, or use Perfmatters or Disable WooCommerce Bloat.

Remove-WooCommerce-CSS

 

10. Avoid Heavy Page Builders

Heavy page builders (specifically Elementor and Divi) add lots of extra CSS to your site.

At minimum, consider hard coding your header, menu, footer, and blog sidebar. You can still use your page builder to design other content, but these areas load across your entire website and can significantly improve PSI scores. Hard coding is much more lightweight than page builders.

I hired WP Johnny to remove Elementor and replace it with Gutenberg. The first thing he did was hard code these and I immediately saw an improvement. If you want to remove Elementor or Divi all together, popular alternatives are Oxygen Builder, GeneratePress, and Gutenberg.

Just to give you an idea of everything loaded with Elementor (Divi’s no better):

Elementor Scripts 1

 

11. Avoid Plugins That Inject CSS

Some plugins (forms, sliders, and others) inject CSS that loads across your entire site.

Review this list of slow plugins to avoid or use tools like Query Monitor to find your slowest loading plugins. The WP Hive Chrome Extension lets you browse the WordPress repository while viewing whether a plugin causes high memory usage or has a significant impact on PageSpeed Insights. Install the extension and it adds a section to the right of the plugin info.

 

12. Remove Unused CSS With RapidLoad

RapidLoad is a premium plugin developed by the Autoptimize team.

To my knowledge, it’s the only fully automated plugin that removes unused CSS in WordPress. The only reason it has negative reviews is because people install it thinking it’s a free plugin, but then get prompted to buy a subscription. Otherwise, there are little to no complaints about it.

Download the plugin, buy a subscription, and the plugin will do the rest. It will automatically process each URL. On average, RapidLoad removed about 80% of the CSS for all my content.

RapidLoad Power-Up for Autoptimize

 

Retest Your Site For Unused CSS

Run your WordPress site through PageSpeed Insights or Lighthouse and check for remove unused CSS errors. Hopefully this guide helped you optimize it enough to finally pass the audit.

Removed Unused CSS WordPress - Passed Audit

 

Frequently Asked Questions

How do I remove unused CSS in WordPress?

Removing CSS can be done using an asset loading plugin, CSS removal websites, minification, and combination. Avoid WordPress plugins and page builders with lots of CSS.

How do I remove unused CSS using WP Rocket?

WP Rocket minifies and combines CSS files. It also optimizes CSS delivery which generates critical path CSS and loads other CSS files asynchronously without render-blocking.

How do I remove unused CSS using Autoptimize?

Autoptimize can minify, aggregate, inline, and defer CSS files. Their RapidLoad extension is specifically for removing unused CSS.

How do I remove unused CSS without a WordPress plugin?

If you don't want to use a WordPress plugin to remove CSS, use a CSS removal website like PurifyCSS or Unused-CSS.

Cheers,
Tom

About Tom Dupuis

Tom Dupuis 2017Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.

6 thoughts on “How To Remove Unused CSS In WordPress (PageSpeed Insights Item)

  1. Thank you so much for all the useful guides for speed optimization. I’ve been following your website for two years and I’ve learned so much!

    I have a small question. I’m using Cloudways hosting (like you do). I have Breeze and Asset CleanUp Pro enabled for optimization. I also want to remove unused CSS like you just mentioned. I was interested in RapidLoad but you say it need Autoptimize to work.

    I’m planning on moving from Asset CleanUp Pro to Perfmatters. Will I need to use Perfmatters, Autoptmize and RapidLoad together? Will there be any issues if they are used together? I was also using WpRocket but I recently noticed that it didn’t improve my website performance that much and its not that cheap yearly. So I want to continue with Breeze, Perfmatters and maybe RapidLoad. What would you suggest?

    1. I’m currently using WP Rocket, Perfmatters, Autoptimize, and RapidLoad (pretty much the same setup you mentioned). No issues but you know they can affect sites differently. May want to create a staging site just in case.

      Perfmatters can’t unload custom CSS btw, so if you’re doing that in Asset CleanUp you won’t be able to do it in Perfmatters.

      Overall though, I think that’s a solid setup. RapidLoad is monthly pricing… use it, see whether it improves, and decide from there. Seems like a pretty new plugin with not too many reviews, that’s why I said that. Thanks for following my blog for so long btw :)

  2. Hi Tom, just wanted to pass along my thanks for your recommendations. Regarding point #1: I’ve since tried them both. I found Asset Clean Up a little more complex than I was prepared for (the free version). My coding knowledge is somewhere between beginner and whatever comes after beginner. So, I researched the other you recommended: Perfmatters. As I later told the author, Mr. Jackson, the plugin’s absence from the WP depository was intriguing – there is NO free version! To me, that signals the authors’ confidence in their product. Plus, it’s very affordable. After reading your article (and the comparison post you wrote), I purchased the Perfmatters subscription. Like you said, it “is more user friendly.” The Perfmatters’ UI explained, in simple, non-condescending language, what each function does and how it could affect one’s site. If one makes a mistake, it can easily be undone (for most of the functions). Anyway, long story short: I was able to bring my levels up from the 20’s and 30’s to the mid-90s and above. It took me about a day of experimenting and tweaking, but the plugin is performing flawlessly. Perfmatters is by-far the best purchase I’ve made for my site. As I continue to go through each page, meticulously making the required changes, I love watching the Lighthouse circles go from red, to yellow, to green. So thanks again for the tip! In closing, I have a question. Do you have any recommendations for unused css removal tools? I’m looking for something affordable that won’t break my site. And one that doesn’t require in-depth knowledge of NPM installations and Ruby, etc.

    1. Hey Nick,

      That’s awesome news. I would say Perfmatters/Asset CleanUp are probably the best tools for removing unused CSS/JS, but you can also look into RapidLoad and PurifyCSS. RapidLoad is a premium plugin by the Autoptimize team and all automatic. I use it on my site to at least test it out. Maybe you can test it for a month, see if it helps, then keep or delete it. Didn’t break my site but then again, I would always take a backup.

Leave a Reply

Your email address will not be published.