Table of Contents

At WP Rocket, we’re committed to consistently making our product more powerful and simpler. We want to offer our Rocketeers the best plugin ever for performance and simplicity – and never stop improving it. 

We also know which optimizations can make a difference in your site performance and which ones are challenging to address. Removing unused CSS is one of them. Unused CSS can hugely affect loading time and crucial performance metrics, including Largest Contentful Paint and First Contentful Paint. By removing or reducing CSS, you’ll get the opportunity to dramatically improve your PageSpeed Insights score and make your site faster.

That’s why WP Rocket 3.11 focuses on a brand-new Remove Unused CSS feature that will help you achieve your performance goals easier.

Keep reading and find out what the improved feature means for your performance results. You’ll learn how WP Rocket 3.11 will give your site’s speed an extra boost – and there’s more to come!

What’s New in WP Rocket 3.11 

WP Rocket 3.11 focuses on the Remove Unused CSS revamp from three angles: availability, performance, and compatibility. The new Remove Unused CSS remains in beta for now, but we already have a timeline for it – read until the end of the article to learn more about it.

When downloading our new major release, you’ll benefit from the following aspects:

  • Better availability – Remove Unused CSS comes with the asynchronous methodology to prevent the service from being down when optimizing your CSS delivery. As a consequence, you’ll also find something slightly different in the UI.
  • Better performance – This new release introduces a significant change in the way we handle the Preload Font feature when removing unused CSS. You should see a positive impact on your scores whether or not you were using Remove Unused CSS before!
  • Better compatibility – If you’re worried about potential Remove Unused CSS bugs and how long it would take to fix them, this is for you.

You can watch our video or jump to the next section to learn more about the changes and how you’ll take advantage of each of them to optimize your site’s performance.

What Better Availability Means

WP Rocket 3.11 comes with the Remove Unused CSS built again from scratch. Why? Because empathy and humility are two of our core values — and we stick to them. 

Since we launched Remove Unused CSS with WP Rocket 3.9, we haven’t been able to get rid of the beta mode yet. We weren’t satisfied with the feature itself and how it was working. The availability wasn’t good, and the service was often down. Therefore, we decided to rebuild the feature and switch from the synchronous method to the asynchronous one. The asynchronous mode will cache the page, make an API call and generate the used CSS after 60 seconds.

This methodology switch is a game-changer for two reasons:

  1. You will benefit from better availability. In other words, you won’t be stuck any longer when WP Rocket tries to generate the used CSS. You will generate Used CSS for 100 URLs every 60 seconds.
  1. The asynchronous method opens the possibility for many new enhancements we could never think of when using the synchronous methodology. We’ll now be able to work on new powerful features happening at the same time we process the used CSS, relying on API calls. Consider the new Remove Unused CSS a sneak peek of WP Rocket’s future!

The switch in methodology has also an impact on the way the CSS optimization process is presented in the user interface.

Until WP Rocket 3.10, the Remove Unused CSS option would show you how the CSS process was going:

Remove Unused CSS – WP Rocket 3.10

During the CSS process, it wasn’t possible to track any potential improvements in PageSpeed Insights until the CSS process was completely done. In addition, the CSS optimization could take up to several hours and still not work because of the overloaded server. These were critical issues that were not only preventing customers from improving their performance but also not worthy of the product we wanted to offer. That’s why we worked hard on addressing them.

First off, the asynchronous methodology and the new server infrastructure will prevent overloads and dramatically reduce the issues faced in the past. Once the homepage has been processed (count 90 seconds) the CSS optimization process will be done in batches for the rest of your pages – every 60 seconds. It means that you don’t have to wait until the process is fully completed to measure your performance improvements. Every 60 seconds, you’ll benefit from the ongoing CSS optimization and you’ll see it reflected in the PageSpeed Insights audit right away.

What makes this change more straightforward than ever is the count-down timer that you’ll find in WP Rocket 3.11.

When enabling the Remove Unused CSS option, on top of the page, you’ll find a timer saying how long it takes for the feature to process your homepage.

Remove Unused CSS counter

Once the homepage is done, you’ll get a new message about the Remove Unused CSS process going on across your entire site: 

Remove Unused CSS - Updated information about the process
Remove Unused CSS – Updated information about the process

If you haven’t enabled the Cache Preload yet, you’ll see a message recommending you activate the option. 

As in the previous version, when you check the “Activate Preloading” and the “Activate sitemap-based cache preloading” options, you avoid waiting for a user to visit a page to generate the used CSS. 

This will fasten the creation of the used CSS for the whole website.

Preload cache - WP Rocket
Preload cache – WP Rocket

We highly recommend using Remove Unused CSS and cache preload together because you’ll get two correlated benefits:

  1. You’ll dramatically reduce the CSS size.
  2. As a result, you’ll improve your PageSpeed Insights score, as well as your Core Web Vitals grades.

We ran several tests with some of the most popular page builders. We enabled the new Remove Unused CSS feature and tracked the improvements. As you can see, the CSS saving is huge, and it will have an impact on the overall performance:

Page Builder used with WooCommerceCSS Before (KB)CSS After (KB)CSS Savings %
Elementor924113-88%
Beaver Builder 73387-88%
Gutenberg55464-88%
Visual Composer820115-86%
Divi 1,262303-76%

The CSS saving is not just for the sake of it. We can see how such enhancements can bring better performance results.

We built a testing site using Elementor and Astra. We activated WP Rocket and enabled LazyLoad. We ran an initial PageSpeed Insights test and got a 67 grade.

PageSpeed Insight Score - WP Rocket activated + LazyLoad
PageSpeed Insight Score – WP Rocket activated + LazyLoad

Then, we ran another test after enabling the Delay JS feature. The overall performance grade improved a lot, but the score didn’t go green, nor did some of the Lighthouse metrics: 

PageSpeed Insight Score - Delay JS activated, Remove Unused CSS not enabled
PageSpeed Insight Score – Delay JS activated, Remove Unused CSS not enabled

We finally enabled Remove Unused CSS and ran a third test. Our PageSpeed Insights score got a 94 grade, and the First Contentful Paint and the Largest Contentful Paint got a green score, too. 

PageSpeed Insight Score - Delay JS + Remove Unused CSS enabled
PageSpeed Insight Score – Delay JS + Remove Unused CSS enabled

What’s New for Performance

This new major release also changes how the Preload fonts feature works. Until WP Rocket 3.10, when the Remove Unused CSS was on, the plugin would ignore the information included in the Preload Fonts tab. 

Now, there’s an important change. When activating the Remove Unused CSS option and generating the used CSS, WP Rocket automatically identifies all the fonts and preloads them automatically. Why? Because according to our tests, sites can get better PageSpeed Insights scores.

Take a look at the results of our tests and see yourself how the overall performance grade and the specific metrics improve thanks to the Preload Fonts option:

Scenario #1 – Remove Unused CSS activated without Preloaded fonts

PageSpeed Insights - Remove Unused CSS activated without Preloaded fonts

Scenario #2 – Remove Unused CSS activated with Preloaded Fonts

PageSpeed Insights - Remove Unused CSS activated with Preloaded Fonts

What Comes with a Better Compatibility

This major release is not only about delivering a new UI and better availability for Remove Unused CSS. If you tried the previous Remove Unused CSS feature and came across any issues or bugs, you should know that WP Rocket 3.11 has better compatibility and accuracy. 

In plain English, WP Rocket 3.11 automatically fixes 90% of the known Remove Unused CSS issues. The remaining and new ones can be fixed easily without requiring a minor WP Rocket version. That’s a big step forward, right?

How Long Will the Beta Version Last?

We bet you’re wondering how it will go with the Remove Unused CSS beta version. Soon said: we will keep it for 3 or 4 weeks to check our server at full scale. Our goal is to have the Remove Unused CSS option working without any issue in 95% of cases. Since it’s such a powerful feature, we aim to activate Remove Unused CSS by default in the near future.

Of course, we’ve got you covered. Being a Rocketeer, you’ll get an email when we remove the beta version.

Wrapping up

WP Rocket 3.11 comes with a powerful new-brand Remove Unused CSS feature that will allow you to optimize CSS delivery without being worried about bugs or issues that take time to get fixed. 

Thanks to the new Remove Unused CSS and the Font Preload, you’ll boost your site speed and optimize the Lighthouse performance metrics – no need to worry about anything! 

Thanks to the changes made in this major release, it will be possible to develop new amazing features that will make performance optimization easier and faster. Ready to see what the future holds for WP Rocket?


Comments (18)

Sounds great, looking forward to trying the remove unused CSS feature now - nice work!

Hi, it will work with Flatsome theme?
In the past we have some problems with dynamic css ID.

This is fantastic. Keep up the great momentum on fleshing out such a great product. Good job WPRocket & team!

would suggest that you check as well with the popular WP page builder Flothemes.com as I can not use the CSS optimization with that. So would be great if you could check that out too,

Thanks

I've just enabled it on my site that's using cloudflare and I hope this will not give any problem. Have you any feedback about that? My theme is Astra Pro.

I tried the features before and after the new release and many of the issues have been fixed. My page score has improved from 63 to 82 on mobile (95 and up on Desktop), but I had to uncheck "minify CSS".
I must say a special "thank you" to the support team, now everything is very fast
Massimo - https://www.massimobasso.com with Newspaper theme (TagDiv)

Good evening by activating remove css beta the site is faster but I do not see the images, this happened to me at the beginning then up to two days ago remove css beta it was fine now I do not activate it because you do not see images on the site there is a solution or no thanks again

Hi,

This "remove unused CSS" feature breaks all the animations you setup in Elementor.

Had to deactivate it.

Hope you fix it.

I have tried out the Remove Unused CSS Beta already several times, with previous WP Rocket Versions and with the current one. While this feature is very powerful and promising, it is still not working properly with my Website, based on The7 Theme.
There are always different issues with things not working correctly - with this version, I have problems with the menu bar not collapsing properly on mobile devices. Unfortunately I have not managed to figure out, how to find out, which CSS have to be safelisted.

Latest Articles of Inside WP Rocket
Subscribe to Our Newsletter

Stay in the loop with the latest WordPress and web performance updates.
Straight to your inbox every two weeks.

Get a Faster Website
in a Few Clicks

Setup Takes 3 Minutes Flat
Get WP Rocket Now
{"cart_token":"","hash":"","cart_data":""}