tacey
Install on Shopify
Most advice on Shopify Core Web Vitals is a list of everything you could possibly do. This is not that. This is a guide to the few things that actually fix a failing score, because a store owner has a business to run, not a science project. The goal is not a perfect score; the goal is a faster site that converts more shoppers.
What are Core Web Vitals in 2026?
Core Web Vitals are three specific metrics Google uses to measure a webpage's real-world user experience. They are Largest Contentful Paint (LCP) for loading performance, Interaction to Next Paint (INP) for responsiveness, and Cumulative Layout Shift (CLS) for visual stability. These metrics are a confirmed input for Google's ranking algorithm.
Think of them as a proxy for user frustration. A slow-loading page (bad LCP), a button that does nothing when clicked (bad INP), or content that jumps around while a user tries to read it (bad CLS) all create a poor experience. Google prefers to send its users to pages that do not cause this frustration.
Since March 2024, INP has officially replaced an older metric called First Input Delay (FID). This change reflects a focus on the entire interaction experience, not just the first click, making it a more comprehensive measure of a page's responsiveness.
How does LCP fail on Shopify and how do you fix it?
Largest Contentful Paint (LCP) measures how long it takes for the largest image or text block to become visible to the user. On a Shopify store, this is almost always a hero banner image on the homepage or the main product image on a product page. A good LCP is 2.5 seconds or less.
The most common cause of a poor LCP score is an unoptimized, oversized image. The browser has to download and render a massive file before the main content appears, delaying the entire experience. This is especially true for stores using high-resolution images from professional photoshoots without compressing them for the web.
The fix is direct: compress your images. Use Shopify's built-in image optimization or a dedicated app to reduce file sizes without a noticeable drop in quality. Second, ensure you are using modern image formats like WebP, which offer better compression than older formats like JPEG. Finally, consider lazy loading images that are below the fold, so the browser can prioritize rendering the main hero image first.
A worked example: The true cost of an unoptimized hero image
A typical Shopify theme banner is 1600px wide. A professional photo might be 4000px wide and 5MB. Even after Shopify's basic server-side compression, that image could still be 1.5MB. This is far too large for a fast LCP. Your goal for a hero image should be under 300KB.
On a standard mobile connection, that 1.5MB image can take over 3 seconds to download by itself. Add in the time for the browser to process other site elements, and your LCP can easily hit 5 or 6 seconds. This is more than enough time for a potential customer to assume the page is broken and leave.
The fix is tangible. Using an online tool or a Shopify image optimization app, you can convert that 5MB JPEG to a 1600px wide WebP file. The result is often around 250KB with no visible loss in quality. This single change can cut multiple seconds off your LCP time.
Edge case: When the LCP element is not an image
Sometimes the largest element is a block of text, not a picture. This happens when a large headline uses a custom font that must be downloaded. The browser has to wait for this font file before it can render the text, which delays the LCP event.
The symptom is often a flash of invisible text (FOIT) or a flash of a different system font (FOUT). PageSpeed Insights will confirm this by identifying a text element, like an H1, as the LCP element. If you see this, your fonts are the likely bottleneck.
The solution involves preloading your key font files. This is a more technical fix that may require editing your theme's code. You add a specific line of code that tells the browser to fetch the important font file much earlier in the loading process, preventing it from delaying the main text.
What causes poor INP scores on Shopify?
Interaction to Next Paint (INP) measures the delay between a user's action, like clicking a button or tapping a menu, and the page's visual response. A good INP score is under 200 milliseconds. A high INP feels like the site is frozen or lagging.
On Shopify, the primary culprit for poor INP is third-party app code. Each installed app adds its own JavaScript that has to run. When a user tries to interact with the page, the browser might be busy executing a script from a loyalty app, a review widget, or a popup. This blocks the main thread, delaying the visual feedback for the user's click.
To improve your INP, you need to audit your apps. Remove any that are not providing significant value. For the ones you keep, investigate if they offer performance settings or asynchronous loading options. A tool from our free tools collection, the App Stack Detector, can help you see what's running on a store. Reducing the amount of JavaScript that has to run on every page load is the most effective way to make your site feel more responsive.
The trade-off: App features versus site responsiveness
Every app promises value, like a higher AOV or more email signups. But each one also consumes browser resources that can slow your site. A loyalty app might boost customer retention but harm INP, costing you sales from new, impatient shoppers who perceive your site as broken.
The key is to measure this trade-off. Does the proven financial value from the app outweigh the potential loss from slower interactions? An A/B test is the ideal way to measure this. Run your site with and without the app's script to see the real impact on your conversion rate.
A concrete step is to perform a script audit. Use your browser's developer tools performance profiler to see which scripts take the longest to execute. If a script from a low-value app is a top offender, you have an easy decision to make. Remove it.
A worked example: How a chat widget can freeze your 'Add to Cart' button
Imagine a user clicks "Add to Cart." At that exact moment, a chat widget's script is running a heavy task, like analyzing the user's session. The browser is busy with the chat widget's code and cannot immediately process the user's click.
Because the browser's main thread is blocked, it cannot provide instant visual feedback. The "Add to Cart" button does not change, and no confirmation appears. The delay is 600ms, three times the "good" INP threshold of 200ms. The site feels broken.
Frustrated by the lack of response, the user clicks the button again. The first click finally registers, followed immediately by the second. Now two items are in the cart. This creates a poor experience and can lead to cart abandonment or a customer support request.
Why does my Shopify site have a high CLS score?
Cumulative Layout Shift (CLS) measures how much the content on your page unexpectedly moves or shifts around as it loads. A good CLS score is 0.1 or less. High CLS is frustrating because a user might try to click a button, only for an image or ad to load above it and push the button down, causing a misclick.
This issue often stems from images, ads, or custom fonts loading without reserved space. For example, if an image doesn't have its dimensions specified in the code, the browser won't know how much space to save for it. Text will appear first, and then the image will pop in, pushing all the text down.
To fix CLS, ensure all your images and video elements have size attributes (width and height) defined. This allows the browser to allocate the correct amount of space before the element has finished loading. Also, be wary of popups or banners injected by apps that appear after the initial page load, as these are a frequent source of layout shifts.
A worked example: The pop-up that causes misclicks
Consider a "subscribe for 10% off" banner. The main page content loads quickly. The user sees the product they want and moves their cursor to click the "Add to Cart" button. It is a moment of high intent.
Just before the click, the pop-up script finishes loading and injects the banner at the top of the page. It has no reserved space, so it pushes the entire page layout down by 150 pixels. This constitutes a massive and jarring layout shift.
The user's click, intended for the "Add to Cart" button, now lands on the banner's "No, thanks" link. This is the exact kind of frustrating experience CLS is designed to measure. It directly harms the user's journey at a critical moment.
Edge case: Layout shifts from late-loading fonts
Another frequent cause of CLS has nothing to do with images or ads. It is caused by text. The page first renders using a fallback system font like Arial. Seconds later, your theme's branded web font, like Lato, finishes downloading.
The custom font has different sizing and spacing characteristics than the fallback font. When the browser swaps it in, headlines and paragraphs reflow to fit the new font metrics. This causes text to shift on the screen, contributing to a poor CLS score.
The fix is to use a modern CSS property like `font-display: optional` or to preload your most important font files. This gives you more control over font loading behavior, minimizing the jarring shift when the custom font is applied to the page.
A passing score is the floor, not the ceiling. The real goal is a page that feels instant to a customer, because that's what earns the sale.
Which Shopify themes perform best for Core Web Vitals?
Your theme is the foundation of your store's performance. Some themes are built with speed in mind, while others are loaded with features that can slow things down. A lightweight theme gives you a much better starting point for passing Core Web Vitals.
Shopify publishes its own performance data for themes sold on its theme store. According to this data, themes like Dawn, Impulse, and Prestige consistently show strong performance across real-world stores. Choosing a theme that is already optimized can save you countless hours of troubleshooting.
When selecting a theme, look for one that is marketed as "performance-focused" and check its real-world scores if possible. While it's tempting to choose a theme with every imaginable feature built-in, it's often better to start with a fast, clean base and add only the specific apps you truly need.
The cost of choosing the wrong theme foundation
A merchant sees a beautiful, feature-packed theme for $350. It includes a mega menu, predictive search, and variant swatches, promising to save them money on apps. This often turns out to be a costly mistake in the long run.
After migrating, they see their mobile conversion rate has dropped by 20%. A check on Google Search Console confirms their LCP score has gone from "Good" to "Needs Improvement". The heavy JavaScript and CSS of the bloated theme is the clear cause.
The true cost is not the $350 for the theme. It is the thousands of dollars in lost revenue each month from the lower conversion rate. They now face a hard choice: pay a developer thousands to optimize the slow theme, or pay again to migrate to a faster one.
How do I accurately measure my store's Core Web Vitals?
There are two types of data: lab data and field data. Lab data, from tools like Google's PageSpeed Insights, simulates a single user on a specific device and network. It's useful for debugging because it gives you instant feedback on changes you make.
Field data, however, is what Google actually uses for ranking. This data is collected from real Chrome users who visit your site, and it reflects the diverse devices, network speeds, and locations of your actual customers. You can find this data in your Google Search Console account, under the "Core Web Vitals" report.
Focus on the field data in Google Search Console as your source of truth. It shows you how your site performs for real visitors over the last 28 days. Use lab tools to diagnose the problems that the field data reveals. A passing grade in the lab is meaningless if your real users are still having a poor experience.
A step-by-step guide to connecting field and lab data
Start in Google Search Console. In the left menu, find the "Experience" section and click "Core Web Vitals." Focus on the "Mobile" report first, as this is where most users are and most problems occur. Look for any URL groups marked as "Poor" or "Needs improvement."
Click on one of those failing groups. Search Console will show you a list of example URLs that share the same problem. Copy one of these specific URLs. This is your target for debugging. You now have a real-world page that Google has confirmed is slow for actual visitors.
Now, go to Google's PageSpeed Insights tool and paste that exact URL. Run the analysis. The lab data you see is now highly relevant because it is for a page you know is failing in the wild. The "Diagnostics" section will provide specific clues to fix the problem.
What is a "good enough" Core Web Vitals score?
The goal is to have at least 75% of your users experience a "Good" score for each of the three metrics. This is the threshold Shopify itself uses when reporting on theme performance. You do not need a perfect score of 100 on PageSpeed Insights, and chasing it often leads to diminishing returns.
Passing the Core Web Vitals assessment is a binary outcome for ranking purposes: your page either passes or it does not. Moving from a "good" score to a "perfect" score likely has little to no direct SEO benefit. Your development resources are better spent elsewhere once you have crossed the "good" threshold for all three metrics.
Remember that speed is just one part of a good user experience. A fast site that is difficult to navigate or has a confusing checkout process will still have a low conversion rate. For more on this, check out this post on what a good Shopify speed score really means.
The high cost of chasing a perfect score
A store owner becomes obsessed with their 98 score on PageSpeed Insights. A developer tells them the last two points are being lost to the JavaScript from their reviews widget, which displays social proof from past customers.
They decide to remove the reviews app to achieve a perfect 100. The site now gets a perfect score in lab tests. However, their product pages no longer show hundreds of 5-star reviews. The trust and social proof are gone.
The result is predictable: the store's conversion rate drops by 20%. They successfully achieved a meaningless vanity metric but significantly damaged their business. This is the trade-off in its starkest form. A perfect lab score is worthless if it comes at the expense of a feature that helps customers decide to buy.
Frequently asked questions
What are the three Core Web Vitals?
The three Core Web Vitals are Largest Contentful Paint (LCP), which measures loading speed; Interaction to Next Paint (INP), which measures interactivity; and Cumulative Layout Shift (CLS), which measures visual stability.
Does Shopify automatically optimize for Core Web Vitals?
Shopify provides a fast infrastructure and optimized themes like Dawn, but third-party apps, large images, and custom code can still lead to poor scores. The platform gives you a good start, but ongoing maintenance is the merchant's responsibility.
Can one bad app ruin my scores?
Yes, a single poorly coded app can significantly harm your INP and LCP scores by running heavy JavaScript or loading large assets. It is crucial to evaluate the performance impact of every app you install.
How often should I check my Core Web Vitals?
Check your Google Search Console report monthly to monitor your field data. Use lab tools like PageSpeed Insights whenever you make significant changes to your site, such as installing a new app or changing your theme.
Will improving my score guarantee a higher Google ranking?
No. Core Web Vitals are one of many ranking factors. While passing them is important, it does not guarantee a top ranking. High-quality content and a good backlink profile remain critical for SEO success.
Is it possible to get a 100 on PageSpeed Insights with Shopify?
It is extremely difficult and often not a worthwhile goal for a typical Shopify store with multiple apps. Focus on achieving a "Good" score across all three Core Web Vitals for real users, which is a more practical and impactful target.
Do Core Web Vitals affect conversion rates?
Yes, there is a strong correlation between better Core Web Vitals and higher conversion rates. A faster, more stable, and more responsive site provides a better shopping experience, which encourages users to complete their purchase.
Install on Shopify
