Optimize CSS Delivery

In this Article

The Optimize CSS Delivery option addresses the PageSpeed recommendation:

Eliminate render-blocking resources

It accomplishes this by automatically: 

  1. Generating the critical path CSS needed to render the visible part of your website
  2. Loading all the other CSS files asynchronously, that is deferred, without render-blocking. 

How critical path CSS is generated

When you activate the Optimize CSS delivery checkbox, critical path CSS will be generated for your website in the background, and added upon the next page load. After that, CSS will be loaded asynchronously (i.e. without render-blocking) on your site.

Our external tool will fetch the first entry of each public post type (posts, pages, products etc.), as well as public taxonomy archive pages (categories, tags, product categories etc.). It will extract the critical path CSS for each of those page types separately, and send the code back to the WP Rocket plugin which will then add it to the respective pages as they are requested by a visitor, or the WP Rocket cache preloader.

The critical path CSS will be removed when the page has loaded. This should help prevent layout issues when a site injects JavaScript or updates the CSS classes after the critical path CSS has been applied.

The CSS is stored in the following folder on your server: /wp-content/cache/critical-css/

Relative paths in images and fonts will be automatically changed to absolute URLs. Critical CSS will be trimmed and minified with care. This means any required spaces (like inside of   calc() operations) or backslashes (like '\f311' for a glyph in an icon font) will be preserved.

If you see an admin error notice from the critical CSS generation, please consult our troubleshooting guide.

Mobile-specific critical path CSS

If you have activated the Separate cache files for mobile devices, option on the Cache tab, the plugin will generate 2 sets of critical CSS - one for desktop and one for mobile. This will happen automatically on new installations of WP Rocket, from 3.6 onwards.
If you were already using WP Rocket before  updating to 3.6,  with both Optimize CSS Delivery and Separate cache files for mobile devices activated, your site will continue to use the same critical path CSS for both desktop and mobile. If you want to opt-in to the new behavior and have separate critical path CSS for each, you can choose to enable this by going to the Tools tab and clicking the button:

This is a one-time action and then the button will be removed.
After that, whenever you regenerate the critical path CSS for your site, mobile-specific CPCSS will automatically be set.

How to generate critical path CSS for a specific page/post

If you have CSS on your pages that varies within content types and you need to generate specific critical path CSS for a particular page or post, you can do that from the edit screen for that content.

In the WP Rocket Options meta box, click the button: Generate specific CPCSS

The critical path CSS will be generated for that page. If you no longer need page-specific CPCSS you can remove it by clicking the button: Revert back to the default CPCSS

NOTE: If you see a 403 error when clicking the "Revert" button, it likely means a security feature on your site is blocking our REST API request.

How to check that Optimize CSS Delivery is working

1. In the Page Source look for: 

  • the rocket-critical-css style tag:

  • For each link to a stylesheet, the following attributes will be added:
  • rel='preload'
  • as="style" onload="this.onload=null;this.rel='stylesheet'"
  • data-rocket-async="style"

    So, a link like this:
    <link rel='stylesheet' id='twentytwenty-style-css' href='https://www.example.org/wp-content/themes/twentytwenty/style.css?ver=1.6' media='all' />
    becomes:
    <link rel='preload' href='https://www.example.org/wp-content/themes/twentytwenty/style.css?ver=1.6' data-rocket-async="style" as="style" onload="this.onload=null;this.rel='stylesheet'" media='all' />

    2. In PageSpeed, CSS files will no longer be listed as render-blocking

    When to regenerate critical CSS

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

    Critical CSS will be automatically regenerated when you: 

    • Enable the Optimize CSS delivery option
    • Switch themes

    Prevent automatic generation of Critical CSS

    You may prevent any automatic generation of critical CSS by installing the following helper plugin.

    📥   Download (.zip):  WP Rocket | No Auto-generated Critical CSS
    Developers: You can find the code for this plugin on GitHub.

For troubleshooting display issues related to this option, please see this guide

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