The three Core Web Vitals
| Metric | What it measures | Good | Needs improvement | Poor |
|---|---|---|---|---|
| LCP – Largest Contentful Paint | Loading: when the largest image or text block in the viewport is rendered | ≤ 2.5 s | 2.5–4.0 s | > 4.0 s |
| INP – Interaction to Next Paint | Responsiveness: delay between a tap, click or key press and the next visual update, across the visit | ≤ 200 ms | 200–500 ms | > 500 ms |
| CLS – Cumulative Layout Shift | Visual stability: how much content moves unexpectedly | ≤ 0.1 | 0.1–0.25 | > 0.25 |
INP replaced First Input Delay (FID) as a Core Web Vital in March 2024. A page passes when the 75th percentile of real visits meets the "good" threshold for all three, measured separately for mobile and desktop. Field data comes from the Chrome User Experience Report and appears in PageSpeed Insights and Google Search Console.
Why it matters for online stores
Core Web Vitals are part of the page experience signals Google Search uses, but the bigger reason is customers: slow product images, laggy filters and jumping "add to cart" buttons cost sales, especially on mid-range phones and mobile networks.
Improving LCP
On category and product pages the LCP element is usually the main product image or a hero banner.
- Serve images in modern formats (AVIF/WebP) at the right size with
srcsetandsizes. - Never lazy-load the LCP image; give it
fetchpriority="high"and make sure it is in the initial HTML, not injected by JavaScript. - Reduce server response time (TTFB) with caching and a CDN; render product and category pages on the server.
- Limit render-blocking CSS and web fonts; use
font-display: swapand preconnect to font hosts. - Avoid hero sliders that load several large images up front.
Improving INP
Poor INP usually comes from too much JavaScript running on the main thread.
- Audit third-party scripts (reviews, chat, personalisation, tag managers, A/B tests) and remove or delay what is not needed.
- Keep variant pickers, filters and "add to cart" handlers light; show visual feedback immediately and do heavy work afterwards.
- Break up long tasks and avoid re-rendering the whole page when one filter changes.
- Test on a mid-range Android phone, not only on a fast laptop.
Improving CLS
- Set
widthandheight(oraspect-ratio) on all images and video, including product thumbnails. - Reserve space for banners, cookie notices, review stars and recommendation carousels that load late.
- Avoid inserting promotional bars above existing content after the page has rendered.
- Use font fallbacks with similar metrics to reduce shifts when web fonts load.
Measuring correctly
- Field data (real users): Search Console Core Web Vitals report, PageSpeed Insights, or your own real-user monitoring with the open-source
web-vitalslibrary. - Lab data (simulated): Lighthouse and Chrome DevTools, useful for debugging but not what Google uses for assessment.
- Group pages by template (home, category, product, cart, checkout); fixes are usually per template.
Mobile shoppers suffer most from slow stores. See our mobile commerce services.