Remove Unused CSS

🚀 Available from WP Rocket version 3.9!

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: https://web.dev/unused-css-rules/


Feature benefits

  • Reduce a page's overall size.
  • Reduce the number of CSS stylesheets to be loaded (fewer HTTP requests).
  • Reduce the page load time.

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 :
    • 135.125.83.227
  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

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

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 if the Optimize CSS Delivery feature is disabled:

<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 article.show {
css declarations here...
}
	

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

.projects_masonry_holder
.portfolio_one_by_one
.show
	

Using Remove Unused CSS with Optimize CSS Delivery

Optimize CSS Delivery and Remove Unused CSS features are fully compatible and can be used together. 

This combination should provide the best performance results, but it can vary from site to site. Make sure to run tests with different variations.

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="https://example.com/wp-content/cache/used-css/1/2aaf9402cc1ad1e9a7d59421beff9bf5/used.min.css?ver=1619100049">

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="https://example.com/wp-content/cache/used-css/1/2aaf9402cc1ad1e9a7d59421beff9bf5/used.min.css?ver=1619100049" data-rocket-async="style" as="style" onload="this.onload=null;this.rel='stylesheet'">

Using Remove Unused CSS with Preload Fonts

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

This can happen under specific conditions. For more information please check our article here.


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.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.