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.
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.
Edit the generated Critical CSS
If you would like to edit the critical CSS generated by our tool, follow these steps:
- Use the tool to automatically generate critical CSS for your site.
- Disable automatic generation in the future by adding the helper plugin above.
- 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.
- 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:
- Turn off WP Rocket before you start using the tool!
- Enter your URL in the tool and copy the generated CSS into the Fallback critical CSS field in WP Rocket:
- Delete any existing files in the /wp-content/cache/critical-css/1 folder.
- Activate the "No Auto-generated Critical CSS" helper plugin (found above)
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:
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:
To ensure that your Fallback CSS continues to be used, and isn't overridden by our automatic generation you should also:
Exclude Files From Loading Asynchronously
If you need to exclude a specific CSS file from being loaded asynchronously, follow this guide: