Remove Unused CSS In WordPress (And Why You Shouldn’t Use WP Rocket For It)

The “remove unused CSS” setting in optimization plugins is just one way to reduce CSS.

WP Rocket’s remove unused CSS is slower than FlyingPress, LiteSpeed Cache, and Perfmatters. This is because WP Rocket loads used CSS inline which is better for scores but slow for users, while loading used CSS in a separate file method is faster for users, but slightly worse for scores.

You can also remove CSS by disabling Gutenberg when using page builders, coding your header/footer in CSS (instead of using page builders), and unloading plugins on specific pages.

However,

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.

 

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.

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.

 

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.

 

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.

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

 

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.

 

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.

 

7. Code Your Header/Footer/Sidebar In 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.

 

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.

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

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.

 

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.

 

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
}

11. Minify CSS

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

 

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.

 

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.

 

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.

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.

 

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