Core Web Vitals for Ecommerce: How to Test, Pass and Fix

Core Web Vitals are three metrics Google uses to measure real-world user experience on a page: loading performance, interactivity and visual stability. Google Search Central lists them as Largest Contentful Paint (LCP), Interaction to Next Paint (INP) and Cumulative Layout Shift (CLS), and recommends an LCP within 2.5 seconds, an INP of less than 200 milliseconds and a CLS of less than 0.1. A page passes when it meets all three targets for 75% of real visits. For an online store, that usually comes down to the product image, the scripts your apps and tags add, and anything that pushes the page around while it loads.

The three Core Web Vitals

INP is the newest of the three. It replaced First Input Delay (FID) as a Core Web Vital on 12 March 2024, because Google needed a metric that captured more of a page's interactivity than FID did. INP looks at the latency of all of a visitor's interactions on the page, which matters on a store where shoppers open filters, switch variants and add to basket long after the page has loaded.

How Google decides whether you pass

The pass mark is set on real-user data, not on a lab score. According to web.dev, the target for each metric is measured at the 75th percentile of page loads, separately for mobile and desktop, and a page passes only if it meets all three targets at that percentile. So a store can score 95 in Lighthouse on a fast laptop and still fail, because more than a quarter of its real visits can be slower than the target, for example on older phones and mobile networks.

PageSpeed Insights takes its real-user data from the Chrome User Experience Report (CrUX) over the previous 28 days. That has two consequences for stores. First, a fix takes up to four weeks to show fully in the field data. Second, a new or low-traffic page may not have enough data of its own, in which case PageSpeed Insights falls back to data for your whole origin, and sometimes shows no field data at all. When PageSpeed Insights reports a failed Core Web Vitals assessment, at least one of the three metrics is outside its target at the 75th percentile.

How to run a Core Web Vitals test

Use more than one tool, because each answers a different question:

The Search Console report groups similar URLs and gives each group the status of its worst metric, so a group with good INP but poor CLS is marked poor. It only includes indexed URLs, shows a sample rather than every page, and omits a group until it has enough data for both LCP and CLS. On Shopify, the web performance reports need the Reports staff permission and private mode turned off, may be up to 36 hours behind, and keep 90 days of data; their summary covers the past 30 days, not the 28 days used by PageSpeed Insights.

How to fix each Core Web Vital on a store

Google's Chrome team publishes the most effective ways to improve Core Web Vitals. Here they are, with what each means for a typical ecommerce page.

Fix LCP

• Make the LCP resource discoverable in the HTML and prioritise it. On a product or collection page the LCP element is usually the main product image or hero banner. Do not lazy-load it, and make sure it is in the initial HTML rather than injected later by JavaScript or a slider.
• Aim for instant navigations. Pages that load from the back/forward cache or are prerendered appear immediately.
• Use a CDN to reduce Time to First Byte. A slow server response delays everything after it, including the LCP image.

Fix INP

• Yield often to break up long tasks, so the browser can respond to a tap between chunks of work.
• Avoid unnecessary JavaScript. On stores this is mostly apps, review widgets, chat, personalisation and tracking tags. Every one runs code on the main thread; remove the ones you no longer use and load the rest later.
• Avoid large rendering updates, such as re-rendering a whole product grid when a shopper changes one filter.

Fix CLS

• Set explicit sizes on content that loads in, including product images, embeds, banners and app widgets that appear above existing content.
• Make pages eligible for the back/forward cache, so returning to a collection page does not rebuild it.
• Avoid animations that change layout properties, and animate transforms instead.

Do Core Web Vitals affect SEO?

Google says it highly recommends good Core Web Vitals for success with Search and for user experience, and that they align with what its core ranking systems seek to reward, alongside other page experience aspects (Google Search Central). Treat them as one signal among many, not a shortcut to rankings. The stronger reason to fix them on a store is commercial: Shopify's web performance guide says optimising performance can improve the shopping experience, discoverability and conversion rates.

What to do next

1. Run PageSpeed Insights on your home page, one collection page and your best-selling product page, and note which metric fails at the 75th percentile.
2. Open the Search Console report to see whether the failure is one template or the whole site.
3. Fix the template, not the page, starting with the LCP image and the apps that add the most JavaScript.
4. Wait for the field data to update over the following 28 days before judging the result.

For mobile-specific fixes such as fonts, code splitting and lazy loading, see our mobile PageSpeed guide. If you would rather have it done for you, our Shopify speed optimisation team can work through this list.