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.

Removed Unused CSS WordPress

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

11. Unload Custom CSS With Asset CleanUp Pro

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.

Asset CleanUp Pro

 

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.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments