Remove Unused CSS

💡 Remove Unused CSS is the recommended method of optimizing your CSS. If you have trouble with this option, try Load CSS Asynchronously instead.

In this article

The Remove Unused CSS option addresses the PageSpeed recommendation:

The PageSpeed report will scan all your website’s stylesheets, and if it finds any CSS file with more than 2kb of unused code it will display this recommendation. 

Having unused CSS code will:

  • Increase unnecessary data transfer, 
  • Slow down the rendering of the page, as the browser will have to read all the CSS before applying it.

You can read more about this recommendation here:

Feature benefits

  • Reduce overall page size.
  • Reduce the number of CSS stylesheets to be loaded (fewer HTTP requests).
  • Reduce the page load time.
  • Improve Core Web Vitals
  • Eliminate render-blocking CSS

It accomplishes this by automatically: 

  1. Generating the Used CSS needed to render your website.
  2. Removing all the unused CSS.

Basic requirements for the feature to work

  1. Your site must be publicly accessible for the tool to work, which means it won't work on sites blocked from the public by htaccess authentication, "maintenance mode" plugins, or similar. It will work on locally hosted sites.
  2. The following IP has to be allow listed by your server, firewall, or security plugin :
  3. WP-CRON or a real server-side cron job must be able to run.
  4. If you are using Wordfence, activate Learning Mode as described here.

Feature overview

Remove Unused CSS is the recommended selection for Optimize CSS Delivery.

When you click the Remove Unused CSS button, used CSS will be generated for your website in the background and added to the HTML of each processed page.

Note: While the overall page size will decrease, the HTML response body size will increase. This is because Remove Unused CSS will add the used CSS as an inline element into the HTML document. In the end, Remove Unused CSS will decrease the total to download.

WP Rocket will collect all the stylesheets and scripts found on a page and send them to our external tool to process. The tool will pick anything that can be identified as a CSS selector. Later on, it will compare the HTML of the page with the selected data to match what CSS selectors are actually used on the page. Only matching CSS selectors will be preserved and saved as Used CSS. Used CSS entries will be saved in the Database.

Unused CSS will be removed from the HTML, and Used CSS will be added as inline CSS with the following markup:

<style id="wpr-usedcss">.css-class{example: 0;}</style>

HEADS UP! The process of generating the Used CSS is not immediate and may take time. It will depend on the service queue and complexity of your website. Please see Technical notes for details.

While the CSS is being processed, you will see a progress bar. During this time, you will not see an improvement in PageSpeed. In most cases we expect this to take a few minutes, but we will keep trying to process the files for up to 1 hour.

When the process has completed, you will see a confirmation message: 

At this point, you may run a PageSpeed test to see the benefits of this feature. 

When to clear Used CSS

When you make changes to stylesheets, or add/modify custom CSS via the WordPress Customizer (or a plugin), you should manually clear Used CSS via the WP Rocket toolbar menu:

When you clear the used CSS:

  • The existing used CSS is removed from the database.
  • New used CSS will be regenerated on the next visit to a page.

Used CSS will be automatically cleared for all pages:

  • When you switch themes;
  • CSS or JS file is added/removed from a page.

Used CSS will be automatically cleared for specific pages (i.e. partial regeneration):

  • when you delete or trash a post;
  • when post cache is cleared;
  • when a comment is added/removed;
  • when the post is not accessed for 1 month.

How to exclude files from this optimization / retain selected CSS rules on a page

Files and patterns can be excluded from the option by using the CSS Safelist text area on the settings page.

Any stylesheets and CSS selectors contained in the Safelist will automatically be added to the generated Used CSS.
For example, if a file is added in the text area and the file is present on the current page, its full content is added in the used CSS.
If you need to safelist a more complex CSS selector like the following one:
.projects_masonry_holder.portfolio_one_by_one {
css declarations here...

The correct approach would be to safelist all the classes in the selector, one per line, like this:


To safelist CSS attributes, e.g. title in the following example:

.my-class img[title="fancy image"] { ... }

you need to add it like this in the safelist text area:


Using Remove Unused CSS with Preload Fonts

When Remove Unused CSS is enabled, Preloaded fonts will be removed.

Technical notes

  • The process of generating the Used CSS may take some time. Once Used CSS generation started, the background process will use Cron to check every 30 minutes if there are any unprocessed CSS files. It will run 3 times. When all the retries are completed, all the unprocessed files will be added to the used CSS.
  • If, at the end of the Used CSS generation process, there is still unused CSS included, this means that the resource was not present when the process was initiated, or there were some errors related to the resource.
  • Separate Used CSS will be generated for mobile devices when Separate Cache Files for mobile devices option is enabled in the Cache tab.
  • In order to avoid stale content, Used CSS will be automatically cleaned and regenerated every 30 days.

Previous Versions

The following information only applies to WP Rocket 3.9

Using Remove Unused CSS with Optimize CSS Delivery

Optimize CSS Delivery and Remove Unused CSS features can be used together, but usually Remove Unused CSS by itself will provide the best performance.

When  Optimize CSS Delivery option is enabled WP Rocket will create a new file directory /wp-content/cache/used-css and it will store the Used CSS in a separate file in addition to the entry in the Database.

Used CSS will be added to the HTML as a separate stylesheet with the following markup:

<link rel="stylesheet" id="wpr-usedcss-css" href="">

After  Optimize CSS Delivery option is applied, the final markup in the <head> will look like the following one:

<link rel="preload" data-no-minify=""  href="" data-rocket-async="style" as="style" onload="this.onload=null;this.rel='stylesheet'">

When Remove Unused CSS is enabled, and Optimize CSS Delivery is disabled, Preloaded fonts will be removed.

Reduce Unused CSS recommendation is still present on PageSpeed Insights

For more information please check our article here.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.