Core Web Vitals advice tends to arrive as a list of forty things, half of which do not apply to Shopify. After running this on a lot of stores, I can tell you the failures cluster around a handful of causes, and most of the forty-item lists are noise. Here is the version I actually use.
There are three metrics. Largest Contentful Paint measures how fast the main content shows up. Cumulative Layout Shift measures how much the page jumps around while loading. Interaction to Next Paint, which replaced First Input Delay in 2024, measures how quickly the page responds when someone taps or clicks. Google uses field data from real Chrome users, not a lab test, so a fast developer machine on fast internet can pass while real shoppers fail.
LCP: it is almost always the hero image or a render-blocking app
On a Shopify store, the Largest Contentful Paint element is usually the hero image on the homepage or the main product image on a product page. When LCP is slow, the cause is one of three things, in order of how often I see them.
The image is too large or in the wrong format. Shopify serves images through its CDN and supports modern formats, but themes do not always request them well. Make sure your hero is delivered as WebP or AVIF, sized to the actual rendered dimensions rather than a 4000px original, and that the theme is not lazy-loading the one image that should load first. The hero above the fold should never have loading="lazy" on it. That single attribute on the wrong element is one of the most common LCP killers I find.
A third-party app is blocking the render. Every app that injects a script into the theme is a candidate. Review apps, upsell apps, popups, and analytics tags all add weight, and some insert synchronous scripts that hold up the page. The fix is rarely to remove the app and usually to load it later. Audit what each app adds, and be ruthless about the ones that fire before the page paints.
The theme is shipping too much CSS and JavaScript. Older or heavily customized themes accumulate this. You do not need to rewrite the theme. You need to find the few heavy scripts and defer them.
A quick way to see your real LCP element is the Performance panel in Chrome DevTools, or the PageSpeed Insights report, which names the element directly.
CLS: reserve space for everything that loads late
Layout shift happens when something loads after the initial paint and pushes content down. The shopper goes to tap a button, it moves, and they tap an ad or the wrong product. Google treats that as a real harm, and it is.
On Shopify the usual culprits are images without dimensions, web fonts that swap and reflow text, and app content that injects above existing content. The fixes are mechanical.
Give every image a width and height, or a CSS aspect ratio, so the browser reserves the space before the image arrives. Themes often do this for product images and forget it for hero banners, logos, and badges.
Load fonts with font-display: optional or swap and, where you can, preload the one or two fonts used above the fold. A font that arrives late and reflows a headline is a classic CLS source.
Reserve space for anything an app injects. If a free-shipping bar or a cookie banner appears at the top after load, it shoves the whole page down. Give it a fixed height container, or render it in a position that does not displace content.
CLS is the most fixable of the three. A store that fails CLS can usually pass it within a day of focused work.
INP: the new one, and the one themes handle worst
Interaction to Next Paint is the metric people understand least, so it is worth being concrete. It measures the delay between a tap or click and the next visual update. If your menu takes 300 milliseconds to open after a tap, that is a poor INP, even if the page loaded fast.
The cause is almost always JavaScript running on the main thread when the shopper interacts. On Shopify that means heavy theme scripts, large app bundles, and event handlers that do too much work. The fixes:
Cut the amount of JavaScript that runs at all. Defer non-essential scripts, and question every app that adds a bundle. The single biggest INP win on most stores is removing or deferring an app the merchant forgot they installed.
Break up long tasks. If a script does a big chunk of work in one go, it blocks the thread and any interaction during that window feels slow. This is more of a theme-developer fix, but it matters on interaction-heavy pages like collection filters.
Avoid layout work in interaction handlers. Reading and writing layout repeatedly in a click handler is a quiet INP killer.
INP is measured on the interactions shoppers actually make, so the menu, the add-to-cart button, and the collection filters are where to focus.
How to measure it honestly
Use field data, not just lab scores. The Chrome User Experience Report, which you can see through PageSpeed Insights or Search Console's Core Web Vitals report, reflects real visitors. A 100 in Lighthouse on your laptop means little if real shoppers on mid-range phones are failing.
Measure the templates that matter: the homepage, a product page, and a collection page. Those three cover most of your traffic and most of your variation.
Where this connects to getting found
Core Web Vitals are a ranking signal in Google, modest but real, and they are part of the Built for Shopify performance bar. They also matter for the newer kind of discovery we spend most of our time on. AI retrieval bots operate on a budget. A bot fetching your page to answer a shopping question will give up on a slow response the same way a shopper will. Fast, stable pages are not just a search nicety anymore. They are table stakes for being read at all, by people and by machines.
We tune this as part of our Shopify builds, and we keep an eye on it through the same field data Google uses. If your Search Console is flagging Core Web Vitals issues and you are not sure which of the forty things to fix first, start with the hero image, then CLS, then the heaviest app. That order has solved it on more stores than anything else.