Speed up CSS Loading with Jetpack Boost

Help your pages load faster with Jetpack Boost’s Optimize Critical CSS feature.

Jetpack Boost works to increase your website’s speed. You can use the Optimize CSS Loading to shift crucial style information to the beginning of the page, enabling faster content display. This technique, known as Critical CSS, is instrumental in enhancing your site’s user experience and overall performance.

The Critical CSS is stored in the database posts_table as a custom post type.

Automatically generate Critical CSS with Jetpack Boost Premium

With the Jetpack Boost plan, you can automatically regenerate Critical CSS without lifting a finger. Learn more about Automated Critical CSS.

Manually generate Critical CSS with Jetpack Boost Free

To generate Critical CSS using Jetpack Boost for free, follow these two steps:

Navigate to Jetpack → Boost.
Toggle on Optimize Critical CSS Loading (manual).
When you make changes to your website, you will need to click Regenerate.
As the Critical CSS optimization process is underway, you will see a loading bar indicating that the regeneration is in progress. For the optimization process to be successful, please refrain from leaving the page until it has been completed.

Screenshot of the Optimize Critical CSS Loading setting. There is a link in the bottom right to Regenerate Critical CSS. — Regenerate Critical CSS

Update (regenerate) the Critical CSS when you make changes

Consider updating your Critical CSS in the following situations:

Making theme changes: Updating the Critical CSS is essential when modifying your website’s design or layout. Theme changes typically involve new CSS rules that influence your site’s display and performance.
Writing a new post/page: Adding a new post or page may introduce new elements or styles that necessitate a Critical CSS update.
Editing a post/page: When editing an existing post or page, new styles or layout adjustments may be introduced that require an update to your Critical CSS.
Plugin changes: Plugins can add or alter CSS and HTML, impacting your site’s layout and performance. Optimizing your CSS is crucial when making changes to plugins that affect your site’s design.
Updates to WordPress core: WordPress updates may introduce core CSS changes that can impact your site’s performance and design.

To avoid having to regenerate the Critical CSS every time you make a change to your website, consider upgrading to a Paid Boost Plan.

Mobile Critical CSS

We don’t generate specific CSS only for mobile, but we do take samples of the site with both wide and narrow screen sizes and then combine them so that the Critical CSS produced is valid for both mobile and desktop devices.

Troubleshoot Critical CSS

If Jetpack Boost fails to generate Critical CSS, please check this page for specific error messages and follow the detailed troubleshooting steps provided to resolve the issue effectively.