LCP Image Optimization automatically identifies and optimizes the most important images on your website’s Cornerstone Pages. This feature analyzes your Cornerstone Pages, identifies their primary images (if applicable), and applies technical optimizations to make them load faster for your visitors.

LCP Image Optimization is available on both the free and paid Jetpack Boost plans. The free plan allows optimization for one Cornerstone Page, while the Premium plan supports up to ten.

What is Largest Contentful Paint (LCP)?

Largest Contentful Paint (LCP) is a Core Web Vitals metric that measures how long it takes for the largest visible content element—like a large image or headline—to fully load in a visitor’s browser.

A fast LCP gives the impression that your site is quick and responsive. A slow LCP, even if other elements load quickly, can make your site feel slow to users.

Why LCP Matters for Your Website

Largest Contentful Paint (LCP) is a Core Web Vitals metric that measures how long it takes for the largest visible content element to load on your webpage.

• Visitors judge site speed based on how quickly the main content appears, not when the entire page finishes loading.  
• A slow LCP makes your site feel sluggish, even if other elements load fast.  
• A fast LCP makes your site feel professional and responsive.

Search Engine Optimization

• Since LCP is a Core Web Vital, Google uses LCP as a ranking factor in search results.
• Websites with good LCP scores (under 2.5 seconds) rank higher than slower competitors.
• Poor LCP scores can negatively impact your organic search visibility.

What makes LCP slow?

Common causes of poor LCP performance include:

• Large, unoptimized images.
• Images without proper loading prioritization.
• Missing responsive image techniques.
• Slow server response times.
• Render-blocking resources.

What is LCP Image Optimization?

LCP Image Optimization is a Jetpack Boost feature that identifies the most important visual elements on your key pages and applies performance enhancements to help them load faster.

It focuses on the largest image or background image visible in the browser window when a page loads—known as the LCP element. Optimizing this element can significantly improve your Core Web Vitals scores.

How LCP Image Optimization Works

Automatic Page Analysis

The feature examines your Cornerstone Pages to identify:

• The largest visual element that appears in the viewport.
• If it’s a standard or background image.
• The optimal loading strategy for each device type (mobile/desktop).

Technical Optimizations Applied

For Image Elements:

• Optimizes the LCP image through Jetpack’s Site Accelerator.
• Sets fetchpriority="high" to prioritize loading.
• Applies loading="eager" to prevent lazy loading delays.
• Generates responsive images with srcset and sizes attributes.
• Includes high-DPI display support.

For Background Image Elements:

• Optimizes the LCP background image through Jetpack’s Site Accelerator.
• Adds preload links in the document head.
• Implements responsive background images using CSS image-set().
• Applies device-specific media queries.
• Uses CSS overrides to ensure optimal loading.

Understanding statuses

Pending Analysis

The system is currently analyzing your pages. This typically takes a few minutes as it examines each page on both mobile and desktop.

Analysis Complete

Your LCP elements have been identified and optimizations are now active. You should see performance improvements in testing tools.

Troubleshooting Common Issues

If Jetpack Boost wasn’t able to optimize some of your pages, it may be due to issues like page accessibility, slow loading, or layout complexity.

You can find a full list of known issues and solutions here: Troubleshooting LCP Image Optimization in Jetpack Boost.

Still Need Help? 

Please contact support. We’re happy to advise.

Speed up website performance by storing frequently accessed content locally, reducing load times for visitors. 

To access the caching feature, ensure the Jetpack Boost plugin is installed and active. For installation instructions, visit our installation guide.

Enabling the cache feature

When the Jetpack Boost plugin is active, you can enable the cache feature by following the steps below:

1. Start from your site’s WP Admin.
2. Navigate to Jetpack → Boost.
3. Locate the “Cache Site Pages” and use the toggle to enable the feature

Verifying if the caching works

You can verify that the cache is working by looking in wp-content/boost-cache/cache/ on your server for cached files. You can also open your site in a private or incognito browser (the plugin only caches page requests by logged-out visitors) and do the following:

1. Open the Web Developer console and navigate to the Network tab.
2. Clear the list, then reload the page.
3. Click on the entry for your page and examine the Response Headers. You will find one called “X-Jetpack-Boost-Cache” with a value “hit” if it was served from the cache. If the page wasn’t cached, the value will be “miss”.

If a page is missing the “X-Jetpack-Boost-Cache” header, its URL probably excluded from caching.

Checking whether you’re seeing a cached or uncached page

If your site behaves differently when you are logged in versus logged out, you may be seeing a cached HTML page served by an external caching layer (such as your hosting provider, a CDN, or another caching plugin).

To check this:

1. Open the affected page in a private or incognito browser window.
2. Add a query parameter (?nocache=1) to the URL. This will look like: https://yourjetpack.blog/?nocache=1
3. Compare how the page loads with and without the parameter.

If the page loads correctly with the parameter but not without it, the site’s current code is correct and the issue is cache-related.

In this case, contact your hosting provider or review any other caching layers on your site and ask for a full cache purge.

Adding a query parameter does not fix the issue, it only bypasses the cache so you can confirm whether caching is the cause and continue troubleshooting.

Disabling any other caching system present on the site

While Jetpack Boost can work alongside other performance optimization plugins, it’s essential to ensure no overlapping features could conflict, particularly other caching mechanisms. It’s recommended to use one caching solution at a time for optimal performance.

If your site uses a caching plugin or if your hosting provider includes a caching system, you might see a little warning pop-up after you turn on the Cache Site Pages feature in Boost. This is just to let you know that Jetpack Boost couldn’t activate the feature due to the existing cache setup.

To benefit from Jetpack Boost’s integrated functionalities, including its caching feature and all the other features, you must disable the other caching system. If it’s a plugin, please deactivate it, and if it’s from your host, please contact the hosting provider for assistance. 

Please note that some hosting providers will not allow you to choose your own page caching solution. In such cases, Boost’s page cache cannot be enabled on your site. 

The technical side of caching

All page caches used by WordPress must use a special file in your wp-content directory called advanced-cache.php to drive their caching features. Jetpack Boost will show an “Existing Cache System Detected” message if we detect an advanced-cache.php file in your wp-content directory.

If you have access to the files in your WordPress installation, check this file to see if it contains information about what caching solution you currently have configured.

If you have an empty advanced-cache.php file installed, your hosting provider may have placed that file there to prevent you from using your own page caching solution. In such cases, your hosting provider likely has a cache built-in. We recommend that you contact your hosting provider for information.

Jetpack Boost provides several filters for developers looking to customize caching behavior. These include jetpack_boost_cache_bypass_patterns for changing bypass patterns, jetpack_boost_cache_request_cacheable to specify cacheable requests, and jetpack_boost_cache_accept_headers to modify caching based on content types.

Further details can be found in the Cache API documentation.

Excluding Specific Parts of the site from Caching

You may have certain pages on your site, such as the cart page or those with frequently updated content, that you prefer not to cache to ensure they always display the most current version. Jetpack Boost offers a straightforward way to designate which areas of your site should remain uncached.

To exclude different parts of the site from caching, you can follow the steps:

1. Navigate to Jetpack → Boost in your WP Admin
2. Enable the Cache Site Pages module.
3. Look for a Show Options button on the right side and click it. This action will reveal a field for input.
4. In this new field, enter the paths for any parts of the site you wish to keep uncached.

Remember, you don’t need to use full URLs here. For instance, to exclude a shop page from being cached, simply input “/shop” (without the quotes). Place each path on its own line. If you need to exclude multiple pages under a single directory, you can use the wildcard symbol (.*) in your path. This might look like /blog/(.*) to exclude all pages under the “blog” section.

Tracking Caching Events (logging)

If you run into trouble while using the cache, it can sometimes be helpful to enable its Logging feature to track events that occur in the caching system. 

To track caching events, follow these steps:

1. Navigate to Jetpack → Boost in your WP Admin
2. Enable the Cache Site Pages module.
3. Click the Show Options button on the right side. 
4. Check the option to activate logging. 
5. Click See logs to see the logs and caching events.

Typically, the cache logging system will track which pages are being cached, which are being served from your cache, and when your cache is deleted due to either the cache becoming too old, or due to changes on your site.

Please note that this feature is normally disabled by default, as writing extra logs to your disk may have a small performance impact on your server. Remember to deactivate the logging system once you have finished troubleshooting any problem you may need to investigate.

Clearing cache

Jetpack Boost automatically clears cached content when posts are updated, published, or deleted, and when comments are modified or removed. Manual cache clearing should only be necessary if you notice outdated content that hasn’t been automatically refreshed.

To clear the cache manually, click Clear Cache button from the Cache Site Pages feature section:

Jetpack Boost’s page cache automatically clears cached content when you update, publish, or delete a post; when a comment is modified, added, or removed; or when you switch themes. This ensures your site’s content remains current without any extra effort on your part.

Improving your site’s loading speed by caching content can positively impact your SEO. Faster sites provide a better user experience, which is a factor search engines consider when ranking sites.

Adjusting the cache duration

Content stays cached for 1 hour. This can be changed by adding a line to your site’s wp-config.php file.

define( 'JETPACK_BOOST_CACHE_DURATION', 3600 );

Where 3600 is the duration of the cache in seconds. You can adjust this value according to your needs to control the freshness of your cached content.

However, WordPress comes with a wide variety of plugins and settings, so it can miss some updates. If you notice that some content on your site appears to be out-of-date after making a change, you can clear your page cache at any time.  

Changing the cache parameters with filters

Jetpack Boost provides several WordPress filters that enable developers to customize how visitors are identified for serving cached content. These powerful features require some technical expertise to implement effectively. For detailed explanations of each filter and helpful example code to get you started, check out the Jetpack Boost Filters Documentation.

Troubleshooting caching issues

For troubleshooting Jetpack Boost caching issues, please refer to our Troubleshooting Guide for detailed solutions.

Get help

Need more help? Feel free to contact us! For free Jetpack Boost users, you can post a support request on the Jetpack Boost Plugin Support page. If you upgraded, you can contact support for more personalized assistance.

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

1. Go to Jetpack → Boost in your WordPress dashboard.
2. Toggle on Optimize Critical CSS Loading (manual).
3. 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