Google uses Core Web Vitals as a direct ranking factor. If your Shopify store fails these metrics, competitors with better scores outrank you — regardless of content quality.
2.5s
LCP target — time to main content
0.1
CLS target — layout stability score
200ms
INP target — interaction response time
LCP — Largest Contentful Paint
LCP measures how long it takes for the largest visible element on the page to fully load. On a Shopify product page, this is usually the hero product image. On a homepage, it is typically a banner image or large heading.
Target: under 2.5 seconds. Above 4 seconds is considered poor.
What hurts LCP on Shopify:
- Large unoptimized hero images (over 500KB)
- Render-blocking JavaScript preventing the image from loading
- No preloading of the hero image
- Slow server response time (TTFB)
How to fix LCP:
- Preload the hero image by adding a preload link tag in your theme head
- Compress the hero image to under 150KB in WebP format
- Defer non-critical scripts that block the image from rendering
- Use Shopify CDN — always serve images through Shopify's own CDN URL
✓ LCP Quick Win
Add <link rel="preload" as="image" href="YOUR-HERO-IMAGE-URL"> in your theme.liquid head section. This tells the browser to download the hero image immediately, before anything else. Often improves LCP by 0.5-1 second alone.
CLS — Cumulative Layout Shift
CLS measures how much your page content moves around while loading. You have experienced this — you go to tap a button and the page shifts at the last second, causing you to tap something else. Google measures this and penalises pages with high layout instability.
Target: below 0.1. Above 0.25 is considered poor.
What causes CLS on Shopify:
- Images without defined width and height attributes
- Web fonts loading and shifting text layout
- Apps injecting banners or popups above existing content
- Ads loading and pushing content down
How to fix CLS:
- Add width and height attributes to all images in your theme code
- Add font-display: swap to prevent font shifts
- Reserve space for dynamic elements using min-height CSS
- Audit apps that inject content above the fold
INP — Interaction to Next Paint
INP replaced FID (First Input Delay) in March 2024. It measures how quickly your page responds to all user interactions — taps, clicks, typing — throughout the entire page visit, not just the first interaction.
Target: under 200ms. Above 500ms is considered poor.
What hurts INP on Shopify:
- Heavy JavaScript executing on every user interaction
- Third-party scripts blocking the main thread
- Complex Liquid rendering on dynamic sections
- Too many event listeners from multiple apps
Measuring Your Core Web Vitals
There are two types of data to track:
- Lab data — Simulated test from PageSpeed Insights. Useful for immediate feedback during optimization work.
- Field data — Real Chrome user data collected over 28 days. This is what Google uses for rankings. Found in Search Console and the Field Data section of PageSpeed Insights.
⚠ Important
Your lab score can be 90+ while your field data still shows poor Core Web Vitals. This happens when real users are on slow mobile networks or older devices. Both need to pass for full SEO benefit.
Core Web Vitals Checklist for Shopify
| Metric | Target | Top Fixes |
|---|
| LCP | Under 2.5s | Compress hero image, preload, defer scripts |
| CLS | Below 0.1 | Define image dimensions, font-display swap |
| INP | Under 200ms | Reduce third-party scripts, audit app JS |
Need This Done For You?
Skip the DIY. Our expert team handles your Shopify Speed Optimization professionally — guaranteed results or full refund.
FAQ
Are Core Web Vitals a Google ranking factor?
+
Yes. Google confirmed Core Web Vitals as an official ranking factor in 2021 under the Page Experience update. They are measured in the real world by Chrome users and reported in Google Search Console.
What is a good LCP score for Shopify?
+
A good LCP is under 2.5 seconds. Needs improvement is 2.5-4 seconds. Poor is above 4 seconds. Most unoptimized Shopify stores sit at 4-8 seconds.
What causes high CLS on Shopify?
+
The most common causes are images without defined dimensions, web fonts loading and shifting text, and apps that inject content above existing elements. Defining image width and height in your theme code typically fixes most CLS issues.
How do I check Core Web Vitals for my store?
+
Go to Google Search Console, click Experience in the left sidebar, then Core Web Vitals. This shows real-world data from Chrome users visiting your store. PageSpeed Insights also shows lab data for any URL.