Speed up CSS Loading with Jetpack Boost

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?MD

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.

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.

Generate Critical CSS manuallyMD

With the free version of Jetpack Boost, you generate Critical CSS manually. Regenerate it after changes that affect your site’s HTML or CSS structure.

How to enable and generate Critical CSSMD

1. Go to Jetpack → Boost in WP Admin.
2. Expand the “Page loading” section.
3. Turn on the “Optimize Critical CSS Loading (manual)” toggle.
4. Click the Generate button.

Stay on the Boost dashboard while Critical CSS is being generated. If you navigate away, the process will pause.

When to regenerate Critical CSSMD

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

A paid Jetpack Boost plan lets you automate Critical CSS generation.

Generate Critical CSS automaticallyMD

Automated Critical CSS is available with the Jetpack Boost paid plan or Jetpack Complete.

To generate Critical CSS automatically:

1. Go to Jetpack → Boost in WP Admin.
2. Expand the “Page loading” section.
3. Turn on the “Optimize Critical CSS Loading (Automatic)” toggle.

Once enabled, Boost automatically generates Critical CSS when you make changes to your site.

Benefits of automated Critical CSS generationMD

• Keeps Critical CSS updated automatically after site changes.
• Reduces the need to regenerate Critical CSS manually.
• Uses server-side generation for more consistent results.
• Helps avoid outdated Critical CSS after design or layout changes.
• Provides access to direct support if something goes wrong.

Status messagesMD

Jetpack Boost shows status messages under Critical CSS to let you know whether generation completed successfully or needs your attention.

• Automatic generation is enabled. On paid plans, Boost shows that it will automatically generate Critical CSS whenever you make changes.
• Critical CSS was generated successfully. Boost shows how many files were generated and when they were last updated.
• Some files could not be generated. Boost links to recommendations for the affected pages.
• A page is only available to logged-in visitors. Boost cannot read the page as a logged-out visitor. If the page is intentionally private, you can ignore the message. If it should be public, check the plugin or setting that requires visitors to log in, then try again.
• Another generation error occurred. Follow the recommendations shown in Boost or see the Critical CSS troubleshooting guide.

Turn off automated Critical CSS for developersMD

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 Critical CSS Loading (manual)” toggle will return to your dashboard.

TroubleshootingMD

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