Note: For further information on Google PageSpeed Insights and why you should not bother chasing a “grade” please read this docs article:
Google PageSpeed Grade does not Improve
In this article
Therefore it is recommended to delay (“defer”) the loading of non-critical files until the browser is done rendering the page. This requires adjustments to the HTML source of a page itself, as well as intimate knowledge of which file is required at what point during the rendering process. Sounds tricky? It sure is!
Nonetheless, tools like Google PageSpeed Insights makes it sound so easy:
Like many of PageSpeed Insights’ suggestions, this one is quite generic, and can be hard to implement—even with a streamlined plugin like WP Rocket!
WP Rocket has 2 options to address the PageSpeed recommendation:
- Optimize CSS delivery
By enabling these options you may see an improvement in your performance grade on GTmetrix, Pingdom Tools, and Google PageSpeed Insights. Results will vary from site to site. Always remember to test the effect on the speed of your site.
Optimize CSS delivery
This option addresses the PageSpeed recommendation:
Optimize CSS delivery
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.
How critical CSS is generated
WP Rocket makes it as convenient as possible to handle advanced performance optimizations like asynchronous CSS and critical CSS.
When you activate the Optimize CSS delivery setting checkbox, critical 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 critical 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
Troubleshooting critical CSS generation errors
Basic requirements for the generation tool to work:
- Your site must be publicly accessible for the tool to work, that means it won't work for locally hosted sites or sites blocked from the public by htaccess authentication, "maintenance mode" plugins or similar.
- These IPs have to be whitelisted by your server, firewall or security plugin :
- WP-cron or a real server-side cron job must be able to run.
If it’s not possible for our tool to generate the critical path CSS for any content type on your site, you will see a notice with the details.
Some errors can be temporary, so it’s worth trying the generation again. If the issues persist, please proceed with the troubleshooting below.
If you get any error message on every content type (see screenshot below as an example), it’s likely our tool is being blocked by your site. Please make sure your site is publicly accessible and our IP addresses have been whitelisted in any security plugin or firewall.
Find which URL is accessed per content type
Our tool accesses the most recent URL for each content type on your site. If you see an error for a specific content type, you can find out which specific URL is being accessed:
- Install and activate this helper plugin: WP Rocket | CPCSS Debug Helper
- Go to: Settings > CPCSS Helper
- There you will see which URL we’re accessing for each content type
- Visit the problematic URLs to check if they are valid pages.
Invalid response code
Our external tool sends a request to a page on your site. If it does not receive a 200 “OK” response, you will see an error with the response.
The most common reasons are:
- The URL is not publicly accessible, e.g. it 404s
- A security layer on your site is blocking access - this often results in a 400 or 403 error.
This error notice will display the specific URL(s) that the tool cannot access.
- Visit the URL in your browser to ensure it’s accessible.
- If it is, it’s likely being blocked by a security firewall or plugin, so please whitelist our IPs.
- If the URL results in a 404 error, or any other error prevents it displaying in your browser, that means our tool will not be able to reach it either.
- Resolve the issue with that page and try the generation again.
- If it’s for a post type that has not been declared to be public, it will not work. Some post types are not designed to be visible on the front end of your website. For example, post types that manage affiliate links. A post type may be used to manage each link, but they are not viewable as a webpage since they redirect elsewhere.
No valid stylesheets available
You could see this message if:
- There aren’t any stylesheets added within <link> tags.
- The linked stylesheets are empty
- There’s only Inline CSS on your site. The tool does not use existing inline CSS when generating the critical path since it could result in duplicated CSS.
CloudFlare protection prevents the service from accessing the website
- Whitelist the IP addresses of our tool in Cloudflare (or any other similar firewall service)
An error prevents the generator from retrieving its contents
Sometimes this error can be temporary, try it again.
If the error persists it could be related to a timeout on the page:
- There’s a 30 second timeout on specific file requests
- There’s a 1 minute timeout on the page as a whole
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 overidden 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:
Exclude files from Async CSS
This option addresses the PageSpeed recommendation:
If you have any issues on your site after activating this option, you may need to activate Safe Mode, which excludes jQuery from being deferred, for compatibility reasons:
Depending on your site, you may also need to exclude some more files from being deferred:
Exclude files from Defer JS
Files that will not have defer applied
defer attribute will not be applied to elements that already have either of the following attributes: