According to the HTTP Archive's 2025 Web Almanac, only 48 percent of mobile sites passed all three Core Web Vitals thresholds. Given that mobile drives the vast majority of Shopify traffic, this benchmark offers a clear reflection of the typical merchant's mobile experience.
Most merchants first encounter Core Web Vitals during a technical SEO audit, listed alongside canonical tags and crawl errors. While Google integrated these metrics into its page experience ranking signals in 2021, their impact goes beyond search rankings. As early as 2020, Google and Deloitte found that a 0.1-second improvement in mobile load time lifted retail conversions by 8.4 percent. Although that study relied on aggregate retail data rather than a Shopify-specific sample, it highlights the core mechanism at play: Core Web Vitals convert speed and responsiveness into three concrete, measurable scores.
This guide works through what each metric measures, why it tracks with buying behavior, and the Shopify-specific fix for each. It closes on a source of vitals damage a theme-and-image audit typically never touches.
What Core Web Vitals actually measure
Google scores three things about a page, drawn from data on real visits rather than a single run on a fast office connection.
- Largest Contentful Paint (LCP) clocks how long the page's biggest visible element takes to render. On most Shopify pages that element is the hero banner or the primary product photo. A good score sits under 2.5 seconds.
- Interaction to Next Paint (INP) clocks the gap between a shopper's tap or click and the page's visible response, sampled across the full visit instead of only the first interaction. A good score sits under 200 milliseconds. INP replaced First Input Delay as the interactivity metric in March 2024.
- Cumulative Layout Shift (CLS) scores how much visible content shifts position while the page finishes loading. It's a unitless score rather than a measure of time. A good score sits under 0.1.
All three metrics draw on field data from Chrome sessions in the Chrome User Experience Report. Because Google measures each vital at the 75th percentile of visits rather than the median, these numbers reflect a slower visitor's experience, such as someone using a two-year-old phone over mid-tier mobile data, rather than an audit run on fast office Wi-Fi. A companion piece works through how Shopify page speed moves conversoin rate end to end; these three vitals are the specific mechanisim behind it.
Largest Contentful Paint (LCP)
Why it moves orders. LCP marks the moment a shopper's screen finally shows something worth looking at. Until then they're staring at a blank or half-built page, and a share of them give up and go back to the search results before it finishes. LCP also fails on more sites than either of the other two vitals, so for a store that hasn't touched performance work yet, it's usually the highest-leverage place to start. Because the largest element on most pages is an image, fixing LCP is mostly image work.
How to fix it on Shopify.
- Compress hero and product images, convert them to WebP or AVIF, and serve them at the size they actually display at.
- Preload the LCP image so the browser requests it immediately instead of discovering it midway through the page load.
- Cut server response time with a fast theme and a CDN, since a slow first byte delays everything that depends on it.
- Skip lazy-loading on anything above the fold. Lazy-loading the LCP element delays the exact render the metric is timing.
Interaction to Next Paint (INP)
Why it moves orders. A store that hesitates when a shopper taps add to cart or opens a variant picker reads as broken in that moment. Shoppers rarely wait around to find out otherwise and the delay is usually a JavaScript problem. Heavy scripts occupy the browser's main thread, and the page can't answer any input until they clear it.
How to fix it on Shopify.
- Audit installed apps. Each one can inject scripts that load on every page whether that page uses the feature or not, so remove what the store no longer needs.
- Break long JavaScript tasks into smaller ones so the browser has room to respond to input between them.
- Defer non-essential third-party scripts, chat widgets, and marketing tags until after the page becomes interactive.
- Load review widgets and pop-ups only on the pages and at the moments they're actually needed.
Cumulative Layout Shift (CLS)
Why it moves orders. A shopper reaches for a button just as a banner or image finishes loading above it, and the push shoves the button down at the exact moment of the tap. On a product or checkout page, that single mistap can cost the order it was supposed to complete.
How to fix CLS on Shopify.
- Set explicit width and height on every image and video so the browser reserves the space before the asset loads.
- Reserve space in the layout for anything that loads late, including banners, ads, and app-injected content.
- Preload web fonts so the page doesn't jump when a fallback font swaps to the brand font.
- Add new content below the fold or into space already reserved for it, never above content the shopper is currently reading.
How your testing stack affects Core Web Vitals
A theme-and-image checklist misses one of the more common sources of vitals damage on a Shopify store. Everything installed after launch to help the store grow adds its own weight. Marketing tags, chat widgets, and review apps each add some, and a client-side A/B testing tool is frequently the largest single contributor among them.
Most testing tools render client-side. The browser paints the store's original page first. Only afterward does the testing tool's script wake up. For a beat, the shopper sees the original page before it changes. Testing teams call that flash flicker. It reaches all three vitals in one motion. The second paint delays LCP, the rewrite shifts the layout and raises CLS, and the script itself competes for the main thread and adds to INP.
Server-side rendering removes the swap entirely. When a testing platform assigns and renders the variant on the server, the shopper's browser receives the assigned version in its first paint, and there's nothing left to rewrite afterward. That's the mechanism behind how Shoplift runs tests on Shopify stores without paying the flicker penalty, and it's why running more tests doesn't have to come at the expense of page experience. A separate post in this series covers how to keep a testing program running without slowing your site down.
Fixing this doesn't have to mean opening an engineering ticket every time the team wants to ship a test. Auditing installed apps and moving variant rendering server-side are one-time infrastructure decisions, not a recurring draw on a developer's calendar. That's the difference between a testing program that stalls on the Dev Tax and one that keeps shipping.
Before spending more time compressing images, check whether the testing tool is the bigger contributor to the store's Core Web Vitals numbers. In a lot of audits, it is.
Quick wins to start today
A handful of fixes deliver a meaningful share of the available gain without a full performance project behind them. Compress the largest images on the homepage and top product pages, convert them to WebP, and preload the hero image. Add explicit width and height to every image and embedded element on the page. Remove one or two installed apps nobody uses anymore, and confirm whether the testing tool in place renders client-side or server-side. None of it needs a development sprint, and each item moves LCP or CLS directly.
How to measure Core Web Vitals on your Shopify store
Run the homepage, a representative product page, and the cart through Google PageSpeed Insights, and read the field data section rather than the lab score at the top. Field data reflects real visitors. A lab score is a single simulated run, and it can read better or worse than what shoppers actually experience.
For a store-wide view, check the Core Web Vitals report inside Google Search Console. It draws on the same Chrome User Experience Report as PageSpeed Insights, but scores the whole site at once instead of one URL at a time, which makes it the faster route for a first-pass performance audit. Review mobile and desktop separately. Mobile is almost always the weaker score, and it usually carries the larger share of Shopify traffic, so fix it first.
Where this fits in a testing program
Core Web Vitals don't stay fixed once cleaned up. Every app added, every tag a marketing team drops in, and every test that ships can move the score, so it drifts unless something is actively watching it. The vitals need the same ongoing attention as conversion rate itself rather than a cleanup pass followed by neglect.
That matters more once a store is running an active testing program. The compounding ledger of small conversion lifts a program is built on only holds up if the tests producing those lifts aren't quietly taxing the page experience underneath them. A test that adds a tenth of a point to conversion rate while dragging down LCP for every visitor in it isn't a clean win once both sides of the ledger are counted. A team that treats Core Web Vitals as an ongoing metric to protect, not a technical box checked once, keeps that ledger accurate. That ledger is what scaling on conversion rather than traffic actually consists of.
Frequently asked questions
What is a good Core Web Vitals score? A page passes when at least 75 percent of real visits meet all three thresholds: LCP under 2.5 seconds, INP under 200 milliseconds, and CLS under 0.1. Missing any one of the three means the page fails overall, even when the other two look strong.
Do Core Web Vitals affect Shopify SEO? Yes. Google has counted Core Web Vitals among its page experience ranking signals since 2021, where they mostly function as a tiebreaker between pages with similar content and relevance. Separately, the speed and stability the metrics measure also move conversion rate on their own, so the payoff shows up twice, once in rank and once in revenue.
Which Core Web Vital should I fix first? Usually LCP. It fails on more sites than either of the other two vitals, and since the largest element on most Shopify pages is an image, image fixes tend to produce the fastest measurable gain. Check a store's own Search Console data first, since a store carrying an unusually heavy JavaScript footprint may find INP is the bigger gap.
Do Shopify apps affect Core Web Vitals? Yes. Any app that injects scripts adds weight that can slow INP, and an app that loads content in after the initial render can raise CLS if that content has no reserved space. A client-side A/B testing tool does the same thing, so it belongs in an app audit rather than a separate review of its own.
Subscribe to the Shoplift newsletter
Get insights like these emailed to you bi-weekly!
{{hubspot-form}}
