Shopify Speed Guides

Shopify Core Web Vitals: How to Pass LCP, INP and CLS

Core Web Vitals are the three numbers Google uses to grade how your store feels to a real shopper: how fast the main content appears (LCP), how quickly the page reacts to taps (INP), and how much the layout jumps around while loading (CLS). Here is what each one means in plain merchant language — and the most common Shopify-specific cause and fix for each.

What are Core Web Vitals for a Shopify store?

Core Web Vitals are three measurements Google collects from your real shoppers' browsers, and your store passes when at least 75% of visits meet all three thresholds. In merchant terms:

• LCP — Largest Contentful Paint. How long until the biggest thing on screen, usually your hero or product image, is actually visible. This is the moment the store feels open for business. If it drags, shoppers stare at a blank banner and start doubting the tap they just made.
• INP — Interaction to Next Paint. How long the page takes to respond after a shopper taps a button, opens the menu, or picks a variant. Slow INP feels like a clerk who ignores you: the shopper taps "Add to cart" and nothing visibly happens, so they tap again — or leave.
• CLS — Cumulative Layout Shift. How much the page jumps while loading. High CLS is why shoppers aim for "Add to cart" and hit a late-loading banner instead. It makes a store feel broken even when it works.

Why Google uses p75 field data, not your Lighthouse score

Google judges your store on field data — measurements from real Chrome visitors, scored at the 75th percentile — not on the lab score a testing tool shows you. "p75" means: line up every real visit from fastest to slowest, and your official number is the visit that three out of four shoppers beat. To pass, even your slower quarter of traffic has to be close to a good experience.

Lab data (a Lighthouse or PageSpeed run) is one simulated load on one simulated device. It is excellent for diagnosing what to fix, but it is not what Google grades. That is how a store can score 90 in Lighthouse and still fail Core Web Vitals: the lab machine is faster than your real shoppers' phones. Field data is also a rolling 28-day window, so both fixes and regressions take weeks to fully show up in the report.

How to fix LCP on Shopify

The most common Shopify LCP failure is a hero image that starts downloading late and weighs too much — the fix is to load it first and make it dramatically lighter. Many themes lazy-load every image, including the one at the top of the page, which tells the browser to treat your most important pixel as an afterthought.

1. Never lazy-load the hero. Remove loading="lazy" from above-the-fold images so the browser fetches them immediately.
2. Preload and prioritize it. A preload tag (or fetchpriority="high") tells the browser the hero matters more than app scripts.
3. Right-size it. Serve a phone-sized file to phones with responsive image sizes instead of shipping one desktop-width image to everyone.
4. Use modern formats. AVIF and WebP cut most of the weight at no visible quality loss — our Shopify image optimization guide covers the full pipeline.

Note that TTFB (server response time) is controlled by Shopify's hosting, so your servers are not the lever. On Shopify, LCP is won or lost in the image pipeline and render-blocking scripts.

How to fix INP on Shopify

The most common Shopify INP failure is heavy third-party app JavaScript competing with your shopper's tap — the fix is to remove apps you no longer use and defer the scripts you keep. Every app you install can inject code into every page, and that code runs on the same "main thread" the browser needs to respond to a tap. When a review widget, popup, and tracker are all busy, the tap waits in line.

• Audit your apps. Uninstall what you don't actively use — and check for leftover script tags, since removed apps often leave code behind in the theme.
• Defer non-critical scripts. Chat widgets, trackers, and popups can load after the page is interactive instead of before it.
• Focus on storefront pages. Checkout scripts are locked by Shopify, so your fixable surface is the home, collection, and product pages — which is where shoppers do most of their tapping anyway.

How to fix CLS on Shopify

The most common Shopify CLS failure is media loading without reserved space — and the fastest Shopify CLS fix is giving every image and embed an aspect-ratio box so the browser holds its spot before the file arrives. When an image has no declared dimensions, the page renders without it, then shoves everything down when it lands. That shove is the layout shift Google measures.

• Set width and height on every image (or a CSS aspect-ratio), so the browser reserves the exact box in advance.
• Reserve space for embeds and videos the same way — a ratio wrapper stops them from popping the page open.
• Watch app-injected banners. Announcement bars and popups that insert themselves at the top of the page are classic shift generators; give them a fixed slot or load them without pushing content.

Why desktop passes while mobile fails

Desktop usually passes because it has the CPU and bandwidth to hide your store's weight — and Google grades mobile and desktop as two separate reports. A phone's processor makes the same app JavaScript several times more expensive (worse INP), a cellular connection makes a heavy hero far slower (worse LCP), and a small screen magnifies every layout jump (worse CLS). Since mobile is typically the majority of Shopify traffic and the slowest experience, the mobile report is the one that matters: fix for mobile first and desktop follows for free.

How Core Web Vitals affect rankings, ads and revenue

Passing Core Web Vitals earns you an edge in Google Search and a better landing-page experience in Google Ads — but the biggest payoff is conversion. Page experience, which Core Web Vitals feed, is a confirmed Google ranking signal: between two comparable results, the faster, more stable page has the advantage. In Google Ads, landing-page experience is a component of Quality Score, which influences what you pay per click — a sluggish mobile store quietly taxes every campaign.

The revenue math is bigger than either. Akamai research found that cutting store load time by one second can increase conversions by up to 7%, and Deloitte/eBay research puts every 100ms of load time at roughly 1.1% of conversion. We break that math down in speed and conversion. And because field data is a rolling 28-day window, vitals need continuous real-user monitoring — a single app update can start dragging your p75 down weeks before any report turns red.