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

Google has made Core Web Vitals a ranking factor since 2021, and the bar keeps rising. In our data from 1,200+ Shopify store audits, 67% of stores fail at least one Core Web Vital metric. The most common failure? LCP — Largest Contentful Paint — which measures how fast the main content of your page becomes visible. If your Shopify store is slow, this is almost certainly why.

This guide goes deeper than our general Shopify page speed guide. That post covers the broad causes of slow stores. This one is specifically about the three Core Web Vitals metrics — LCP, CLS, and INP — what causes each to fail on Shopify, how to diagnose the specific cause, and how to fix it with Shopify-specific solutions.

What Are Core Web Vitals?

Core Web Vitals are three specific metrics Google uses to measure real-world user experience on your pages. They are not theoretical benchmarks — they are measured from actual Chrome users visiting your site (called field data) and from lab tools like Lighthouse (called lab data). Google uses the field data for ranking.

The three metrics are:

• LCP (Largest Contentful Paint): How fast the main visible content loads. Target: under 2.5 seconds.
• CLS (Cumulative Layout Shift): How much the page layout shifts while loading. Target: under 0.1.
• INP (Interaction to Next Paint): How fast the page responds when a user interacts with it (clicks, taps, types). Target: under 200 milliseconds.

Each metric is scored as “Good,” “Needs Improvement,” or “Poor” based on the 75th percentile of your real visitor data. That means if 25% or more of your visitors have a bad experience, you fail the metric. You need all three metrics in the “Good” range to pass Core Web Vitals overall.

How to Check Your Core Web Vitals

There are three places to check your Core Web Vitals, and you should use all three because they show different things.

Google Search Console

Navigate to Experience > Core Web Vitals in Google Search Console. This shows real field data from Chrome users on your site, grouped by URL pattern. It tells you which pages are passing, which need improvement, and which are failing — and which specific metric is the problem. This is the most important tool because it shows what Google actually sees and uses for ranking.

PageSpeed Insights

Enter any URL at pagespeed.web.dev to see both field data (if available) and lab data. The field data section at the top shows the same Chrome UX data that Google uses for ranking. The lab data section below runs a simulated test and gives you a detailed breakdown of what is slowing down each metric. PageSpeed Insights is the best tool for diagnosing specific problems on individual pages.

Lighthouse in Chrome DevTools

Open DevTools (F12), go to the Lighthouse tab, and run a Performance audit. This gives you lab data only, but with the most granular detail — including a filmstrip of your page loading, specific element timings, and a treemap of your JavaScript bundles. Use this when you need to dig into exactly what is blocking or delaying a specific metric.

LCP Failures on Shopify: Causes and Fixes

LCP measures when the largest visible element finishes rendering. On most Shopify product pages, the LCP element is the hero product image. On collection pages, it is usually the first visible product image or the collection banner. On the homepage, it is typically the hero banner image or headline text.

In our audit data, LCP is the most commonly failed metric on Shopify stores. 54% of the stores we audit have LCP above 2.5 seconds on mobile. Here are the specific causes we see most often.

Cause 1: Unoptimized Hero Images

The single biggest cause of LCP failure on Shopify is a large, unoptimized hero image. We routinely see hero images that are 3-5 MB, uploaded at 4000x3000 pixels, being served to a phone with a 390px viewport. The browser has to download megabytes of data it will never use.

Fix: Shopify's CDN automatically serves images in WebP format and can resize them, but only if you use responsive image markup. In your theme Liquid code, use the image_url filter with a width parameter and include srcset attributes. For hero images, serve a maximum of 1200px wide for desktop and 800px for mobile. Our product image optimization guide covers this in detail.

Additionally, add fetchpriority="high" to your hero image tag. This tells the browser to prioritize downloading this image over other resources. Without it, the browser may deprioritize your LCP image in favor of stylesheets or scripts it discovers first.

Cause 2: Render-Blocking Scripts and Stylesheets

Before the browser can render any content, it must download, parse, and execute all render-blocking resources. On Shopify stores, these include your theme's CSS file, Shopify's core JavaScript, and any app scripts loaded in the <head> without async or defer attributes.

The problem compounds with apps. Each Shopify app you install can inject its own CSS and JavaScript into the <head>. We see stores with 8-12 app scripts loading synchronously before any page content renders. Each script adds 100-500ms to LCP.

Fix: Audit your installed apps and remove any you are not actively using. For remaining apps, check if they offer a “load asynchronously” setting. You can also manually modify your theme's layout/theme.liquid to add defer to app script tags that do not need to run before the page renders. Be careful here — some apps break if deferred. Test thoroughly.

Cause 3: Slow Server Response Time (TTFB)

Time to First Byte (TTFB) is the time between the browser requesting your page and receiving the first byte of the response. Shopify's infrastructure is generally fast, but TTFB can spike above 800ms when your theme uses complex Liquid logic, when you have many apps hooking into the page render, or when Shopify's servers are under load.

Fix: Simplify your Liquid templates. Avoid deeply nested loops, excessive {% if %} conditions, and unnecessary Liquid objects. Remove unused theme sections. If your TTFB is consistently above 600ms, it is usually an app problem — disable apps one by one and test TTFB after each to identify the culprit.

Cause 4: Font Loading Delays

If your LCP element is text (a headline, for example), the browser cannot render it until the web font is loaded. Custom fonts from Google Fonts or uploaded font files add 200-800ms to LCP depending on file size and connection speed.

Fix: Add font-display: swap to your @font-face declarations. This tells the browser to immediately render text using a system font, then swap to the custom font once it loads. The text is visible immediately (good for LCP), and the swap is usually fast enough that users barely notice. Also add <link rel="preload"> tags for your font files so the browser starts downloading them before it discovers them in the CSS.

CLS Failures on Shopify: Causes and Fixes

CLS measures visual stability — how much elements shift around while the page loads. A CLS score above 0.1 means visible, disruptive layout shifts are happening. Users experience this as content jumping around: they try to click a button, and suddenly it moves because an ad or image loaded above it.

In our audits, 38% of Shopify stores have CLS above 0.1 on mobile. It is less common than LCP failures but more frustrating for users because it directly disrupts their interaction with the page.

Cause 1: Images Without Dimensions

When an image tag does not specify width and height attributes, the browser allocates zero space for it initially. When the image loads, the browser recalculates the layout and everything below the image shifts down. This is the single most common cause of CLS on Shopify stores.

Fix: Ensure every <img> tag in your theme includes explicit width and height attributes. Shopify's image_url Liquid filter can output these automatically. For responsive images, the browser uses the aspect ratio from width/height to reserve the correct space regardless of the rendered size.

Cause 2: Dynamic Content Injection from Apps

App widgets that load after the initial page render — review widgets, recommendation carousels, upsell popups, announcement bars — frequently cause CLS. The page renders without the widget, then the widget JavaScript runs and inserts HTML, pushing everything below it down or aside.

Fix: Reserve space for app widgets using CSS. If a review widget is typically 200px tall, add a min-height: 200px to its container. For announcement bars that load dynamically, add them to the initial HTML with visibility hidden and reveal them via CSS instead of injecting them via JavaScript. For apps that inject content at unpredictable heights, contact the app developer — well-built apps use the CSS content-visibility property or reserve space automatically.

Cause 3: Late-Loading Web Fonts

When a custom font loads and replaces the fallback system font, the different character widths cause text to reflow, shifting surrounding content. This is called a Flash of Unstyled Text (FOUT) and it contributes to CLS.

Fix: Use font-display: swap combined with a fallback font that closely matches the dimensions of your custom font. The CSS size-adjust, ascent-override, and descent-override properties let you fine-tune the fallback font to match your custom font's metrics, minimizing the layout shift when the swap happens.

INP Failures on Shopify: Causes and Fixes

INP (Interaction to Next Paint) measures responsiveness — how quickly the page visually responds after a user clicks, taps, or types. An INP above 200ms means the page feels sluggish. Users click “Add to Cart” and nothing happens for a noticeable moment. They tap a variant selector and the page freezes.

INP replaced FID (First Input Delay) as a Core Web Vital in March 2024. It is a harder metric to pass because it measures every interaction throughout the page lifecycle, not just the first one. In our data, 29% of Shopify stores fail INP.

Cause 1: Heavy JavaScript from Apps

The most common cause of INP failure is too much JavaScript running on the main thread. Every app adds JavaScript to your page. Chat widgets, analytics tools, recommendation engines, popup builders — each one competes for the browser's single main thread. When a user interacts with the page, the browser cannot respond until it finishes executing whatever JavaScript task is currently running.

Fix: Use Chrome DevTools Performance tab to record a user interaction and identify which scripts are blocking the main thread. Look for “Long Tasks” (tasks exceeding 50ms) during your interaction. Remove unnecessary apps. For essential apps, check if they offer a “lazy load” or “load on interaction” setting — for example, many chat widgets can be configured to load only when the user clicks the chat icon, rather than loading their full JavaScript bundle on page load.

Cause 2: Unoptimized Event Handlers

Custom theme JavaScript that runs expensive operations on every click, scroll, or input event causes INP failures. Common culprits include: variant selectors that re-render entire sections of the page, mega menus that build their DOM on hover, and filtering/sorting that runs synchronously.

Fix: Debounce scroll and input handlers. Use requestAnimationFrame for visual updates. For variant selectors, only update the elements that change (price, image, availability) rather than re-rendering the entire product section. Move expensive computations off the main thread using Web Workers where possible.

Cause 3: Third-Party Script Interference

Analytics scripts (Google Analytics, Facebook Pixel, TikTok Pixel), A/B testing tools, and personalization engines often schedule work during user interactions. They listen for click events, process data, and send network requests — all on the main thread, all competing with your page's ability to respond to the user.

Fix: Load analytics scripts with async and wrap their initialization in requestIdleCallback so they only run when the browser is idle. Use Google Tag Manager's “trigger firing priority” to ensure analytics tags do not fire during critical user interactions. Consider using the sendBeacon API for analytics events instead of synchronous XMLHttpRequest calls.

A Systematic Approach to Fixing Core Web Vitals

Do not try to fix everything at once. Based on our experience auditing 1,200+ stores, here is the most effective order of operations:

1. Remove unused apps. This single step improves all three metrics simultaneously. The average Shopify store has 6-8 apps installed and is actively using 3-4. Each unused app is dead weight on your performance.
2. Fix LCP first. It is the most impactful metric and the most commonly failed. Optimize your hero image, defer non-critical scripts, and preload your font files.
3. Fix CLS second. Add image dimensions, reserve space for app widgets, and match your fallback font metrics.
4. Fix INP last. It requires the most technical work and benefits from the previous steps (fewer apps = less JavaScript = better INP).

After each change, wait 28 days for Google Search Console to collect enough field data to reflect the improvement. Lab data (Lighthouse, PageSpeed Insights) updates immediately, but the ranking impact depends on field data.

How Core Web Vitals Affect Your Rankings

Google has been clear that Core Web Vitals are a “tiebreaker” ranking factor — content relevance still matters more. But in competitive e-commerce niches where many stores sell similar products, page experience can be the difference between position 4 and position 8.

More importantly, Core Web Vitals directly affect user behavior. A page that loads in 1.5 seconds converts at nearly double the rate of a page that loads in 4 seconds. A page with layout shifts frustrates users into bouncing. A page that feels sluggish when they tap “Add to Cart” creates doubt. You can check your overall store health with our trust score calculator to see how performance fits into the broader picture.

The ranking signal matters, but the conversion impact matters more. Fixing Core Web Vitals is ultimately about creating a better shopping experience — and better shopping experiences make more money.

The Bottom Line

Core Web Vitals failures on Shopify almost always come down to three root causes: too many apps, unoptimized images, and poorly loaded fonts and scripts. The fixes are not glamorous — they are methodical, technical, and require testing. But the stores that do this work consistently outperform the ones that do not, both in Google rankings and in conversion rates.

Start with your worst metric, fix the biggest offender, measure the result, and move on to the next one. That is how you pass Core Web Vitals on Shopify.