Load CSS Asynchronously
We recommend Remove Unused CSS as the method for CSS optimization. Load CSS Asynchronously should only be used if there is an issue with Remove Unused CSS.
Additionally, Load CSS Asynchronously cannot be enabled at the same time as Remove Unused CSS.
The Load CSS Asynchronously 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.
Note: This feature is automatically disabled on environments where the
WP_ENVIRONMENT_TYPE constant is set to local, because it needs to establish connection with WP Rocket's tool to generate the Critical Path CSS.
In this Article
How critical path CSS is generated
When you activate the Load CSS Asynchronously option, 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 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.
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 Load CSS Asynchronously 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 Load CSS Asynchronously 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.