Largest Contentful Paint (LCP): how to get under 2.5 seconds

Largest Contentful Paint (LCP) is the time until the biggest visible element, usually the hero image or main product photo, finishes rendering. Google counts 2.5 seconds or less as good and anything over 4 seconds as poor. It is the closest single number to "when does the page look ready".

Why it matters

A shopper decides in the first moments whether a page is worth waiting for. On a product page the largest element is nearly always the product photo, so a slow LCP means a blank or half-drawn space exactly where the buying decision happens. Mobile connections make it worse: the same image that loads instantly on office Wi-Fi can take four seconds on a phone.

LCP is also one of the three Core Web Vitals Google reports on, so it feeds how your pages are assessed in search.

What the audit looks at

The audit reports Largest Contentful Paint for your home and product pages from Google PageSpeed Insights, using real-visitor data when Google has it, and names the element involved.

What usually causes it

• A hero or product image uploaded at camera size and displayed in a slot a fraction of that width
• The LCP image set to lazy-load, which delays the one image the browser should fetch first
• A slow server response, so nothing can start painting until late
• Render-blocking scripts or stylesheets in the page head, often from apps and tag managers

How to fix it

Make the largest thing on screen appear faster. The effort is medium, a theme or template edit that takes an afternoon.

1. Identify the LCP element in PageSpeed Insights -- it is usually the hero image or the main product photo.
2. Serve that image at the size it is displayed at, in WebP or AVIF, and give it fetchpriority="high".
3. Remove lazy-loading from it. Lazy-loading the LCP image delays the exact thing being measured.
4. Preload the font used by the headline if the headline is the LCP element.
5. Cut render-blocking scripts in the head -- third-party tags there delay every paint.

On Shopify

1. In the theme editor, reduce the hero image dimensions to what is actually displayed; Shopify serves WebP automatically once the source is not oversized.
2. Edit the hero section and remove loading="lazy" from the first image, adding fetchpriority="high".
3. Audit your apps: Online Store > Themes > Edit code and remove leftover script tags from uninstalled apps.

On WooCommerce

1. Install an image optimisation plugin that converts to WebP and serves correctly sized versions.
2. Exclude the hero and product images from any lazy-load plugin.
3. Enable page caching -- an uncached WooCommerce page pays for a full PHP render before anything paints.

How to check it yourself

1. Open PageSpeed Insights, enter your product page URL and choose the mobile tab.
2. Scroll to the diagnostic "Largest Contentful Paint element" to see which element it is and how long each phase took.
3. Compare the field data at the top with the lab score. If only the lab number is poor, the cause may be your test connection and not your visitors.

Frequently asked questions

What is a good LCP score?

Google rates LCP of 2.5 seconds or less as good, between 2.5 and 4 seconds as needing improvement, and over 4 seconds as poor. The figure that counts is the 75th percentile of real visits.

Why does my LCP differ between PageSpeed Insights and another tool?

Tools test from different locations, devices and connection speeds. Real-visitor data reflects the people who actually visit your store, so trust it over a single lab run when both exist.

Related checks

• Slow product and collection pages: how to compare templates against the rest of your site
• Google mobile performance score: what it means and how to raise it
• Time to First Byte (TTFB): how fast your server should answer

Further reading

• web.dev: optimize LCP