Shopify Core Web Vitals Guide: Fix LCP, CLS & INP (2026)

1. What Are Core Web Vitals?

Core Web Vitals (CWV) are a set of three specific metrics that Google uses to measure the real-world user experience of a web page. Introduced by Google in 2020 and made a ranking signal in 2021, they focus on three pillars: loading performance, interactivity, and visual stability.

These metrics are measured using real user data (called "field data") collected from Chrome users who visit your site. This is different from lab tests — Google cares about what actual visitors experience, not just what a testing tool reports.

2. Why Core Web Vitals Matter for Shopify Stores

SEO Impact

Google has used Core Web Vitals as a ranking signal since the Page Experience update in 2021. While content relevance and backlinks still dominate rankings, CWV act as a tiebreaker. If two product pages are equally relevant for a query, the faster one with better CWV scores is more likely to rank higher.

For competitive Shopify niches — fashion, beauty, supplements — this tiebreaker can be the difference between page one and page two. Understanding how your Shopify speed score works helps you prioritize which metrics to tackle first.

Conversion Impact

CWV improvements directly correlate with better conversion rates. Studies consistently show:

• A 100ms decrease in LCP can increase conversions by up to 1.3% (Vodafone case study)
• Reducing CLS by 0.2 points can decrease bounce rate by 15%
• Pages with good INP scores see significantly higher add-to-cart rates

For a Shopify store doing $50K/month, even a 1% conversion improvement translates to $6,000+ in additional annual revenue. To understand the full picture, read our deep dive on how Shopify speed impacts conversions.

Real-World Business Impact of Core Web Vitals

These aren't hypothetical numbers. Major companies have published the business results of their Core Web Vitals improvements:

3. How to Check Your Shopify Store's Core Web Vitals

New Shopify Store? Why Core Web Vitals Field Data May Be Missing

A recurring merchant question is: “How long does it take for a new Shopify store to pass Core Web Vitals?” The honest answer is that Google cannot grade your real-user Core Web Vitals until it has enough Chrome UX Report visits for the page or origin. New stores, low-traffic stores, and newly launched domains often show “not enough real-world speed data” in PageSpeed Insights.

If PageSpeed Insights says there is no field data, treat that as unknown, not “good.” Use the Shopify performance analyzer to find app-script and request groups now, then let Thunder handle safe script deferral and speed optimization before those issues become Search Console warnings.

Core Web Vitals Triage: Custom Fonts, Third-Party Scripts, and Banner Graphics

A fresh Shopify Community question asked how to improve Core Web Vitals while using custom typefaces, third-party scripts, and high-resolution banner graphics. That is the exact mix that makes Shopify CWV confusing: each item hurts a different metric, so fixing “images” alone rarely gets the store into the green.

August 2026 Core Web Vitals Benchmarks for Shopify

The Core Web Vitals bar is no longer low. The HTTP Archive CrUX report tracks the share of origins passing all three metrics with real Chrome users, and 2026 public benchmarks consistently show that roughly half of the mobile web passes all three. That means failing CWV is common, but passing puts your Shopify store ahead of a large part of the market.

For Shopify, the practical takeaway is simple: do not optimize for a vanity lab score first. Optimize the template that gets search impressions, test on mobile, and make sure real visitors pass LCP, INP, and CLS together. Start with the free speed test, then follow our LCP fix guide, INP fix guide, and CLS fix guide for the specific failing metric.

Can a Shopify Store Get a 90+ Mobile PageSpeed Score?

Yes — but chase the right target first. A merchant asking for “90+ mobile” usually has one of two problems: the store fails Core Web Vitals in real-user data, or the PageSpeed Insights lab score looks low even though field data is already passing. Those are not the same problem.

A realistic outcome for many Shopify stores is passing Core Web Vitals with a mobile PageSpeed score in the 80s. A lean theme with limited app scripts can reach 90+. A conversion-heavy store with reviews, bundles, analytics, and ads may need a hybrid approach: let Thunder handle safe automatic deferral, then manually clean the one or two scripts or templates still hurting LCP or INP. If the store still fails after app cleanup, that is when professional speed optimization makes sense.

4. Common Core Web Vitals Issues on Shopify

🎨 High LCP (Slow Loading)

The most common CWV problem on Shopify. Typical causes:

• Large hero images: Uncompressed PNG/JPEG images over 500KB served without modern formats (WebP/AVIF)
• Render-blocking scripts: Third-party app scripts that execute before the main content renders. The average Shopify store loads 15-25 app scripts — many of them blocking
• Slow server response (TTFB): Shopify's shared hosting can have variable response times, especially during traffic spikes
• No preloading: Critical resources like hero images and fonts not preloaded, causing the browser to discover them late
• Excessive CSS: Large, unoptimized CSS files that delay first render

👆 Poor INP (Slow Interactivity)

INP issues are almost always caused by JavaScript blocking the main thread:

• Heavy JavaScript execution: App scripts running expensive operations on every page load
• Third-party apps blocking main thread: Chat widgets, review apps, and analytics tools often register event listeners that slow down interaction processing
• Long tasks: Any JavaScript task over 50ms blocks the browser from responding to user input
• Too many event listeners: Multiple apps attaching listeners to the same elements (e.g., add-to-cart buttons)

📐 CLS Issues (Layout Shifts)

Visual instability that frustrates users:

• Images without dimensions: When width and height attributes are missing, the browser can't reserve space before the image loads
• Dynamic content injection: Banners, popups, and notification bars that push content down after initial render
• Font loading (FOUT/FOIT): Custom fonts that cause text to reflow when they finish loading
• Lazy-loaded content above the fold: Content that should load immediately but is deferred
• App-injected elements: Review widgets, trust badges, and upsell carousels that load asynchronously and shift content

What Do I Actually Change in Shopify?

If your PageSpeed report says “poor Core Web Vitals” but does not explain what to do in Shopify, use this diagnostic order. Start with the no-code checks, then edit theme code only when the same metric still fails on your money pages.

5. How to Fix LCP on Shopify

LCP is the most impactful metric to improve on Shopify. For a dedicated walkthrough, see our Shopify LCP optimization guide. Here's a step-by-step approach:

Step 1: Identify Your LCP Element

Open PageSpeed Insights and look at the "Largest Contentful Paint element" diagnostic. On most Shopify stores, the LCP element is the hero image on the homepage or the main product image on product pages.

Step 2: Optimize the LCP Image

• Use Shopify's image CDN: Shopify automatically serves images via their CDN. Append _800x.webp or use the image_url filter in Liquid to request specific sizes and modern formats
• Right-size images: Don't serve a 3000px wide image for a 800px container. Use Liquid's | image_url: width: 800 filter
• Preload the LCP image: Add a preload hint in your theme's theme.liquid:
  <link rel="preload" as="image" href="{{ section.settings.hero_image | image_url: width: 800 }}" fetchpriority="high">
• Add fetchpriority="high": On your hero image's <img> tag, add this attribute to tell the browser to prioritize it
• Don't lazy-load the LCP image: Remove loading="lazy" from your hero/product image. Learn more about proper lazy loading implementation

Step 3: Reduce Render-Blocking Resources

• Defer non-critical JavaScript: Add defer or async to script tags that aren't needed for initial render
• Audit app scripts: Use Chrome DevTools' Network tab filtered to JS — identify which app scripts load synchronously and delay rendering. Consider removing unused apps or finding lighter alternatives
• Inline critical CSS: Extract the CSS needed for above-the-fold content and inline it in the <head>

Step 4: Improve Server Response Time

• Reduce Liquid complexity: Deeply nested loops and complex Liquid logic increase server-side render time
• Minimize redirects: Each 301 redirect adds 100-300ms. Avoid unnecessary URL redirects
• Use Shopify's CDN effectively: Ensure static assets are served from Shopify's CDN, not third-party servers
• Choose a fast base theme: Your theme is the foundation — see our list of the fastest Shopify themes for 2026

Not sure whether to tackle LCP yourself or hire help? Read our comparison of DIY vs expert speed optimization to decide what's right for your store.

6. How to Fix INP on Shopify

INP measures the worst interaction responsiveness throughout a user's visit. Here's how to improve it:

Step 1: Identify Long Tasks

Open Chrome DevTools → Performance tab → record a page load and interact with the page. Look for long tasks (marked with red corners) that exceed 50ms. These tasks block the main thread and delay interaction responses.

Step 2: Defer Third-Party App Scripts

• Audit installed apps: Each Shopify app may inject JS that runs on every page load. Review your apps in Settings → Apps and sales channels and remove any you're not actively using
• Delay non-essential scripts: Chat widgets, review popups, and loyalty programs don't need to load immediately. Defer them until after user interaction or a few seconds of idle time
• Use requestIdleCallback: If you have custom JavaScript, wrap non-critical work in requestIdleCallback() to yield to the main thread

Step 3: Break Up Long Tasks

• Yield to the main thread: Use scheduler.yield() (where supported) or setTimeout(fn, 0) to break long tasks into smaller chunks
• Debounce event handlers: If you have scroll or resize event handlers, debounce them to reduce main thread work

Step 4: Reduce JavaScript Payload

• Remove unused JavaScript: Use Chrome DevTools' Coverage tab (Ctrl+Shift+P → "Coverage") to find JS that loads but never executes
• Code-split where possible: Load JavaScript for specific features (like a size guide modal) only when the user triggers them
• Prefer CSS over JS: Animations, hover effects, and simple interactions can often be handled with CSS instead of JavaScript
• Audit your apps: Check our app speed impact reports to see how much JavaScript each common Shopify app adds

For a comprehensive speed improvement checklist that covers INP and all other metrics, see our Shopify store optimization checklist.

7. How to Fix CLS on Shopify

CLS is often the easiest metric to fix, yet many Shopify stores ignore it. Here's how:

Step 1: Set Explicit Dimensions on All Media

• Add width and height to images: Every <img> tag should have width and height attributes. In Liquid:
  <img src="{{ image | image_url: width: 400 }}" width="400" height="400" alt="{{ image.alt }}" style="aspect-ratio: 1/1;">
• Use aspect-ratio CSS: For responsive images, set aspect-ratio: 16/9 (or whatever ratio applies) in CSS to reserve space
• Set dimensions on iframes and videos: YouTube embeds and video players need explicit sizing too

Step 2: Reserve Space for Dynamic Content

• Announcement bars: If you use a top banner, set a fixed min-height so content below it doesn't shift when it loads
• Review widgets: Reserve a min-height for the review section based on typical content height
• App-injected elements: Use CSS contain: layout to prevent injected elements from shifting surrounding content

Step 3: Optimize Font Loading

• Use font-display: swap: This shows a fallback font immediately and swaps when the custom font loads — preventing invisible text (FOIT)
• Preload critical fonts: Add <link rel="preload" as="font" href="..." crossorigin> for your primary font files
• Use system font stacks as fallback: Match your fallback font metrics to your custom font using size-adjust, ascent-override, and descent-override to minimize reflow

Step 4: Avoid Late-Loading Above-the-Fold Content

• Don't lazy-load above-the-fold images: Only apply loading="lazy" to images below the fold. See our lazy loading guide for implementation details
• Avoid document.write(): Scripts that use document.write() inject content late and cause shifts
• Load ads/banners with reserved space: If using promotional banners, always set fixed dimensions

8. Shopify-Specific CWV Challenges

Shopify's platform creates some unique challenges that don't apply to custom-built sites:

Liquid Rendering

Shopify uses the Liquid templating engine for server-side rendering. Complex Liquid templates with nested loops (e.g., iterating through product variants within collection loops) increase Time to First Byte (TTFB), which directly impacts LCP. Simplify your Liquid templates and avoid unnecessary computation in templates.

App Script Bloat

This is the #1 CWV challenge on Shopify. Unlike custom platforms where you control every script, Shopify apps inject their own JavaScript into your storefront. You can't easily modify or optimize these scripts. Each app adds to your total JavaScript payload, increases main thread blocking time, and can cause layout shifts.

The solution: ruthlessly audit your installed apps. Remove anything you're not using. For essential apps, test their CWV impact individually by temporarily disabling them. Some apps offer "lite" or "lazy-load" modes — use them. For a comprehensive look at how apps affect performance, see our guide on third-party script impact on Shopify. You can also check our best speed optimization apps in 2026 to find tools that help rather than hurt your CWV scores.

Limited Server-Side Control

You can't configure server caching, HTTP/2 push, or edge workers on Shopify. Your server-side optimization options are limited to Liquid efficiency and Shopify's built-in CDN. This is a trade-off of the hosted platform model.

Checkout Speed

Shopify controls the checkout experience, and you have limited ability to optimize it (especially on non-Plus plans). The good news: checkout pages typically aren't indexed by Google, so they don't affect your CWV scores in Search Console. Focus your optimization efforts on the pages that are indexed — homepage, collections, products, and blog posts.

9. Tools for Monitoring Core Web Vitals

Fixing CWV is only half the battle. You need ongoing monitoring because new app installs, theme changes, or content updates can regress your scores at any time. We compared the best Shopify speed test tools to help you pick the right one.

10. Frequently Asked Questions