Jetpack Boost helps your site load faster by optimizing how CSS is delivered. The Critical CSS feature moves the most important styling information to the top of your pages, helping your content display sooner, especially on mobile. This improves your visitors’ experience and your site’s speed score.
Depending on your plan, this feature is available in two versions: manual generation (free plan) and automated generation (paid plan)
What is Critical CSS?
Critical CSS refers to the essential styles needed to render the visible part of a page. Jetpack Boost extracts this CSS and inlines it directly in your page’s <head> to reduce delays in loading key visual elements.
Jetpack Boost stores each Critical CSS file as a custom post type in your WordPress database (wp_posts table).
To support both desktop and mobile layouts, Boost samples your site at multiple screen widths and generates a single Critical CSS set that works across devices.
Manual Critical CSS (Free Plan)
If you’re using the free version of Jetpack Boost, you’ll need to generate Critical CSS manually whenever your site changes.
How to enable and generate Critical CSS
- Go to Jetpack → Boost in your WordPress dashboard.
- Toggle on Optimize Critical CSS Loading (manual).
- Click Regenerate whenever your site’s layout or design changes.
Make sure to stay on the page while regeneration is in progress. Leaving early may interrupt the process.
When to regenerate Critical CSS
It’s important to regenerate Critical CSS after:
- Changing or updating your theme
- Adding or editing posts and pages with new layouts or blocks
- Installing or updating design-related plugins
- Updating WordPress core
Upgrading to a paid Jetpack Boost plan will automate Critical CSS generation.
Automated Critical CSS (Paid Plan)
Automated Critical CSS is available with the Jetpack Boost paid plan or Jetpack Complete.
When you upgrade, Jetpack Boost will automatically regenerate Critical CSS every time your site changes — no action needed.
How it works
- After upgrading, the Automatically Optimize CSS Loading setting will be enabled by default.
- Jetpack Boost monitors your site for design changes and generates Critical CSS as needed.
- You’ll see status messages confirming that CSS is being generated or is up-to-date.
How to force regeneration manually (if needed)
Even with automatic generation, you can still click Regenerate from the Jetpack Boost dashboard if you suspect something is out of date.
Benefits of automated Critical CSS generation
- Save time — no manual steps needed
- Avoid missing updates that could impact performance
- Benefit from server-side CSS generation for improved accuracy
- Get access to direct support if something goes wrong
Status Messages
Jetpack Boost displays a message under the Critical CSS toggle to keep you informed. Here’s what they mean:
- “Jetpack Boost will generate Critical CSS for you automatically.”
The system is working normally and monitoring changes. - “X file(s) generated Y time ago.”
Generation completed successfully. No further action is needed unless your site has changed. - “X file(s) could not be automatically generated.”
Some pages failed. This may be expected (e.g., plugin-generated pages). See the troubleshooting guide for more details. - An error message is shown.
CSS generation failed. Your site will still load, but may be slower. See below for troubleshooting steps.
Turn Off Automated Critical CSS (Developers)
If you have the paid plan but prefer the manual version, you can disable the automated feature by adding this filter to a must-use plugin (mu-plugin):
add_filter( "jetpack_boost_has_feature_cloud-critical-css", '__return_false' );
Once disabled, the manual Optimize CSS Loading toggle will return to your dashboard.
Troubleshooting
If Jetpack Boost fails to generate Critical CSS or you see a message indicating problems, follow the steps in our full guide:
Troubleshooting Critical CSS in Jetpack Boost
Still need help?
Please contact support. We’re happy to advise.
Jetpack 