The Automated Critical CSS feature is available when you upgrade to the paid version of Jetpack Boost. It replaces the traditional locally generated Critical CSS.
After subscribing to the Jetpack Boost plan, your dashboard will look like this:
Once it has been generated the first time, you will no longer have to manually generate your Critical CSS. Whenever your theme changes or you publish a new post, Jetpack Boost will automatically generate new Critical CSS without any further action required from you.
Once a site has Critical CSS generated, the status field will show how many CSS files and how long ago they were generated.
Regenerating Critical CSS
If you suspect that the Critical CSS is out of date or incorrect, you can force the system to regenerate new CSS by clicking the “Regenerate” button on the Jetpack Boost dashboard. The Critical CSS will be regenerated on the Jetpack servers and updated on your site when it’s ready.
Turning off Cloud CSS
If you want to restore the traditional Local Critical CSS function instead of Automated Critical CSS, you can do so by adding the following filter to your site (e.g.: using a mu-plugin):
add_filter( "jetpack_boost_has_feature_cloud-critical-css", '__return_false' );
This will turn Automated Critical CSS off, and after reloading your dashboard, you should see the original option “
Optimize CSS Loading”.
Understanding the Status Messages
The current status of your Critical CSS is shown underneath the feature toggle. It can read one of these things:
- “Jetpack Boost will generate Critical CSS for you automatically.” – This means that the back end has received a request to generate Critical CSS for the site, and will generate Critical CSS for it.
- “X file(s) generated. Jetpack Boost is generating more Critical CSS.” – This means that Jetpack Boost has generated X pieces of Critical CSS for the site already – but the back-end is working on more.
- “X file(s) generated Y time ago.” – This means that Jetpack Boost has finished generating Critical CSS for the site, and will not do anything more until you update your site again.
- “X file(s) could not be automatically generated.” – This means that some parts of the site successfully generated Critical CSS, but some pages failed. Sometimes pages should fail (e.g.: if a plugin creates a strange kind of page that should not have Critical CSS generated for it), so most users can ignore this message. This exists for advanced users to dive in and check the “recommendations” page for more information.
- An error. Finally, if an error message is shown here, the site does not have Critical CSS but will continue to work without it until the error is resolved.