Shopify Core Web Vitals: LCP, INP and CLS explained

Core Web Vitals are three metrics Google uses to describe how a page feels to a real user. They matter for rankings, and they correlate with conversion, which is the better reason to care.

The useful thing about them is that each one has a distinct cause. Knowing which is failing tells you exactly what to fix.

LCP — Largest Contentful Paint

How long until the main content appears. Target under 2.5 seconds.

On a Shopify store the LCP element is almost always the hero image on the homepage or the first product image on a product page. Which means LCP is nearly always an image problem.

Causes, in order of frequency:

• The LCP image is lazy-loaded. The single most common self-inflicted LCP failure. Never lazy-load the hero or first product image.
• The image is far larger than displayed. A 4000px original shrunk in CSS downloads all four thousand pixels.
• It's not preloaded, so the browser discovers it late.
• Render-blocking CSS or fonts delay everything.
• Slow server response from heavy Liquid, which caps every other metric.

Fixes in image optimization and server response time.

INP — Interaction to Next Paint

How quickly the page responds to a tap or click. Target under 200 milliseconds.

This replaced First Input Delay and it's harsher, because it measures every interaction rather than the first. On Shopify it's a JavaScript problem, and specifically a third-party JavaScript problem.

Causes:

• App scripts competing for the main thread. Ten apps each doing work on load is the classic case — how many apps is too many.
• Heavy event handlers, especially on scroll.
• Large JavaScript bundles parsed on load.
• Chat widgets, review widgets and personalisation scripts all initialising at once.

Fixes in JavaScript and third-party scripts.

CLS — Cumulative Layout Shift

How much the page jumps while loading. Target under 0.1.

The most annoying for users and usually the cheapest to fix.

Causes:

• Images without width and height. Reserve the space and the shift disappears.
• Web fonts swapping to a differently-sized fallback.
• Injected banners — announcement bars, cookie notices, app popups appearing above content.
• Dynamically inserted content pushing things down after paint.

Most CLS on Shopify stores comes from apps injecting something above the fold after the page has rendered.

Lab data versus field data

The distinction that causes most confusion.

Lab data — Lighthouse, PageSpeed Insights' simulated run — is a controlled test on your machine. Useful for iterating, because it's repeatable. It is not what Google ranks on.

Field data — the Chrome UX Report, shown at the top of PageSpeed Insights and in Search Console — is real users on real devices and networks. This is what counts.

Field data lags. It's a 28-day rolling window, so a fix deployed today shows up in a few weeks. Don't judge a change by the lab score alone, and don't panic when field data hasn't moved after two days.

Where to read it

• Search Console → Core Web Vitals — your whole site, grouped by URL pattern, mobile and desktop separately. Start here.
• PageSpeed Insights — one URL, both field and lab.
• Chrome DevTools — for diagnosing a specific problem.

Details in speed testing tools.

Test the right pages

Not the homepage. Test:

• The product page with the most traffic.
• The biggest collection page, with real product counts.
• The homepage.

On mobile, throttled. That's where most of your customers are and where the problems live.

What good looks like

Google measures at the 75th percentile — three quarters of visits must be good.

The order to fix in

1. CLS. Cheapest, and it's mostly image dimensions.
2. LCP. Usually one image and one loading attribute.
3. INP. Hardest, because it means auditing apps and scripts.

Most stores get all three into the green without a rebuild — the full audit.

Each vital has one dominant cause: LCP is an image, CLS is a missing dimension, INP is somebody else's JavaScript. Diagnose which is failing and the fix picks itself.