Remove Unused CSS

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

In this article

The Remove Unused CSS option addresses the PageSpeed recommendation:

Reduce Unused CSS 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 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 removing all the unused CSS, and keeping only the used CSS for each page.


Basic requirements for the feature to work

  1. You must have a valid WP Rocket license.
  2. 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. 

    Note: This feature is automatically disabled in environments where the WP_ENVIRONMENT_TYPE constant is set to local, because it needs to establish a connection with WP Rocket's tool to generate the Used CSS.
  3. WP Rocket will reach the non-cached version of the page to scan the CSS. The non-cached page shouldn't take more than 15 seconds to load, or it will time out in WP Rocket's SaaS.
  4. The following IPs have to be allow-listed by your server, firewall, or security plugin :
    • 141.94.254.72
    • 141.94.252.17
    • 51.178.134.82
    • 135.125.180.130
    • 141.95.202.69
    • 162.19.138.231
    • 162.19.73.17
    • 141.94.133.225
    • 141.94.134.63
    • 15.235.11.139
    • 15.235.14.231
    • 15.235.50.215
    • 15.235.50.217
    • 15.235.82.194
    • 15.235.82.233
    • 2001:41d0:306:2ab4::/64
    • 2001:41d0:306:2611::/64
    • 2001:41d0:403:5c58::/64
    • 2607:5300:203:a613::/64
    • 2607:5300:203:a5d3::/64
    • 2607:5300:203:a8c2::/64
    • 2607:5300:203:a8e9::/64
    • 2607:5300:203:b03e::/64
    • 2607:5300:203:988b::/64
    • 2607:5300:203:9ed7::/64
    • 2001:41d0:307:1100::/56
    • 2001:41d0:403:3b52::/64
    • 2001:41d0:700:4e82::/64
    • 2001:41d0:306:1b45::/64
    • 2001:41d0:700:6ae7::/64
    • 2001:41d0:203:b0e1::/64
    • 2001:41d0:203:b13f::/64
    • 2607:5300:203:9be7::/64
    • 2607:5300:203:9ed9::/64
  5. WP-CRON or a real server-side cron job must be able to run, the latter is strongly recommended for the Used CSS generation to run properly.
  6. If you are using Wordfence, activate Learning Mode as described here.
  7. Cloudflare's Bot Fight Mode should be disabled.

Feature overview

Remove Unused CSS in the settings

The external tool will process the information and will generate the Used CSS, which corresponds to the CSS that is actually used in your pages.

HEADS UP! The process of generating and applying the Used CSS is not immediate, it's asynchronous.

The homepage will be processed automatically. Additionally, when  Separate cache files for mobile devices is enabled, the mobile-specific homepage will be processed automatically as well.

Other pages will need a visit to trigger the Used CSS generation and further application.

The generation and application of the Used CSS in your site goes as follows:

Used CSS generation and application

Except for the homepage, a visit to a non-cached page, either manual or from the Preload, will start the Used CSS generation and application process. 

The URL of each page is sent to our API which will visit the URL and will create the used CSS for that.

WP Rocket will check every 60 seconds with the API to find which of the URLs that were sent have used CSS created for them.

For the ones that used CSS has been created for, WP Rocket will:

  1. Store the Used CSS in the server's disk, at the /cache/used-css/1/ folder. If you use WordPress Multisite, the folder named /1/ will change to reflect the site number.

    The resulting CSS will be compressed with the GZIP compression algorithm. The Used CSS files stored on the disk will have the .css.gz extension
  2. Clear the cache of the URL and preload that if the "Preload" feature is active.
  3. Remove all stylesheets and inline CSS from the HTML, and add the Used CSS as an inline CSS element after the </title> tag.

    The <style> tags will be preserved in the source code for compatibility but their content will be removed except for the ones that are automatically preserved.

For URLs that used CSS hasn't been created, WP Rocket will retry up to 3 times to check if the used CSS has been generated.

If it hasn't after 3 times, WP Rocket will retry to generate the used CSS when:

  1. The used CSS for a specific URL is cleared using the "Clear Used CSS of the URL" admin bar menu item while visiting the URL in the back end.
  2. The whole used CSS is cleared using the "Clear Used CSS" admin bar menu item while visiting WP Rocket's settings page.
  3. Whenever the Automatic clearing of Used CSS takes place.

How to check if Remove Unused CSS is working

You should see the following markup in your page's source code:

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

The <style> element with an id  wpr-usedcss will contain the resulting Used CSS for the page. 

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

Note: While the overall page size will decrease, the HTML response body size may 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 overall page size.

You can also jump to the Technical notes section of this article to get detailed information about this asynchronous approach.

Progress and admin notices

After activating Remove Unused CSS you will see an admin notice with a countdown and the following text:

WP Rocket: please wait 52 seconds. The Remove Unused CSS service is processing your pages.

Countdown admin notice

Once the homepage is completed, Remove Unused CSS will keep processing and generating the used CSS for all the other pages on your site, in groups of up to 100 URLs per 60 seconds.

The following message will appear on WP Rocket's settings page:

WP Rocket: Your homepage has been processed. WP Rocket will continue to generate Used CSS for up to 100 URLs per 60 second(s). We suggest enabling Preload for the fastest results. To learn more about the process check our documentation.

Homepage processed admin notice

Please note, that while the Remove Unused CSS feature will be ready to work for your other pages when this notice is shown, only a visit to the pages will trigger the generation and later application of Used CSS. This is why using Preload is highly suggested. See more of how Remove Unused CSS works with Preload in the following section of this article.

You will see the admin notices in the scenarios below: 

  • Adding or removing values in the CSS Safelist box
  • Switching themes
  • Clearing the Used CSS
  • Changing the Enable CDN options 
  • Updating WP Rocket

Using Remove Unused CSS with Preload

Enabling the Preload feature is highly recommended to have a more practical application of Remove Unused CSS, as it will automate some steps during the process.

When the Preload is active, it will simulate a visit to your pages creating the cache files, and will trigger these actions:

  • Trigger the Used CSS generation.
  • Apply the resulting Used CSS to the page.

Above's actions happen when you first enable Remove Unused CSS and when the Used CSS is cleared.

Note: the Preload will trigger Used CSS generation only for pages that aren't cached when it runs. For the rest of the pages, Used CSS generation will run when their cache is cleared and then preloaded or visited.

Therefore, you could clear the whole site's cache and run the Preload after you first enable Remove Unused CSS or when you've cleared the Used CSS.  For really large sites, you might want to avoid overloading your server and prefer to wait as eventually all pages will have the chance for the Used CSS to be generated through WP Rocket's automatic cache clearing.  

If the Preload is not enabled, for a non cached page a visit will be required to trigger Used CSS generation. Once the used CSS is created, the cache of the page will be automatically cleared. The Used CSS will be added to a cache file, the next time there is a visit to that page.

You can also see more details in the Technical notes section of this article.


Using Remove Unused CSS with Separate cache files for mobile devices

If the Separate cache files for mobile devices feature is enabled, WP Rocket will create mobile-specific Used CSS as well as Used CSS for the desktop. Both CSS files will be stored on the server's disk in /cache/used-css/.


Using Remove Unused CSS with Preload Fonts

When Remove Unused CSS is enabled, the Preload Fonts feature will be disabled.

Instead, found fonts in the resulting Used CSS will be preloaded and inserted into the page before the CSS block. 

Additionally, the   display=swap property will be applied to the fonts in the resulting Used CSS.

Please note, font-families which are loaded on a certain action after page load, won't be added to the resulting Used CSS. Only fonts loaded directly on page load are preserved in the Used CSS block, the ones you can see in the Network tab in  Developer Tools.

If you need this, you can use the following snippet to disable the Used CSS fonts from being preloaded:

add_filter( 'rocket_enable_rucss_fonts_preload', '__return_false' ); 

You can add this code as shown here.

Alternatively you can install the following helper plugin for that purpose:

📥  Download (.zip):  WP Rocket | Disable Used CSS Fonts Preload
Developers: You can find the code for this plugin on GitHub.


Using Remove Unused CSS with Combine CSS files

When Remove Unused CSS is enabled, the Combine CSS files feature will be automatically disabled and will appear greyed out on WP Rocket's settings page.

This is because the resulting used CSS block will replace any existing CSS files, including the combined one. 


Using Remove Unused CSS with the Divi theme

WP Rocket's  Remove Unused CSS is compatible with Divi's Critical CSS

However,Divi's  Dynamic CSS will be automatically disabled when Remove Unused CSS is enabled because they're not compatible.


Automatic clearing of Used CSS

Used CSS will be automatically cleared (i.e. full Used CSS clearing) for all pages when:

  • Switching themes
  • Changing the items added to the CSS safelist text area
  • Updating WP Rocket from a version prior to 3.11

Used CSS will be automatically cleared for specific pages (i.e. partial Used CSS clearing) in the following scenarios:

  • Editing a post/page
  • Clearing a post/page cache
  • Editing/deleting terms
  • When the comment count changes

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:

Clear Used CSSOr using the Clear Used CSS of this URL button in the top bar for a specific post:

Clear Used CSS for URL

When you clear the Used CSS the existing Used CSS is removed from the disk and the cache will be cleared. 

The new Used CSS will be:

  • regenerated on the next visit to the page and
  • applied to the page on a subsequent visit.

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.

Safelist box

Any stylesheets and CSS selectors contained in the safelist will be added next time the Used CSS is generated.

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.

Multiple CSS selectors

If you need to safelist a complex CSS selector like the following one:

.projects_masonry_holder.portfolio_one_by_one article.show { css declarations here... }

You can safelist all the classes in the selector, like this:

.projects_masonry_holder.portfolio_one_by_one article.show

You can also use wildcards before and/or after the selectors, as shown below:

(.*).show(.*)

Beware as using wildcards can result in too much safelisted CSS.

Finally, you can add one CSS selector per line, like this:

.projects_masonry_holder
.portfolio_one_by_one 
#pop-up

CSS attributes

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:

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

Fonts

To exclude a font you can use the @ followed by the font family's name.

For example, for:

@font-face{font-family:swiper-icons;src:('http://example.com/font/myfont.tff')}

you should add the following to the CSS safelist box:

@swiper-icons

Note: The combination of CSS/JavaScript from other plugins/themes needs to be disabled because the safelisting process uses the original CSS and JavaScript files as conditions to set the automatic safelist.


Troubleshoot

If the Used CSS is not generated/applied to your page, please check the Troubleshoot Used CSS generation issues guide.

And, if the Remove Unused CSS is breaking your site's layout, you can follow the Toubleshoot Remove Unused CSS issues article.


Technical notes

  • The process of generating and applying the Used CSS is asynchronous, as follows:
    • Used CSS Generation requires a first visit to the page, either by the Preload or a visitor.
    • A cron will check every 60 seconds if the used CSS for the URLs that were sent to the Used CSS generator is ready.
    • The action scheduler handles the asynchronous tasks after the visit. You may see the rocket_rucss_job_check_status hook in the main Scheduled Actions dashboard.
    • The rocket_rucss_pending_jobs cron event will trigger the processing of pending used CSS generation jobs.
    • You can see more information in this article.
  • In order to avoid stale content, Used CSS will be automatically cleaned and regenerated every 30 days.
  • The resulting Used CSS will be stored in the server's disk, at the /cache/used-css/1/ folder; and the Used CSS hash in the wpr_used_css table.
  • The specific path where Used CSS is stored depends on its hash.

    Example: for a hash such as a92f2f40a719d9df1fffad70a63f1c1a the path and filename of the used CSS file will be:

    /cache/used-css/1/a/9/2/f2f40a719d9df1fffad70a63f1c1a.css.gz

    There are 3 subfolders, each one named after the first 3 letters of the hash: a, 9 and 2. The rest of the hash is used as the file's name: f2f40a719d9df1fffad70a63f1c1a
  • There will be one Used CSS entry for each cached page in the site. However, features like WebP Compatibility or Separate cache files for mobile devices will have their own Used CSS entry as well.
  • One used CSS file can be shared by multiple URLs if they have the same used CSS content. They will have the same hash value in the database.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.