Core Web Vitals for Shopify: LCP, INP and CLS explained

Core Web Vitals are three metrics that measure how a page feels to a real visitor: LCP (how fast the main content loads), INP (how quickly the page responds to taps) and CLS (how much the layout jumps around). For a Shopify store they matter twice over — they’re a ranking signal, and each one maps directly to a reason shoppers give up.

The three metrics and their thresholds

You need to pass all three, and they’re measured on real visitors’ devices — mostly mid-range phones on ordinary mobile connections, not the fast laptop you’re testing on. That’s why a store can feel snappy to its owner and still fail.

Note that INP replaced First Input Delay, so older Shopify speed advice referencing FID is out of date. INP is much stricter: FID only measured the delay before the first interaction started processing, while INP measures the full response time across all interactions on the page.

What breaks each one on a Shopify store

LCP — usually images. The hero banner or main product image is almost always the largest element. Oversized uploads, images that aren’t lazy-loaded correctly, and render-blocking scripts loading ahead of them are the usual causes. Full detail in Largest Contentful Paint explained.

INP — usually apps. Every app that injects JavaScript competes for the browser’s main thread. When a shopper taps “add to cart,” the browser has to finish whatever script it’s running before it can respond. Stack enough review widgets, popups, upsells and tracking pixels and a tap can take half a second to register — which reads as “the site is broken.” This is the metric Shopify apps slowing your store hits hardest.

CLS — usually missing dimensions. Images and embeds without width and height reserved push content down when they finally load. On Shopify the classic offenders are banner apps injecting a bar at the top after render, web fonts swapping and re-flowing text, and product badges appearing late. The shopper taps a button that just moved — and adds the wrong thing to their cart.

How to fix them

For LCP:

• Compress and correctly size hero and product images before uploading.
• Don’t lazy-load the hero image — that delays the very thing being measured.
• Cut render-blocking scripts in the theme head.

For INP:

• Audit apps ruthlessly; remove anything not clearly earning revenue.
• Consolidate tracking into one tag manager or native integration rather than five injected pixels.
• Prefer native theme features over an app where a feature exists both ways.

For CLS:

• Set explicit width and height on every image and embed.
• Reserve space for anything injected late — announcement bars, badges, banners.
• Preload fonts, and use font-display: swap with a matched fallback so text doesn’t reflow.

How to check your scores

Core Web Vitals come from real-user data, so they lag behind changes by up to 28 days — a fix today shows up in the field data weeks later. Use lab tests for immediate feedback while you work, then confirm in field data. Google Search Console has a Core Web Vitals report per property, which is the source of truth for what Google sees.

Start with a baseline: the free page speed tool measures your store’s real load time and puts a revenue figure on what slowness costs you.

Do they actually affect rankings?

Yes, but modestly — they’re one signal among many, and relevance still dominates. The bigger reason to care is commercial, not algorithmic: page speed affects conversions directly, and a store failing INP is losing sales at the exact moment shoppers try to act. Treat Core Web Vitals as a revenue metric that happens to help SEO.

The bigger picture

Speed is one leak among several. Revyfix adds every leak — speed, conversion gaps, cart abandonment, weak CTAs — into one score and ranks the fixes by payback. See also how to speed up your Shopify store.