TL;DR
- The Core Web Vitals are three user-experience metrics measured by Google: LCP (loading, target ≤ 2.5 s), INP (responsiveness to input, target ≤ 200 ms) and CLS (visual stability, target ≤ 0.1).
- Google evaluates real user data (CrUX field data) at the 75th percentile - a good Lighthouse lab score alone is not enough.
- The biggest Shopify levers: images (never lazy-load the LCP image, set widths/heights), reducing apps and third-party scripts, font optimization and keeping the theme up to date.
- Core Web Vitals are part of Google's ranking systems (page experience) and directly affect conversion rates.
What are Core Web Vitals?
Google uses Core Web Vitals to measure how fast, responsive and stable a page feels to real visitors. Since March 2024 the trio is:
| Metric | Measures | Good | Needs improvement | Poor |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | When the largest visible element has loaded | ≤ 2.5 s | 2.5-4.0 s | > 4.0 s |
| INP (Interaction to Next Paint) | How quickly the page reacts to clicks/taps | ≤ 200 ms | 200-500 ms | > 500 ms |
| CLS (Cumulative Layout Shift) | How much content jumps around while loading | ≤ 0.1 | 0.1-0.25 | > 0.25 |
INP replaced the older FID in 2024 - and it is considerably stricter because it scores all interactions across the whole visit, not just the first one.
Key context: Google evaluates field data from the Chrome User Experience Report (CrUX) - real visitors on real devices - at the 75th percentile. A store "passes" when 75% of visits stay within the threshold.
Why Core Web Vitals matter for Shopify stores
- Rankings: the metrics feed into Google's page-experience evaluation. With similarly relevant content, user experience becomes the tie-breaker.
- Conversion: industry studies have shown the same pattern for years - every extra second of load time measurably costs conversion, especially on mobile.
- Ad spend: faster landing pages improve quality scores and effectively lower your CPC in Google Ads.
Measuring Core Web Vitals correctly
- Google Search Console → Page experience: shows CrUX field data grouped by URL pattern - the most important report, because this is exactly what Google evaluates.
- PageSpeed Insights: combines field data (top) and lab data (bottom) for individual URLs. Always look at the field data first.
- Shopify admin → Web performance dashboard: Shopify shows LCP, CLS and INP for your store right in the admin, including trends.
- Chrome DevTools (Performance panel): for deep-diving individual interactions and long tasks.
Always measure mobile first - the numbers are almost always worse there, and that is where most Shopify traffic happens.
Improving LCP in Shopify
In stores the LCP element is almost always the hero image or the first product image.
- Never lazy-load the LCP image.
loading="lazy"belongs on images below the fold - not on the hero. Modern themes setloading="eager"orfetchpriority="high"on the first image. - Use Shopify CDN parameters: serve images through
image_urlwith an appropriatewidthinstead of original sizes. Shopify then generatessrcsetvariants and modern formats (WebP/AVIF) automatically. - Avoid hero sliders: carousels load several large images plus JavaScript and almost always delay LCP. A static hero with a clear message regularly converts better in A/B tests anyway.
- Reduce render-blocking JavaScript: every app that loads synchronously in the
<head>pushes LCP back (see the apps section).
Improving INP in Shopify
INP suffers from JavaScript overloading the main thread - in Shopify this is almost always caused by apps and tracking scripts.
- Run an app inventory: every installed app with a storefront component ships its own JavaScript. Uninstall apps you do not actively use - and check the theme is clean afterwards.
- Consolidate tracking pixels: multiple analytics, pixel and heatmap scripts create long tasks. Anything that does not demonstrably deliver insights goes.
- Question heavy theme features: mega menus with hundreds of nodes, animated product grids and quick-view modals all eat interaction budget.
- Apply theme updates: theme developers optimize continuously - a two-year-old theme release often carries needlessly heavy JavaScript.
Improving CLS in Shopify
Layout shifts happen when elements load in without reserved space.
- Set width and height on all images (
width/heightoraspect-ratio) so the browser reserves the space up front. - Render announcement bars and banners with a fixed height instead of inserting them late.
- Web fonts:
font-display: swapplus a preload for the most important font file prevents both invisible text and late shifts. Even better: get by with system fonts or few weights. - Check app content: review widgets, countdown timers and pop-ups that push content around are classic CLS drivers. Such elements need reserved containers.
The typical mistakes
- Optimizing only for Lighthouse scores. The lab score is a diagnostic tool - Google evaluates field data. A 95 Lighthouse score with poor CrUX numbers does not help.
- Installing apps and never touching them again. The app stack is the most common performance killer in Shopify stores. A quarterly inventory pays off.
- Uploading and serving images at original size. 4000-pixel photos in 400-pixel slots are still the most common LCP mistake.
- Changing everything at once. Measure first, apply one lever, measure again - otherwise you never know what worked. CrUX data lags by roughly 28 days.
FAQ
How quickly do improvements show up? CrUX field data is a rolling 28-day average. After an optimization it can take up to four weeks until Search Console shows the full effect.
Is a fast theme enough? A good theme is the foundation, but images, fonts and apps are your responsibility. Even the fastest theme becomes slow with 20 storefront apps.
Do I need to switch to Hydrogen/headless? No. For the vast majority of stores, a tidy Liquid theme with optimized images and a lean app stack delivers more than a headless rebuild - at a fraction of the cost. More: Headless commerce with Hydrogen.
Further reading: