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

Most Shopify traffic is mobile, and mobile is where speed problems hurt most. Google measures how real visitors experience your pages through three numbers called Core Web Vitals. This guide explains what they mean, where to see your store's scores in Shopify, and the fixes that make the biggest difference on Shopify themes.

The short answer: aim for a Largest Contentful Paint under 2.5 seconds, Interaction to Next Paint under 200 milliseconds and Cumulative Layout Shift under 0.1, measured on real visits. On Shopify, the biggest wins usually come from the hero image, unused app scripts, and making space for content that loads late.

The three Core Web Vitals

Metric	What it measures	Good
Largest Contentful Paint (LCP)	How fast the main content, usually the hero image, appears	2.5 seconds or less
Interaction to Next Paint (INP)	How quickly the page responds to taps and clicks	200 milliseconds or less
Cumulative Layout Shift (CLS)	How much the page jumps around while loading	0.1 or less

Google assesses each at the 75th percentile of page loads, separately for mobile and desktop. INP replaced First Input Delay as a Core Web Vital in 2024 (web.dev).

Why it matters

• Search: Google says it highly recommends achieving good Core Web Vitals for success with Search (Google Search Central). Speed won't outrank better content, but slow pages hold good content back.
• Sales: in a Google and Deloitte study, a 0.1-second improvement in mobile site speed was linked to an 8.4% increase in retail conversions (web.dev case study).

Where to see your scores in Shopify

Shopify's web performance dashboard shows Core Web Vitals from real visits to your store, not lab tests. Find it under Online Store > Themes or Analytics > Reports > Online store speed (Shopify Performance).

Tips for reading it:

• Look for drops over time. A new app, theme update or code change often explains a sudden decline.
• Focus on your busiest pages: usually home, collection and product pages.
• Low-traffic stores: group data by week or month, because daily figures swing.

Lab tools such as PageSpeed Insights are useful for finding causes, but the real-visit data is what Google uses.

Fixing LCP: the main content appears too slowly

• Never lazy-load the hero image. Load it straight away and mark it as high priority.
• Serve the right size. Use Shopify's responsive image tags so phones don't download desktop-sized images.
• Avoid fade-in animations on the hero. Content hidden behind an animation counts as late.
• Use an image element, not a CSS background, for the main image.
• Separate mobile and desktop hero images when the crops differ.

Fixing INP: taps and clicks feel slow

• Audit your apps. Each app can add scripts to every page. Remove apps you don't use, and check that uninstalled apps left no code behind.
• Defer non-essential scripts, such as chat widgets, reviews and tracking, so they load after the page is usable.
• Keep heavy work off the main thread. Long-running scripts in menus, filters and carts delay every tap.
• Be careful with "speed booster" apps. Shopify warns against apps that game test scores without improving real visits (Shopify developer docs).

Fixing CLS: the page jumps while loading

• Give images their width and height so the browser saves space for them.
• Reserve space for app content, such as review stars, announcement bars and upsell blocks, that loads after the page.
• Load fonts carefully. Self-host fonts on Shopify's CDN, or use system fonts, to avoid text jumping when fonts swap.
• Avoid inserting banners above content after the page has loaded.

Mobile checklist

1. Test on a real mid-range phone, not only on a fast laptop.
2. Check the hero image size and that it isn't lazy-loaded.
3. List every app and remove the ones you don't need.
4. Check that review stars, badges and banners don't push content down.
5. Recheck the web performance dashboard two to four weeks after changes.

Frequently asked questions

What are good Core Web Vitals for a Shopify store? LCP of 2.5 seconds or less, INP of 200 milliseconds or less, and CLS of 0.1 or less, at the 75th percentile of real visits.

Where can I see my Shopify store's Core Web Vitals? In the Shopify admin, under Online Store > Themes or Analytics > Reports > Online store speed. The data comes from real visits.

Do apps slow down Shopify stores? They can. Many apps add scripts to every page. Removing unused apps and deferring non-essential ones is often the quickest improvement.

Is Shopify fast? Shopify's hosting and CDN are fast. Most speed problems come from theme code, large images and app scripts, which can all be fixed.

Do Core Web Vitals affect Google rankings? Google says good Core Web Vitals align with what its ranking systems reward, and recommends achieving them. Content relevance still matters most.

How long until changes show in the scores? Real-visit data builds up over time, so allow two to four weeks before judging the effect.

Want a faster store?

We fix theme, image and app issues as part of our Shopify theme and headless development and Shopify SEO services. If you're weighing a custom storefront, read headless Shopify with Hydrogen, or book a free consultation.