Remove Unused CSS In WordPress (And Why FlyingPress, LiteSpeed Cache, And Perfmatters Is Faster Than WP Rocket’s)

Reduce unused css wordpress

Let’s talk about removing unused CSS in WordPress.

First off, WP Rocket’s remove unused CSS feature is slower when compared to FlyingPress, LiteSpeed Cache, and Perfmatters because it loads used CSS inline instead of a separate file. In a nutshell, WP Rocket’s inline method is better for ‘scores’ but slower for real users, while the separate file method is faster for perceived performance. This is also confirmed by Perfmatters.

Now that we got that out of the way…

You can find your largest CSS files in the Chrome Dev Tool coverage report. Most often, the largest files are related to bloated themes, page builders, or plugins. While using lightweight themes/plugins is the obvious solution, there are other ways to reduce the size of your CSS files.

If you’re using Elementor/Divi, they have built-in performance like improved CSS loading and dynamic CSS which reduces CSS size. I also recommend coding your header/footer/sidebar in CSS when using page builders since it’s more lightweight than page builder code. FlyingPress and LiteSpeed Cache have options to lazy render HTML elements which is very helpful for your comments and footer. Then you have other settings in cache plugins such as minify/critical CSS.

 

1. Find Your Largest CSS Files

View your coverage report in Chrome Dev Tools and sort by “usage visualization” to see your largest CSS files. The URL usually includes the name of the plugin, theme, or third-party code where the file originates from. Now you’ll know what needs to be optimized without guessing.

Unused css chrome dev tools
Find your largest CSS files in Chrome Dev Tools → Sources → Coverage
Remove unused css wordpress
PageSpeed Insights doesn’t show all your CSS files

 

2. Remove Unused CSS With Used CSS In A Separate File

Many plugins let you remove unused CSS, but some load used CSS inline while others load it in a separate file.

Separate file is faster because it doesn’t increase HTML size and the file can be cached, unlike the inline method. This is explained in the Perfmatters documentation and by Vikas. LiteSpeed Cache’s unique CSS and FlyingPress also load it in a separate file. While pretty much every other plugin uses the separate file because it’s faster, WP Rocket is optimizing for scores over visitors.

Remove unused css wp rocket vs perfmatters vs flyingpress
Update: Perfmatters can now load used CSS in a separate file

Which means for best results, use FlyingPress, LiteSpeed Cache, or Perfmatters to remove unused CSS (not WP Rocket). This is one of many reasons why FlyingPress beats WP Rocket.

Flyingpress remove unused css
FlyingPress: separate file
Litespeed cache ucss
LiteSpeed Cache: separate file (unless UCSS inline is turned on)
Perfmatters remove unused css inline vs. File
Perfmatters: separate file (or inline)
Remove unsued css wp rocket
WP Rocket: inline only

The Debloat plugin also looks like a solid option with more advanced settings.

 

3. Avoid Plugins That Add CSS

View the URLs in your coverage report to see whether certain plugins add CSS.

Query Monitor and WP Hive are good tools, but they usually don’t show whether a plugin is adding extra CSS/JS to the frontend. Unfortunately, you will need to retest your website after using the plugin to add content to the frontend to see its full impact. Galleries, sliders, contact forms, comments, chat, calendar, and design-related page builder plugins are common culprits.

Elementor css

 

4. Use A Lightweight Theme + Page Builder

Use Gutenberg or Oxygen Builder, not Elementor or Divi.

They add too much CSS, JavaScript, and fonts to the frontend. Combine this with extra page builder plugins like Elementor Pro and Ultimate Addons and you’re asking for a slow website.

Here’s a test I ran on the fastest WordPress themes/page builders where I installed a similar starter template on each one, then measured the size of its CSS, JS, and fonts. Most tests just measure load times/scores which are different in each test, so this is a more accurate picture.

Fastest wordpress themes

My old Elementor site before I switched to GeneratePress (Blocksy and Kadence are good too).

Elementor source code

 

5. Enable CSS Optimizations In Page Builders

If you insist on using Elementor or Divi, there are a few ways to optimize them.

One of them is enabling Elementor’s experiments or Divi’s performance settings where you’ll find several settings to reduce the size of CSS (i.e. improved asset and CSS loading in Elementor, or dynamic CSS in Divi). Generally, the more performance you enable, the better results will be.

Elementor css optimizations

Elementor with without experiments font optimization

Divi performance settings

 

6. Disable Icons If You Don’t Use Them

If you don’t use Elementor icons, disable them. You can do this in Perfmatters or Elementor has a few solutions in their documentation which you can also do for Google Fonts + Font Awesome.

Disable elementor icons css

 

These appear across your entire site, so why would you use Elementor or Divi’s bloated page builder code when CSS is faster?

I hired WP Johnny to remove Elementor and replace it with Gutenberg. The first thing he did was hard code these and Elementor dropped from 2,000+ source code mentions to only a couple hundred. Johnny is busy/expensive so you can also try freelancer.com or upwork.com.

Wp johnny hardcode header footer service

 

8. Remove CSS In Asset Unloading Plugins

I mentioned Perfmatters which has settings to remove unused CSS, replace YouTube iframes with a preview image, and disable CSS/JS (or entire plugins) where they don’t need to load. All of which can help remove unused CSS. Although Asset CleanUp can disable CSS/JS files as well.

Step 1: Install Perfmatters and activate the script manager.

Perfmatters activate script manager

Step 2: View any page on your site, click “script manager” in the top menu, and enable test mode. You can also “display dependencies” to see what the files belong to (i.e. a certain plugin).

Perfmatters test mode

Step 3: Go through each CSS/JS file and disable specific files (or entire plugins) where they don’t need to load. For example, you may be able to disable contact form plugins everywhere but contact page, social sharing plugins everywhere but posts, and comments everywhere but posts. It depends where plugins are being used and whether they load JS/CSS across your site.

Disable plugins perfmatters
Example: disable your social sharing plugin everywhere but posts

 

9. Lazy Load Background Images Found In CSS

If background images are loaded in a separate CSS (like Elementor background images are), most cache plugins won’t lazy load them and you may see errors for defer offscreen images.

You need to check your cache plugin’s documentation for instructions on lazy loading background images. WP Rocket requires you to move them to inline HTML while FlyingPress includes a lazy-bg helper class which you can add to the additional CSS class (shown below). Optimole has a solution using CSS selectors or you could manually add a lazy-bg helper class.

Elementor lazy bg css class
Use the lazy-bg helper class to lazy load background images or move these images to inline HTML

 

10. Remove Gutenberg CSS

If you don’t use Gutenberg blocks, you can dequeue the block library (otherwise block-library/style.min.css loads across your site). Add this to functions.php or with Code Snippets.

<?php
// Fully Disable Gutenberg editor.
add_filter('use_block_editor_for_post_type', '__return_false', 10);
// Don't load Gutenberg-related stylesheets.
add_action( 'wp_enqueue_scripts', 'remove_block_css', 100 );
function remove_block_css() {
wp_dequeue_style( 'wp-block-library' ); // Wordpress core
wp_dequeue_style( 'wp-block-library-theme' ); // Wordpress core
wp_dequeue_style( 'wc-block-style' ); // WooCommerce
wp_dequeue_style( 'storefront-gutenberg-blocks' ); // Storefront theme
}

Gutenberg css
 

11. Minify CSS

Minifying CSS strips unnecessary characters from CSS files, making them smaller.

Minify css

 

12. Combine CSS (Or Not)

WP Johnny suggests not combing unless your total CSS/JS size is about 10KB or lower. Since this is almost impossible, the majority of websites should not combine either CSS or JavaScript.

Css js files sizes

 

13. Replace YouTube Iframes With A Preview Image

Embedded YouTube videos add CSS/JS from the YouTube player.

Most cache plugins can replace the iframe with a preview image so the fat YouTube player is only loaded when someone clicks the play button. Or you can use the WP YouTube Lyte plugin.

Reduce unused css youtube

Wp rocket replace youtube iframe preview image

 

14. Use CSS Removal Tools

There are also dedicated 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 combined, purified, and minified CSS file.

Purifycss 2

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.

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

 

15. Disable WooCommerce Styles

By default, WooCommerce loads styles across your website. If you only use these styles on eCommerce pages, you can disable them everywhere else. WooCommerce has documentation but I recommend Disable WooCommerce Bloat which has a lot more settings for bloat removal.

Disable woocommerce scripts styles

 

Frequently Asked Questions

How do I remove unused CSS in WordPress?

The easiest way to remove unused CSS is by using lightweight plugins, page builders, and themes that don't add CSS in the first place. Some speed plugins have CSS removal tools while page builders have CSS optimizations like Elementor Experiments. Perfmatters also has several features to reduce CSS.

How do I remove unused CSS using WP Rocket?

WP Rocket minifies CSS and replaces the YouTube iframe with a preview image to prevent CSS from the YouTube player. However, their CSS removal tools loads used CSS inline which is slower for visitors compared to loading it in a separate file which can be cached.

How do I remove unused CSS using Autoptimize?

Autoptimize can only minify, combine, 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 and avoid bloated themes/plugins.

Cheers,
Tom

You Might Also Like:

8 thoughts on “Remove Unused CSS In WordPress (And Why FlyingPress, LiteSpeed Cache, And Perfmatters Is Faster Than WP Rocket’s)”

  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?

    Reply
    • 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 :)

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

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

      Reply

Leave a Comment