How to Improve Core Web Vitals on Shopify

Who it is for

Store owners and developers with failing vitals

Time needed

1 to 3 days of fixes, then 28 days to validate

What you need

Admin access, theme code access and Search Console

On a Shopify store, the three Core Web Vitals tend to fail for three different reasons, and each one has its own fix. A store can have a fast hero image and still fail on responsiveness because of a chat widget, or pass on desktop and fail on mobile because a pop-up pushes the page down. Treating "speed" as one problem is why so many speed projects change little.

This guide shows where to read your real scores, how to find which template and which element is failing, and the fixes I apply on Shopify themes for each metric. Thresholds and admin paths are as I checked them on Shopify's and Google's documentation on 7 November 2026.

The three metrics and their thresholds

Google and Shopify use the same thresholds. A page group passes when 75% of real visits meet the "good" level, and its overall status is set by its worst metric. Poor CLS with good LCP and INP still makes the group poor.

Anything between good and poor is "needs improvement" in Search Console and "moderate" in Shopify's reports. Mobile and desktop are assessed separately, and on most stores mobile is where the problems are, because phones have slower processors and most shoppers browse on them.

Where to see your real scores

There are two kinds of data, and only one of them counts for Google. Field data comes from real visits. Lab data comes from a single simulated test, such as a Lighthouse run. Lab tests are useful for diagnosing, but Search Console's Core Web Vitals report uses field data from the Chrome UX Report (CrUX).

1. Shopify's summary. Go to Online Store > Themes. The performance summary shows LCP, INP and CLS from real user data over the past 30 days, with a date picker for today, the last 7 days and the last 30 days, plus sessions by device type.
2. Shopify's full reports. Go to Analytics > Reports and search for "contentful", "next" or "cumulative" to open the report for each metric. You need the Reports staff permission, and the store can't be in private mode, or there is no real user data to show.
3. Search Console. Open Experience > Core Web Vitals in your property. URLs with a similar experience are grouped, so one fix to a template often clears hundreds of URLs at once.
4. A lab test for diagnosis. Run a key page through PageSpeed Insights or the free Shopify speed checker to see which element is the LCP element and which scripts block the main thread.

Find the template that's failing

A store-wide average hides the problem. Shopify's reports break each metric down by page type and by page URL, which tells you whether the issue sits in the product template, the collection template or the home page.

1. Open the Page Type report for the failing metric and set the device to mobile. Note which template is worst. Product pages carry most of the traffic on most stores, so start there if two are close.
2. Check the Over Time chart. Shopify adds numbered event markers for app installs, theme updates and new code. If a metric got worse on a particular day, the marker next to it is your first suspect.
3. Run a lab test on one URL of that template. Note the LCP element, the long tasks and the layout shifts it reports.
4. List the apps that load on that template. The Shopify app detector shows which app scripts run on a live page, including ones from apps you thought you had removed.

How to fix slow LCP

On Shopify, the LCP element is nearly always an image: the hero banner on the home page, the first product photo on product pages, or the first collection image. Shopify's own theme guidance gives the rules, and these are the steps I take in that order.

1. Never lazy load the LCP image. Shopify's image_tag filter sets loading="lazy" automatically for images in sections further down the page, but custom sections and some older themes lazy load everything. Check the hero and the first product image for loading="lazy" and remove it.
2. Give it high priority. Add fetchpriority="high" to the LCP image only, for example {{ image | image_url: width: 1600 | image_tag: loading: 'eager', fetchpriority: 'high', sizes: '100vw' }}.
3. Use an image element, not a background. A hero set as a CSS background-image is found late by the browser. Shopify recommends an <img> for hero content, and a <picture> element if you want different mobile and desktop images.
4. Serve the right size. Build images with image_url and image_tag rather than hand-written CDN links. image_tag generates a srcset, and Shopify's CDN picks a modern format such as WebP or AVIF for browsers that support it. Add an accurate sizes value so phones don't download the desktop width.
5. Clear the way. Remove or defer render-blocking app scripts in the head, and keep preloads to the one or two resources the browser finds late. Font preloads belong above {{ content_for_header }}.
6. Cut server time. Heavy Liquid delays the first byte, and everything waits for it. Avoid nested loops over large collections, use limit on for loops, and move metafield lookups out of loops.

How to fix poor INP

INP measures the delay between a tap and the next screen update. It fails when the main thread is busy running JavaScript at the moment the shopper taps "Add to cart", opens the menu or picks a variant. On Shopify the cause is usually the number of scripts, not one bad one.

1. Audit every script. Shopify's guidance is blunt: remove app scripts, tracking pixels and theme code that aren't worth their cost. I list each script on the product page with what it does and who still uses it. Review widgets, chat, pop-ups and duplicate analytics tags are the usual finds.
2. Defer what stays. Load non-critical scripts with defer. Use async only for independent third-party scripts where order doesn't matter.
3. Load on interaction. Code for a size chart, a quick view or a reviews tab can load with a dynamic import() when the shopper opens it, rather than on every page view.
4. Break up long tasks. Debounce and throttle event handlers such as scroll and resize, and yield to the browser in long-running code so a tap can be handled in between.
5. Remove dormant test code. A/B testing tools often add an anti-flicker snippet that hides the page until the test script runs. Remove it when no test is running.

How to fix layout shift

CLS is the easiest of the three to fix once you can see what moves. Record the page loading on a phone, or use the layout shift regions in a lab test, and note every element that jumps.

• Images without dimensions. image_tag adds width and height attributes, so the browser reserves the space. Images added with a plain <img src> in custom code often don't, and push content down as they load.
• App blocks that appear late. Reviews stars, payment messaging, upsell blocks and announcement bars often insert themselves after the page renders. Reserve space with a min-height on the container so the content below doesn't move.
• Font swaps. When a web font replaces the fallback font, text can reflow. Shopify recommends size-adjust and font metric overrides on the fallback, or system fonts, or self-hosting fonts on the Shopify CDN.
• Animations. Animate with transform and opacity, not properties that change the layout, such as height or top.

Apps, themes and "speed" apps

Your theme sets the baseline. Themes in the Shopify Theme Store must average a Lighthouse performance score of at least 60 across the home, product and collection pages, so a current theme starts in reasonable shape. What happens after launch is what usually breaks the vitals: apps, tracking tags and custom sections.

Be wary of apps that promise a higher speed score. Shopify's own guidance warns against "fake performance apps" that game Lighthouse tests. A trick that changes a lab score does nothing for field data, and field data is what Search Console and Shopify's reports measure.

If you're weighing a theme change for speed, my comparison of Dawn and premium themes covers what you gain and lose.

Confirm the fix worked

1. Retest in the lab straight after the change, to make sure the element you fixed behaves as expected.
2. Watch Shopify's Over Time report for the metric and template over the following days. Allow for the delay of up to 36 hours.
3. Start validation in Search Console. Open the issue in the Core Web Vitals report and click Start tracking. Google monitors the affected URLs for 28 days and marks the issue fixed only if none of them fail in that window.

Field data moves slowly because it's a rolling picture of real visits. Expect a few weeks before the change shows fully in Search Console.

Common mistakes

• Chasing the Lighthouse score. A lab score of 95 with failing field data is still failing. Fix what real shoppers experience.
• Lazy loading every image, including the one that defines LCP.
• Uninstalling an app and assuming its code went with it. Check the theme files and the live page for leftover snippets.
• Preloading too much. Preloading five fonts and three images makes them compete with the LCP image.
• Testing only the home page. Product and collection templates usually carry more traffic and more apps.
• Ignoring mobile. Desktop often passes while mobile fails, and Google assesses them separately.

Core Web Vitals checklist

• Store is public, so Shopify collects real user data.
• Mobile LCP, INP and CLS checked per page type in Analytics > Reports.
• LCP image is an <img>, not lazy loaded, with fetchpriority="high" and an accurate sizes.
• All images built with image_url and image_tag.
• Every app script on product pages has an owner and a reason, and the rest are removed.
• Remaining scripts use defer or load on interaction.
• App blocks and banners have reserved space.
• Fallback fonts adjusted, or system fonts used.
• No anti-flicker snippet without a live test.
• Search Console validation started after each fix.

What to do next

Start with Shopify's Page Type report on mobile, pick the worst template and the worst metric, and work through the matching section above. One template fix usually moves a whole URL group in Search Console.

If you'd rather hand it over, my Shopify speed optimization work starts from $100 and is measured against Shopify's field data, not a lab score. Or send me your store for a free review and I'll tell you which metric is failing and why.

Frequently asked questions

Sources

1. Understanding Core Web Vitals and Google search results, Google Search Central
2. Understanding page experience in Google Search results, Google Search Central
3. Core Web Vitals report, Google Search Console Help
4. Web performance dashboard, Shopify Help Center
5. Performance best practices for Shopify themes, Shopify.dev
6. image_tag filter, Shopify.dev

Related services and work

Written by Ashraf Siddik

I'm a Shopify developer and CRO specialist. I have built and improved Shopify stores since 2018, completed more than 1,000 projects, and hold a 4.96 average rating across 719 client reviews.

About me · Client reviews