Shopify Site Speed and Core Web Vitals: LCP, INP and CLS Explained

A slow store frustrates shoppers on every page view, and on mobile it's often the first impression. This guide is for Shopify founders and ecommerce managers who want to understand Core Web Vitals, know which numbers to watch, and fix the real causes instead of chasing a Lighthouse score.

Key takeaways

The three Core Web Vitals are LCP (loading), INP (responsiveness) and CLS (visual stability). "Good" means LCP within 2.5 s, INP of 200 ms or less, and CLS of 0.1 or less, at the 75th percentile of real visits (web.dev).
INP replaced First Input Delay as a Core Web Vital in 2024. It's the metric most Shopify stores now struggle with, because it's driven by JavaScript, and apps add a lot of it.
Use Shopify's web performance dashboard (real user data) as your source of truth, not one-off lab tests.
Shopify already handles the CDN, compression and modern protocols. Your wins come from the theme, images, fonts and app scripts.
Avoid "speed booster" apps that promise a score. Shopify's own guidance warns against fake performance apps that game Lighthouse.

Core Web Vitals in plain English

Metric	What it measures	Good	Needs improvement	Poor
LCP (Largest Contentful Paint)	How fast the main content (usually the hero or product image) appears	≤ 2.5 s	2.5–4.0 s	> 4.0 s
INP (Interaction to Next Paint)	How quickly the page responds visibly to taps, clicks and key presses	≤ 200 ms	200–500 ms	> 500 ms
CLS (Cumulative Layout Shift)	How much the layout jumps around while loading	≤ 0.1	0.1–0.25	> 0.25

Sources: web.dev LCP, web.dev INP, web.dev CLS.

Two details matter. First, these are measured at the 75th percentile of page loads, split by mobile and desktop. So a fast experience for most visitors isn't enough if a quarter of visits are slow. Second, a page passes only if it meets all three.

INP counts clicks, taps and key presses during the whole visit, not just the first one. Scrolling and hovering don't count. On a store, that means opening the menu, choosing a variant, tapping add to cart, opening a cart drawer and applying a filter all feed into INP.

Does speed affect SEO?

Google says it "highly recommends site owners achieve good Core Web Vitals for success with Search" and that this aligns with what its core ranking systems seek to reward. It doesn't say how much weight they carry. My view: treat speed as a conversion and experience issue first. Better rankings are a possible bonus, not the main reason. The Shopify SEO guide covers the rest of the picture.

How to measure speed on Shopify

Start with the web performance dashboard

In the Shopify admin, the web performance dashboard shows LCP, INP and CLS based on real user data from the past 30 days, ranked Good, Moderate or Poor. It includes:

Over Time reports with annotations for events like app installs and theme changes, so you can see when a metric got worse.
Page Type reports that break performance down by template (home, product, collection, cart).
Page URL reports for individual pages.

Shopify notes that data can lag by up to 36 hours, covers the last 90 days, and requires the store to be out of private mode.

The workflow Shopify suggests is the one I use: check the summary, find when a metric dropped in Over Time, find which template is affected, then find specific URLs.

Use lab tools to diagnose, not to judge

PageSpeed Insights, Lighthouse and Chrome DevTools are useful for finding why a page is slow. They run a single simulated visit, so the score moves around. Use them to spot a huge unoptimized image or a blocking script, then confirm the fix in the real user data.

The usual causes on Shopify, and the fixes

Shopify's platform handles a lot already. According to Shopify's developer docs, files served through the Shopify CDN are automatically minified and compressed with Brotli and gzip, requests use HTTP/3 and TLS 1.3, HTML is streamed so the browser can start fetching early, and Early Hints are sent for render-blocking assets. You don't need an app for any of that.

What's left is in your control.

Fixing LCP

The LCP element on most store pages is a hero banner or the main product image.

Don't lazy-load the LCP image. Shopify's guidance is explicit that loading="lazy" on the LCP image delays it. Lazy-load only below-the-fold images.
Mark it high priority. Add fetchpriority="high" to the LCP image.
Use a real <img>, not a CSS background image, so the browser discovers it early.
Serve the right size. Use image_url and image_tag with srcset and sizes so phones don't download desktop-size images.
Use preload sparingly. Shopify recommends preloading only one or two resources the browser discovers late.
Cut render-blocking scripts in the head. Defer anything not needed for first paint.

Fixing INP

INP problems come from JavaScript keeping the browser's main thread busy, so taps wait.

Audit app scripts. Every app that injects JavaScript on every page adds work. Remove what you don't use, and check that uninstalled apps didn't leave code in your theme. The app stack audit covers this in detail.
Defer non-critical scripts. Shopify recommends defer for non-critical scripts and async only for independent third-party scripts.
Load code on interaction. Use dynamic import() so a component's code loads when someone uses it, and build drawers and dialogs when they're first opened.
Break up long work. web.dev's INP optimization guide recommends splitting event-handler work and yielding to the main thread so the next frame can paint sooner.
Keep the DOM lean. Large pages (giant mega menus, hundreds of hidden product cards) make every interaction slower to render.
Remove A/B test anti-flicker snippets when you're not running tests.
Make tap targets big enough. Shopify suggests at least 48 × 48 px on mobile to reduce mis-taps and the repeat interactions they cause.

Fixing CLS

Layout shift happens when something appears or resizes after the page has rendered.

Set width and height on every image and video so the browser reserves space. Shopify's image_tag does this when you pass dimensions.
Reserve space for app widgets (reviews, upsells, banners) that load late.
Don't inject announcement bars or banners above content after load.
Tame font swaps. Self-host fonts on Shopify's CDN, consider system fonts, and use fallback font overrides such as size-adjust to reduce the shift when the web font loads.

Watch out: Shopify's performance docs specifically warn against "fake performance apps" that game Lighthouse tests. If an app promises a perfect score without changing your theme or scripts, be skeptical. Real users won't see the difference.

A practical speed workflow

Baseline. Record mobile LCP, INP and CLS from the dashboard, by page type.
Find the worst template. Usually product or collection pages, because they get the most traffic and the most app widgets.
List every script on that template. Use DevTools' network panel to see which domains load and how much JavaScript each brings.
Remove, then defer, then optimize. Removing an unneeded app beats optimizing it.
Fix images and fonts.
Test on a duplicate theme before publishing. Never edit the live theme directly.
Wait for real data. Give the dashboard a couple of weeks after a change before judging it.
Repeat for the next template.

Theme choice matters

If your theme is several years old, heavily customized or built on vintage (non-Online Store 2.0) architecture, you may be fighting the foundation. For the Theme Store, Shopify requires themes to have a minimum average Lighthouse performance score of 60 across home, product and collection pages. That's a floor, not a target. A modern, lightly customized theme with a disciplined app stack is usually faster than a heavily patched older one.

FAQ

What is a good Shopify speed score?

Focus on Core Web Vitals from real users rather than a single score. Aim for "Good" on LCP (≤ 2.5 s), INP (≤ 200 ms) and CLS (≤ 0.1) on mobile at the 75th percentile.

Why is my Shopify INP poor?

Usually too much JavaScript running on the page, often from apps, tracking scripts, chat widgets and heavy theme features. Remove what you don't need and defer the rest.

Do speed optimization apps work?

Some help with specific tasks like image compression, but be cautious with any app that promises a score boost. Shopify warns about apps that game Lighthouse without improving the real experience.

Will a faster store rank higher on Google?

Google recommends good Core Web Vitals for success in Search but doesn't publish how much they weigh. Speed is worth improving for shoppers either way.

How long until I see changes in the dashboard?

Data can lag by up to 36 hours, and the summary covers 30 days, so give changes a couple of weeks to show clearly.

Next steps

Open the web performance dashboard, find your worst-performing template on mobile, and list every script it loads. Remove what you don't need before optimizing anything else. If you want help diagnosing a slow theme or planning a cleanup, book a Shopify consultation.