Optimize CSS Delivery

In this Article

The Optimize CSS Delivery option addresses the PageSpeed recommendation:

Eliminate render-blocking resources

WP Rocket makes it as convenient as possible to handle advanced performance optimizations like asynchronous/deferred CSS and critical path CSS.

How critical path CSS is generated

Heads up! The critical CSS tool does not yet generate mobile-specific CSS. If you have a responsive theme, the critical CSS should be mostly the same, but if you have a separate mobile theme we cannot generate the CSS for that yet.

When you activate the  Optimize CSS delivery setting 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 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.

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.

Thus, critical CSS generated by WP Rocket adheres to front-end features available on different types of pages on your website.

For example, if there’s a slider on your front page, the critical CSS for that page will reflect that feature, while critical CSS for a blog post may contain slightly different code.

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

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.

Edit the generated Critical CSS

If you would like to edit the critical CSS generated by our tool, follow these steps:

  1. Use the tool to automatically generate critical CSS for your site.
  2. Disable automatic generation in the future by adding the helper plugin above.
  3. The generated CSS files are stored on your server: wp-content/cache/critical-css 
    If you are a developer and understand CSS, you may edit those directly.
  4. Clear the WP Rocket cache

Fallback Critical CSS

In cases where our tool cannot generate critical CSS, you can use the fallback field to specify your own. This will be applied in any case where the critical CSS does not already exist. To generate the necessary CSS you can use this  Critical Path CSS Generator tool:

  1. Turn off WP Rocket before you start using the tool! 
  2. Enter your URL in the tool and copy the generated CSS into the Fallback critical CSS field in WP Rocket:
  3. Note: You do not need any JavaScript snippet provided by the tool. Just copy the CSS into WP Rocket’s settings, it will take care of the JS part automatically.

    Heads up! You may have to edit any relative URLs in the code (e.g. for background images, fonts etc.) and turn them into absolute URLs manually.

    For example, if the generated CSS contains a relative reference to a font, like this:

    @font-face{font-family:droid_serifregular;src:url(../DroidSerif-webfont.eot);
    	

    The relative path (indicated by  ../ in the URL) will not be correct when removed from its original context. Therefore you need to replace it with the absolute, correct path, for example:

    @font-face{font-family:droid_serifregular;src:url(http://example.com/wp-content/themes/neutro/font/droid_serif_regular/DroidSerif-webfont.eot);
    	

    To ensure that your Fallback CSS continues to be used, and isn't overridden by our automatic generation you should also: 

  4. Delete any existing files in the /wp-content/cache/critical-css/1 folder.
  5. Activate the "No Auto-generated Critical CSS" helper plugin (found above)

Exclude Files From Loading Asynchronously

If you need to exclude a specific CSS file from being loaded asynchronously, follow this guide: 

Exclude files from Async CSS

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