Optimize CSS Delivery
In this Article
The Optimize CSS Delivery option addresses the PageSpeed recommendation:
Eliminate render-blocking resources
It accomplishes this by automatically:
- Generating the critical path CSS needed to render the visible part of your website
- 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 CSS is stored in the following folder on your server: /wp-content/cache/critical-css/
Some modifications to the code will be made:
- 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.
Font-facerules will be removed in order to improve the Largest Contentful Paint metric
- On pages where this option is active, fonts will not be preloaded, to improve Largest Contentful Paint.
Mobile-specific critical path CSS
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:
- Enable the Optimize CSS delivery option
- Switch themes
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' />
<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:
Prevent automatic generation of Critical CSS
You may prevent any automatic generation of critical CSS by installing the following helper plugin.