How To Remove Unused CSS In WordPress (By Removing Bloat + Using Speed Plugins)

Reduce unused css wordpress

This post loads just 13.9KBs of CSS. But this was after avoiding, optimizing, and removing it.

Removing unused CSS starts with avoiding bloated plugins/page builders. Or by optimizing them with “performance settings” and disabling plugins on specific pages. Leftover CSS can be removed using optimization plugins (while excluding conflicting files). Font icons + Gutenberg CSS can also be disabled when not in use.

Perfmatters handles several of these. You can also use a cache plugin (like LiteSpeed Cache or FlyingPress) with Asset CleanUp. Other cache plugins like WP Rocket can’t do several of these, in which case I recommend using it with Perfmatters. WP Rocket also optimizes CSS for scores over real users, so make sure you pick the right tools to build and optimize your WordPress site.

 

1. Find Large CSS Files

Open a Waterfall chart (like GTmetrix) or Chrome Dev Tools’ coverage report to see what loads large CSS files. In this case, you’ll see Elementor, Elementor Essentials plugin, WooCommerce, Gutenberg (block-library), and font icons. PageSpeed Insights only shows CSS files with “high potential savings” while this shows you all of them. You can do the same thing with JavaScript.

Unused css chrome dev tools
Find your largest CSS files in Chrome Dev Tools → Sources → Coverage

 

2. Avoid Bloated Page Builders + Plugins

In the chart above, over 50% of files are Elementor or an Elementor plugin.

If you require a page builder, it’s key to avoid bloated plugins like many of those extending design functionality (like Essential Add-ons). Here’s a list of common slow plugins, but check your own report. You’ll also want to optimize your page builder using steps 3-8 of this tutorial.

Fastest wordpress themes
View test
Elementor source code
My old Elementor site before I switched to GeneratePress (Blocksy and Kadence are good too).

 

3. Enable Dynamic CSS In Page Builders

Most page builders have performance settings that only load CSS when it’s used.

In Elementor Experiments, it’s improved asset/CSS loading. In Divi, it’s dynamic CSS. Other settings can also reduce CSS, JavaScript, and font sizes (like dynamic icons). Read what each one does – you don’t want to enable duplicate settings in optimization plugins (like critical CSS).

Elementor css optimizations

Divi performance settings

 

4. Remove Gutenberg’s CSS When Using Page Builders

If you don’t use Gutenberg, remove the CSS file (block-library/style.min.css).

Gutenberg wp block library css 1

You can do this with FlyingPress’ bloat removal settings:

Flyingpress disable gutenberg block editor css

Or dequeue the block library by adding the code to functions.php (or use 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
}

 

Instead of using page builders or plugins for your header/footer, why not use CSS?

It’s more lightweight and they appear across your site. Sure, you will need a developer like WP Johnny or BDKamol to do this. But when I did, “Elementor” dropped from 2,000+ mentions to only a couple hundred in my source code. I can tell you the lightweight CSS is definitely worth it.

Wp johnny hardcode header footer service

 

6. Use Less Widgets + Columns

By using less page builder widgets/columns, you’re reducing CSS.

Elementor layout

This is a nice video on it (main part starts at 3:23):

 

7. Disable Unused Icons

Don’t use icons that come with your theme/builder? Disable them. You can use Perfmatters or Elementor has solutions in their docs which you can also do for Google Fonts + Font Awesome.

Disable elementor icons css

 

8. Disable Plugins On Pages They’re Not Used

Some plugins load across your site, even on pages/posts they’re not used.

Page builder and WooCommerce plugins often do this. By disabling them where they’re not used, you’re reducing CSS/JavaScript. If you’re already using FlyingPress, you can see Asset CleanUp (free). Otherwise, I recommend Perfmatters which can also remove unused CSS, replace YouTube iframes with a preview image, and disable plugins with the script manager.

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. Remove Unused CSS In Your Optimization Plugin

Many optimization can “remove unused CSS,” but not all are the same.

FlyingPress, LiteSpeed Cache, and Perfmatters all load used CSS in a separate file which is faster for real users. WP Rocket loads used CSS inline which is slower for users and increases HTML size. This is explained in the Perfmatters documentation, LiteSpeed Cache, and by Vikas.

Wp rocket used css

Whichever optimization plugin you use, you’ll need to exclude incompatible CSS files. Check your plugin’s documentation to exclude certain files from Elementor, Divi, and other themes + plugins. This step is important, otherwise the “remove unused CSS” setting can break your site.

Remove unused css elementor

 

10. Lazy Load CSS Background Images

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.

Check your page builder (or cache plugin’s) documentation on how to lazy load background images. Elementor can lazy load backgrounds under Experiments. FlyingPress has a lazy-bg helper class you’ll add to the additional CSS class. WP Rocket makes you move them to inline HTML in order to be lazy loaded. Optimole has a solution using CSS selectors. Check the docs!

Perfmatters lazy load css background images

 

11. Replace YouTube Iframes With A Preview Image

Embedded YouTube videos add CSS from the YouTube player.

Most cache plugins replace the iframe with a preview image so the fat YouTube player is only loaded when someone clicks the play button (you can also use the WP YouTube Lyte plugin). However, I recommend FlyingPress since it can also host YouTube placeholder images locally.

Reduce unused css youtube

 

12. Disable WooCommerce Styles On Non-eCommerce Content

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

 

13. Minify CSS

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

Minify css

 

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

 

Frequently Asked Questions

How do I remove unused CSS in WordPress?

Besides using lightweight page builders/plugins, you can remove unused CSS with page builder performance settings, by disabling plugins on pages/posts they're not used, and removing unused CSS with WordPress optimization plugins. Leftover CSS files should be removed if you're not using them (such as font icons and Gutenberg's block library CSS).

How do I remove unused CSS from Elementor?

To reduce Elementor CSS, activate improved CSS/asset loading in Experiments, then remove Elementor bloat (like unused font icons, widgets/columns, and Gutenberg's CSS). Avoid installing bloated Elementor plugins to overextend design functionality which often load large CSS files on every page. Consider coding your header + footer in lightweight CSS.

How do I remove unused CSS using WP Rocket?

WP Rocket's settings can remove unused CSS, minify CSS, and replace YouTube iframes with a preview image. However, it can't remove most bloat from page builders and plugins.

How do I remove unused CSS using Autoptimize?

Autoptimize can minify, combine, inline, and defer CSS. Their RapidLoad extension can remove unused CSS, but several optimization plugins already do this with more features.

Which WordPress plugin is best for removing CSS?

FlyingPress, LiteSpeed Cache, and Perfmatters are ideal plugins for removing unused CSS. Unlike WP Rocket, all 3 have an option to load CSS in a separate file (instead of inline). This is faster for real users since the separate file can be cached and doesn't increase HTML size.

How do I remove unused CSS without a plugin?

If you don't want to use a WordPress plugin to remove CSS, use a CSS removal tool like PurifyCSS, then remove bloated page builders + plugins if they're adding large CSS files.

Cheers,
Tom

You Might Also Like:

10 Comments...

  1. Hi,
    Great post, some updates, perfmatters has a function to Lazy Load Background Images, Elementor 3.9 also can Lazy Load Background Images.

    Does Wp Rocket’s remove unused css( not critical css) use inline or file?

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