Jetpack Boost: Automated Critical CSS

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, you will see a confirmation page. Click Continue to go to the Jetpack Boost settings.

Jetpack Boost’s upgrade confirmation screen.

On the next screen, the Automatically Optimize CSS Loading feature will be enabled. Moving forward, you will not need to regenerate critical CSS each time you make changes. Jetpack Boost will do this for you automatically.

After upgrade, Jetpack Boost will automatically generate critical CSS each time your site changes.

Troubleshooting

If you have any issues generating Critical CSS, please start with the following troubleshooting steps.

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.

Get help

For free Jetpack Boost users, you can post a support request on the Jetpack Boost Plugin Support page. If you have purchased the Automated Critical CSS upgrade, you can contact support for more personalized assistance.