Using the Optimize CSS Loading Feature in Jetpack Boost

Jetpack Boost is equipped with a range of features aimed at increasing your website’s speed. Among these features is Optimize CSS Loading, which shifts 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.

What does the Optimize CSS Loading feature do for my site?

The Optimize CSS Loading feature is a performance optimization technique that improves the loading speed and rendering of your website by streamlining the handling of CSS files, responsible for the styling and layout of your web pages. It rearranges vital styling components, positioning them at the beginning of the webpage. As a result, your content is displayed more swiftly, allowing users to access information without having to wait for the entire page to load. By focusing on the most important CSS parts, Optimize CSS makes your website run more smoothly and quickly for everyone who visits.

How do I generate Critical CSS using Jetpack Boost?

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

1. Navigate to Jetpack → Boost.
2. Toggle on Optimize Critical CSS Loading (manual).

Where is the Critical CSS stored?

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

Is Critical CSS generated for mobile versions of my site?

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.

How do I update the Critical CSS generated by Jetpack Boost?

To update the Critical CSS that Jetpack Boost generated, just follow these steps:

1. Navigate to Jetpack → Boost
2. Make sure the Optimize Critical CSS Loading (manual) option is enabled
3. 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.

When should I update the Critical CSS?

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.

Automatically Generate Critical CSS

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