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 helps with the Eliminate render-blocking resources PageSpeed recommendation.

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. 

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.

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 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/

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.

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

Mobile-specific critical path CSS

Since the Mobile Cache option has a mobile-specific set of cache files, WP Rocket will generate 2 sets of critical CSS: one for desktop and one for mobile.

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:
• 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 should 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 Load CSS Asynchronously 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