Core Web Vitals: Understanding LCP, INP, and CLS for Website Optimization
An explanation of the three Core Web Vitals, how to measure them, and how to diagnose LCP, INP, and CLS by practical root cause.
Core Web Vitals are a group of metrics describing three parts of the experience: when the main content loads, how the interface responds to interaction, and how stable the layout remains. Google Search Central identifies LCP, INP, and CLS as the three metrics and recommends aiming for an LCP within 2.5 seconds, an INP of no more than 200 milliseconds, and a CLS of no more than 0.1 for a good experience. These are guidance thresholds for prioritizing improvements, not a promise that a score will automatically place a page at any particular ranking.
The important point is to measure by page and in its real context. A homepage, product page, checkout, and article have different resources, scripts, and behaviors. A page that scores well in a test environment but is affected by a slow connection, an older phone, or a popup in real use still needs review.
What do the three metrics measure?
LCP: when does the largest content appear?
Largest Contentful Paint measures when the largest content element in the visible area is rendered, usually a hero image, large heading, or main text block. A slow LCP leaves users unsure how far the page has loaded. Possible causes include a slow server response, delayed critical resources, an oversized hero image, a font that blocks rendering, or JavaScript needed to build the content.
INP: how does the interface respond?
Interaction to Next Paint reflects the delay from an action such as a tap, click, or keystroke until the browser can draw the next response. Menus, filters, product variants, and forms are important areas to check. Long handlers, many third-party scripts, large re-renders, or synchronous work on the main thread can make an interaction appear stuck.
CLS: does the layout jump?
Cumulative Layout Shift measures unexpected position changes throughout the page’s lifetime. Images without dimensions, ads or iframes without reserved space, a font swap that pushes text, banners inserted above the content, and self-opening popups are common causes. Users may click the wrong thing even when the final layout looks correct.
According to Google’s Web Vitals guide, assess the thresholds at the 75th percentile and separate phones from desktop. All three metrics need to meet their thresholds. Lighthouse does not directly measure INP during an automated page load; TBT is a supporting diagnostic metric, not a replacement for real interaction data.
Measure correctly before making changes
Google distinguishes real-user data from lab data. Field data shows actual device, network, and location groups; lab data helps reproduce controlled conditions for diagnosis. Review the Core Web Vitals report in Search Console, run PageSpeed Insights for sample URLs, and use DevTools when needed. A single URL does not represent an entire template. Google’s Core Web Vitals explanation also recommends using real-world reports for monitoring.
Record the theme, app, tag, image, and code versions when measuring. If the score varies, review the sample size, device type, cache, dynamic content, and active campaigns before reaching a conclusion. The goal is to find an actionable cause, not to chase a pretty number.
How to address LCP
Start with the LCP element for each template. If it is a hero image, use a file sized for its display area, choose an appropriate format, selectively preload it, and avoid lazy-loading content that is immediately visible. If it is text, reduce render-blocking resources, check the font, and put the main content in HTML that can be read early. If the server is slow, review hosting, caching, data queries, and user location.
Do not preload every image or font. Priority resources need to match the content that is actually on the page; unnecessary preloads can compete for bandwidth with important CSS, scripts, or images. Website image optimization is a companion step when LCP depends on images.
How to address INP
List the important interactions: opening the menu, filtering a catalog, choosing a variant, adding to the cart, opening an accordion, and submitting a form. Measure handlers, break long tasks into smaller pieces, defer work that does not serve the current interaction, and avoid re-rendering the entire interface tree. Remove apps, widgets, or tags that create no value; if one must remain, load it after the main content or only on the pages that need it.
Check loading, error, and success states. An interface that responds quickly but does not show that an action was received can still make users click repeatedly. For an ecommerce website, review the ecommerce website service alongside the cart and checkout flow, rather than measuring the homepage alone.
How to address CLS
Set width and height or an aspect ratio for images, video, iframes, and ad areas. Reserve space for banners, cookie notices, and messages that may appear. Load fonts with a suitable strategy, check fallbacks, and avoid inserting content above the section the user is reading. Animations should use properties that do not change the layout; popups should not push visible content down automatically.
Check the first load, a cached reload, deep scrolling, and interaction after several seconds. A layout that is stable on open but shifts when a chat widget initializes is still an experience problem.
Prioritize by page value
You do not need to fix every URL at once. Choose templates with high traffic, important CTAs, or revenue and support impact. Record observations before and after under the same conditions; also check conversions, errors, task completion time, and user feedback. Core Web Vitals are one part of page experience and do not replace content, accessibility, security, or information architecture.
Quick checklist
- Know the LCP element, slow interactions, and CLS source for each template.
- Have both field and lab data; do not conclude from one run.
- Size hero images correctly, prioritize their loading, and avoid lazy-loading them by mistake.
- Evaluate scripts, apps, tags, and widgets by the value they provide.
- Keep interaction handlers from running unnecessary long tasks.
- Reserve space in advance for images, iframes, ads, and banners.
- Make sure fonts, popups, and animations do not shift content.
- Test product, checkout, and form templates on phones.
- Record versions of changes so causes can be traced.
- Monitor the experience alongside business goals, not scores alone.
The Shopify performance optimization guide also notes that themes, apps, images, video, and third-party code can all affect the metrics. Use this framework to assess the current platform, then read the technical SEO pre-launch checklist when you need to review the whole site.