Start Free Trial Shopify Core Web Vitals: what LCP, INP and CLS mean and how to pass them
Core Web Vitals are Google's three measures of how a page feels to real shoppers: LCP (how fast the main content shows, good at 2.5 seconds or less), INP (how fast the page reacts to a tap, good at 200 milliseconds or less) and CLS (how much the layout jumps, good at 0.1 or less). Google scores them at the 75th percentile of real visits over the last 28 days. On Shopify the usual causes of a fail are app scripts, a heavy hero image, web fonts and theme code.
- 7-day free trial
- No code required
- Cancel anytime
The three Core Web Vitals and the scores that pass
Google scores each metric at the 75th percentile of real visits, so three in four visits need to be in the good range. Mobile and desktop are scored separately, and a page passes when all three are good.
| Metric | What it measures | Good | Needs improvement | Poor |
|---|---|---|---|---|
| LCP | Loading: how long until the biggest thing on screen shows | 2.5 s or less | 2.5 s to 4 s | over 4 s |
| INP | Responsiveness: how long a tap takes to show a result | 200 ms or less | 200 ms to 500 ms | over 500 ms |
| CLS | Visual stability: how much the page jumps while it loads | 0.1 or less | 0.1 to 0.25 | over 0.25 |
LCP
Largest Contentful Paint
On a Shopify store the LCP element is almost always the hero image on the homepage or the first product photo on a product page. Anything that loads before it (app scripts, fonts, theme JavaScript, a slideshow's other slides) pushes LCP later.
INP
Interaction to Next Paint
INP replaced First Input Delay in March 2024. It times the slowest taps of a visit: choosing a variant, opening the menu, pressing Add to cart. When app and theme scripts keep the browser busy, the tap waits in line and the page feels stuck.
CLS
Cumulative Layout Shift
CLS is a score, not a time. On Shopify it usually comes from things that arrive late and push the page down: an announcement bar, review stars, a pay later message, a cookie banner, an app block, or images without a set width and height.
Why Shopify stores fail Core Web Vitals
Shopify's servers and image CDN are fast. What slows a store down is mostly what gets added on top of the theme, and the order it loads in.
App scripts
Every app that shows something on the storefront (reviews, chat, popups, upsells, trackers) adds its own JavaScript. The browser downloads and runs it, often before the product photo, which slows LCP and keeps the browser busy when a shopper taps, which slows INP.
A heavy hero image or slideshow
The hero is usually the LCP element. A large file, a slideshow that loads several images at once, a background video, or a hero that is lazy-loaded all make the main content show later.
Web fonts
Custom fonts in several weights each mean another file. Text can stay hidden until they arrive, and when the font swaps in, lines can reflow and add to CLS.
Theme JavaScript
Mega menus, quick view, sliders, animations on scroll and older themes built on large libraries all run code on the main thread. The more of it runs at once, the slower the page reacts.
Third-party tags
Analytics, ad pixels, heatmaps and tag managers pasted into theme files load on every page. Duplicates are common, such as the same analytics tag added by an app and by hand.
Code left behind by old apps
Some apps add snippets to the theme that stay after you uninstall them. The app is gone, but its script can still load on every page.
How to check your store's Core Web Vitals
-
PageSpeed Insights: read the top half first
The top section shows field data: real Chrome visits to your store over the last 28 days, and whether the page passes. That is what Google uses. The 0 to 100 performance score below it is a lab test on one simulated phone. It is useful for finding problems, but it is not your Core Web Vitals result.
-
Search Console: see every page at once
The Core Web Vitals report groups your URLs into Good, Needs improvement and Poor, for mobile and desktop separately, and names the metric that fails. After a fix, use Validate fix and Google checks the pages again over the next 28 days.
-
Shopify's web performance report
Shopify admin has its own web performance report with LCP, INP and CLS from your store's visits. It is handy when your store has too little traffic for Google to show field data.
-
The Whoosh free speed audit
Enter your store's address and the audit shows which apps load on your pages and what is slowing them down, with no install and no code.
How to improve Core Web Vitals on Shopify, in order of impact
Start at the top. Each step is something a merchant can do without a developer, and the first ones help all three metrics.
-
Remove the apps you no longer use
Then search the theme code for the old app's name: leftover snippets can keep loading after the app is gone. Fewer scripts helps all three metrics.
-
Load the apps shoppers see first, and make the rest wait
Chat, trackers, review widgets lower on the page and popups do not need to load before the product photo. Delaying them frees the browser for the photo (LCP) and for the shopper's taps (INP).
-
Fix the hero image
Use one image rather than a slideshow on mobile, upload it at a sensible size, and make sure the first image on the page is not lazy-loaded. Modern Shopify themes then serve the right size for each screen.
-
Reserve space for anything that arrives late
Give images a width and height, and give app blocks, review stars and banners a fixed space in the layout so they fill a gap instead of pushing the page down. This is the main CLS fix.
-
Use fewer fonts and weights
One or two weights of one font, or a system font, is often enough. Fonts from Shopify's own font library are served by Shopify, and fewer files means text shows sooner and shifts less.
-
Clean up third-party tags
Remove duplicate analytics and pixels, and move tracking out of theme files into Shopify's customer events or the official channel apps where you can.
-
Keep the theme up to date, and go easy on effects
Theme updates often include speed fixes. Autoplay video in the hero, parallax and animations on scroll all cost time on every visit.
-
Measure again after 28 days
Field data covers the last 28 days, so a fix shows up gradually. Compare like with like: the same pages, on mobile, in the field data.
Where Whoosh fits
Whoosh is a Shopify app that fixes the app-script part of the list above, automatically. It does not replace the other fixes.
What it does
- Smart App Loading loads the apps shoppers see first and makes chat, trackers, review tools and popups wait, so the product photo is on screen sooner and the page is free to react to taps.
- AI Page Preloading loads the next page before the shopper taps, so it opens without a wait.
- No code and no theme edits. Install from the Shopify App Store and it starts working.
What it does not do
- It does not rewrite your theme, compress your images or change your fonts. Those fixes above are still yours to make.
- It does not make your apps themselves faster. It changes the order they arrive in.
- It leaves checkout and account pages alone. Checkout runs on Shopify.
You see the result in your dashboard, from a 50/50 test in your first few weeks: shoppers with Whoosh against shoppers without it.
See what slows your store: free audit Shopify speed apps compared
Smart App Loading: US$99 a month
Start with a 7-day free trial, billed through Shopify, and cancel anytime in Shopify. Want AI Page Preloading too? Whoosh Max has both for US$149 a month.
Shopify Core Web Vitals questions
What are good Core Web Vitals scores for a Shopify store?
The same as for any site: LCP of 2.5 seconds or less, INP of 200 milliseconds or less and CLS of 0.1 or less. Google measures each at the 75th percentile of real visits over the last 28 days, for mobile and desktop separately, and a page passes when all three are good.
Why does my Shopify store fail Core Web Vitals?
The usual causes are app scripts that load before the product photo, a heavy hero image or slideshow, several web fonts, theme JavaScript, third-party tags pasted into the theme and code left behind by apps you have uninstalled. Search Console's Core Web Vitals report tells you which metric fails, which narrows it down.
Is the PageSpeed Insights score the same as Core Web Vitals?
No. The 0 to 100 performance score is a lab test on one simulated phone. Your Core Web Vitals result is the field data at the top of the report, taken from real visits over the last 28 days, and that is what Google uses. A store can have a low lab score and still pass, or the other way round.
Do Core Web Vitals affect Google rankings?
Yes, as one of the page experience signals Google's ranking systems use. Helpful, relevant content still matters more, so passing will not lift a page on its own, but a slow store also loses shoppers before they buy, whatever its ranking.
How long until a fix shows in Core Web Vitals?
Up to about four weeks. Field data in PageSpeed Insights and Search Console covers the last 28 days, so it moves gradually as new visits replace old ones. Shopify's web performance report and lab tests show a change sooner.
Can a Shopify app fix Core Web Vitals?
An app can fix part of it. Whoosh's Smart App Loading fixes the app-script part by loading the apps shoppers see first and making the rest wait. No app can shrink an image you uploaded too large or rewrite your theme for you. Be wary of anything that raises the lab score without changing what real shoppers get, since Google uses real visits.
Does Whoosh change my theme or checkout?
No. Whoosh does not edit your theme. It changes when apps load, not how the theme is built, and it leaves checkout and account pages alone. Checkout runs on Shopify.
Still have questions?
Our help centre has the answer.
