Updated April 2026

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

Sitemap errors on your Shopify store can block Google indexing — check nowCheck My Sitemap Free

Why Shopify Stores Often Fail Core Web Vitals

Shopify gives you a fast hosting infrastructure and a global CDN, but the platform's flexibility — the ability to install apps and use custom themes — is also the biggest source of performance problems. The most common culprits behind poor Core Web Vitals on Shopify stores are: unoptimized hero images that serve as the LCP element without proper preloading, heavy third-party app scripts that block rendering or delay interactivity, and layout shifts caused by fonts loading late, dynamic announcement bars, or images without declared dimensions.

Shopify's built-in Online Store Speed report in the admin dashboard gives you a speed score, but this is based on Lighthouse lab data — not the CrUX field data that Google uses for ranking. Always check your actual Core Web Vitals in Google Search Console under Experience > Core Web Vitals for the field data that matters for SEO.

Fixing LCP on Shopify: Hero Image Optimization

The LCP element on most Shopify homepages and product pages is the hero image. The most common mistake is relying on Shopify's default lazy loading for all images — which defers the hero image loading until after the page renders, dramatically hurting LCP.

To fix LCP on your Shopify hero image: in your theme's Liquid template (typically sections/image-banner.liquid or your hero section), find the main hero image tag and add fetchpriority="high" and remove the loading="lazy" attribute (or ensure it's set to loading="eager"). Also add a preload hint in your theme's layout/theme.liquid:

{%- if section.settings.image != blank -%}
  <link rel="preload" as="image"
    href="{{ section.settings.image | image_url: width: 1200 }}"
    imagesrcset="{{ section.settings.image | image_url: width: 400 }} 400w,
                 {{ section.settings.image | image_url: width: 800 }} 800w,
                 {{ section.settings.image | image_url: width: 1200 }} 1200w"
    imagesizes="100vw">
{%- endif -%}

<!-- In the image tag itself -->
<img
  src="{{ section.settings.image | image_url: width: 1200 }}"
  fetchpriority="high"
  loading="eager"
  width="1200"
  height="600"
  alt="{{ section.settings.image.alt | escape }}">

Shopify serves images through its own CDN with automatic WebP conversion — use the image_url filter with explicit widths rather than serving your original upload. Keep hero images under 200KB (WebP format, proper dimensions) for mobile users.

Fixing CLS on Shopify

Common CLS sources on Shopify stores and their fixes:

Font loading shifts: Custom fonts loading after page render push text down as they replace system fonts. Fix: add font-display: swap to your @font-face declarations in your theme CSS. This shows a system font immediately (no CLS from blank text) while the custom font loads.

Announcement bar / cookie banner: A dynamically injected announcement bar at the top of the page pushes all content down when it appears. Fix: always include the announcement bar in the initial HTML render (not injected by JavaScript), and set an explicit height so the space is reserved even before the content loads.

Product image sliders: Sliders without fixed height containers cause CLS as images load. Fix: add explicit width and height attributes to all product images, and set CSS aspect-ratio on image containers to reserve space.

Fixing INP on Shopify: App Script Audit

INP measures how quickly your store responds to user clicks and interactions. High INP on Shopify is almost always caused by too many third-party app scripts running on every page. Each installed Shopify app typically injects JavaScript into your theme.liquid or uses Shopify's Script Tag API — and these scripts run regardless of whether the app's features are relevant to the current page.

Audit your app scripts by opening Chrome DevTools, going to the Performance tab, recording a page interaction (like clicking "Add to Cart"), and examining the flame chart for long tasks. Any task over 50ms blocking the main thread contributes to poor INP. Identify which scripts cause those long tasks using the "Bottom-Up" view.

For apps you need: check if the app offers a way to load scripts only on relevant pages (e.g., only on product pages). Many review apps and chat widgets have conditional loading options. For apps you're not actively using: uninstall them. Deleted apps often leave their script tags behind — check your theme.liquid for orphaned script tags from removed apps.

Theme Selection and Shopify's Speed Score

Shopify's default Dawn theme is one of the fastest available — it's built by Shopify specifically with Core Web Vitals in mind, uses minimal JavaScript, and passes Core Web Vitals on most stores out of the box. If you're using a third-party theme (Turbo, Prestige, Flex, etc.) and struggling with Core Web Vitals, the theme itself may be the root cause of your performance issues.

Before blaming apps, test your store's performance on the Dawn theme with your content (but without your apps) to establish a baseline. If Dawn passes Core Web Vitals and your current theme doesn't, you have a theme performance issue. Consider migrating to a lighter theme or working with your theme developer to optimize the specific bottlenecks identified in PageSpeed Insights.

Measuring Core Web Vitals on Shopify

Use Google Search Console's Core Web Vitals report (under Experience) for your actual field data. Run PageSpeed Insights at pagespeed.web.dev on your homepage, a collection page, and a product page — these three page types have different performance profiles. Focus your optimization efforts where the field data (CrUX) shows the biggest issues, not just where your Lighthouse lab score is lowest.

Fix All Technical SEO Issues on Your Shopify Store

Free analysis in 60 seconds

Check My Sitemap Free