Ignorer et passer au contenu
Core Web Vitals are Google's three user experience metrics that directly affect your Shopify store's search rankings. LCP measures how fast your main content loads, CLS measures how much your layout shifts while loading, and INP measures how quickly your store responds to taps and clicks. Fixing all three requires different strategies. LCP is mostly an image and server problem, CLS is a layout and font problem, and INP is a JavaScript problem. Get all three into the green and you have both better rankings and a store visitors actually enjoy using.
Understanding Shopify Core Web Vitals
Google introduced Core Web Vitals in 2021 as a confirmed ranking signal. Three years later, most Shopify stores still fail at least one of them. Understanding what each metric actually measures determines whether your fixes will work.
Measures how long it takes for the largest visible element in the viewport to fully render. On most Shopify stores this is the hero image or main product image. Target: under 2.5s. Above 4s is Poor.
LCP is not a measure of when the page starts loading. A page can start rendering in 0.3 seconds but still have a poor LCP if the hero image takes 4 seconds to download.
Measures how much the page layout shifts unexpectedly while loading. Fonts swapping, images popping in without reserved space, banners injecting above existing content - all contribute to CLS. Target: below 0.1. Above 0.25 is Poor.
A high CLS score means your page is visually unstable. Visitors click on something that shifts just as they tap it, measurably reducing conversion.
Replaced FID in March 2024. Measures the responsiveness of every interaction throughout the page visit: clicks, taps, form inputs. Target: under 200ms. Above 500ms is Poor.
INP is entirely a JavaScript problem on Shopify stores. When too much JavaScript runs on the main thread, the browser cannot respond to user input quickly.
How to Measure Core Web Vitals with Google PageSpeed Insights
Google PageSpeed Insights is the starting point for every Core Web Vitals audit. But using it correctly matters as much as using it at all.
Do not just test your homepage. Test these four pages minimum: your homepage (often has the heaviest media), your best-selling product page (highest app load, most variant images), your most visited collection page (grid of images, filter scripts), and a blog post if your store uses content marketing.
Field data (CrUX data) comes from real Chrome users visiting your actual store over the past 28 days. It reflects real-world experience on actual devices and connections. Lab data comes from a simulated test on a standardized virtual machine with throttled CPU and network. Both matter: field data tells you how customers experience the store, lab data tells you what to fix.
Before fixing anything, run three tests on each page and average the results. PageSpeed scores fluctuate by 5 to 10 points between tests due to server variability. Averaging three tests gives you a reliable starting point to measure against.
| Page | LCP (s) | CLS | INP (ms) | Overall Score |
|---|---|---|---|---|
| Homepage | ___ | ___ | ___ | ___ |
| Product Page | ___ | ___ | ___ | ___ |
| Collection Page | ___ | ___ | ___ | ___ |
| Blog Post | ___ | ___ | ___ | ___ |
Fill this table in before touching anything. Every fix you make should move at least one of these numbers.
How to Fix LCP in Shopify
LCP is the most fixable Core Web Vital for most Shopify stores. The causes are predictable and the solutions are well-established.
PageSpeed tells you exactly which element is your LCP. On most Shopify stores it is the hero image in a homepage banner section, the main product image on a product page, a large text block if no image is in the viewport on load, or a video poster image.
Convert to WebP format using Shopify's image_url filter with format: 'webp'. Resize to the actual display size. Add fetchpriority="high" to the LCP image tag. Never apply loading="lazy" to your LCP image.
LCP cannot start until the HTML arrives. If your TTFB is above 600ms, your LCP will be poor regardless of image optimization. Simplify your Liquid logic in high-traffic templates to reduce TTFB.
Add a preconnect hint in your theme.liquid for Shopify's CDN domain. This establishes the connection early in the page load, reducing connection overhead when the LCP image request fires.
Here is the correct Liquid markup for an optimized LCP image:
<img
src="{{ section.settings.hero_image | image_url: width: 1400, format: 'webp' }}"
fetchpriority="high"
loading="eager"
width="1400"
height="600"
alt="{{ section.settings.hero_image.alt | escape }}"
>And the preconnect hint for your <head>:
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>How to Eliminate CLS Issues in Shopify
CLS is the most technically specific of the three metrics. Once you understand its causes, the fixes are systematic.
The image dimension fix - the highest impact CLS change you can make
Every <img> tag without explicit width and height attributes causes layout shift. The browser does not know how tall the image is until it downloads. While it is downloading, surrounding content renders without reserving space. When the image arrives, everything shifts down to accommodate it.
<img
src="{{ product.featured_image | image_url: width: 800 }}"
width="{{ product.featured_image.width }}"
height="{{ product.featured_image.height }}"
loading="lazy"
alt="{{ product.featured_image.alt | escape }}"
>Shopify's image objects have .width and .height properties. Using them directly ensures the dimensions are always accurate.
Font swap CLS: Web fonts cause CLS because the browser renders text in a system fallback font while the custom font loads. Fix by adding font-display: swap to your @font-face declarations:
@font-face {
font-family: 'YourFont';
src: url('your-font.woff2') format('woff2');
font-display: swap;
}For Google Fonts loaded via a <link> tag, add &display=swap to the URL:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">App-injected content CLS: Announcement bars, cookie consent banners, and chat widgets injected by apps after the page loads cause CLS. Reserve space for these elements before they load. If your announcement bar is always 48px tall, add a 48px placeholder to your layout that the bar fills when it loads. For chat widgets that appear in a fixed corner, use position: fixed so they do not affect document flow.
Ads and embeds without dimensions: Always wrap third-party embeds in a container with a defined aspect ratio:
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
}
.video-wrapper iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}How to Improve INP Performance in Shopify
INP is the newest Core Web Vital and the one most Shopify stores are currently failing. Since it replaced FID in March 2024, many stores that previously had acceptable interaction scores are now being flagged.
INP measures the time from a user interaction (tap, click, key press) to the next visual update on screen. Everything that runs between those two events adds to INP.
Identify long tasks: Open Chrome DevTools Performance panel. Record a page load and a few interactions (click Add to Cart, open a navigation menu). Look for red marks at the top of the timeline - these are long tasks, JavaScript executions taking more than 50ms. Click into each long task to see which function is responsible.
Break up long-running functions: Any function that runs for more than 50ms is a long task. Refactor them to yield back to the main thread periodically using setTimeout:
function initializeProductCards(cards) {
let index = 0;
function processNextBatch() {
const batchSize = 5;
const end = Math.min(index + batchSize, cards.length);
for (let i = index; i < end; i++) {
setupCard(cards[i]);
}
index = end;
if (index < cards.length) {
setTimeout(processNextBatch, 0);
}
}
processNextBatch();
}defer to all non-critical scripts in your theme.liquid. Load app scripts conditionally on relevant pages rather than globally. Delay chat widgets and heatmap tools until after first user interaction. Replace scroll event listeners with Intersection Observer, which runs off the main thread and fires only when elements enter or leave the viewport.Mobile vs Desktop Shopify Core Web Vitals
Mobile and desktop Core Web Vitals are measured separately and often tell completely different stories.
Fast CPU, fast network, no throttling. Most stores score 80 to 95 on desktop without aggressive optimization. Desktop scores are almost always better and less representative of your real customer base.
Throttled CPU (simulating a mid-range Android phone) and throttled network (simulating 4G). This is where your real optimization work lives. Fix your mobile scores and desktop scores improve as a side effect. The reverse is not true.
Where mobile-specific problems surface: LCP is worse on mobile primarily because of download speed. A hero image that loads in 0.8 seconds on desktop takes 2.1 seconds on a throttled 4G connection. INP is worse on mobile because of CPU speed. A JavaScript function that takes 20ms on desktop takes 80ms on a throttled mobile CPU. CLS is often worse on mobile because fonts and images have different display sizes at mobile viewports.
How to Track Shopify Performance Over Time
One-time optimization is not enough. Core Web Vitals change as you add apps, update your theme, and add content. Tracking over time catches regressions before they affect rankings.
Your most important long-term tracking tool. Shows real user data aggregated over 28 days, segmented by page group. Check this report monthly. When a page group shifts from Good to Needs Improvement, investigate what changed in the preceding month.
Set a recurring calendar reminder on the first of every month to run PageSpeed Insights on your three primary pages. Log the scores in a spreadsheet. This gives you a timeline that shows clearly when performance improved or degraded.
The CrUX dataset is public and available through Google BigQuery and the CrUX API. For stores with significant traffic, querying CrUX data shows how your Core Web Vitals compare against competitors in your niche.
Tools like Hotjar, FullStory, and SpeedCurve capture real user performance data from your actual visitors. Unlike Search Console's 28-day aggregated view, RUM data is near-real-time and can be segmented by device type, location, and browser.
Fixing Common Core Web Vitals Issues in Shopify
Sliders load all slides on page load, even slides the visitor never sees. Replace sliders with a single hero image for a reliable LCP improvement. If you keep the slider, lazy load all slides except the first.
Many Shopify themes render the announcement bar after the page loads, pushing the header and everything below it downward. Fix by rendering the announcement bar server-side in your Liquid template and giving it a fixed height.
When a visitor taps Add to Cart, the drawer opens and simultaneously fires API calls to load recommendations, updates inventory counts, and animates open. Fix by loading recommendations asynchronously after the drawer opens, not simultaneously.
Review widgets that load after the page renders push content below them downward. Reserve space for the review section with a minimum height set in CSS before the widget loads.
Some themes initialize the product image gallery via JavaScript, replacing a placeholder with the actual image. If the JavaScript loads late, LCP is poor regardless of image file size. Fix by rendering the main product image directly in Liquid as a standard <img> tag.
Real vs Lab Data: What the Difference Means for Your Store
From PageSpeed Insights, Lighthouse, WebPageTest. Uses standardized conditions: a specific simulated device, specific network throttling, a clean browser with no cached content. Reproducible and useful for testing the impact of changes.
From Search Console, CrUX, RUM tools. Comes from real users on their actual devices with their actual internet connections, cached content, and browser extensions. Reflects the distribution of experiences across your entire user base.
Core Web Vitals Final Checklist for Shopify
LCP Checklist
- Hero and main product images converted to WebP
- LCP image sized to maximum display width
-
fetchpriority="high"on the LCP image element -
loading="eager"on the LCP image (never lazy) - Preconnect hint for Shopify CDN in
<head> - TTFB under 600ms (check with WebPageTest waterfall)
- No render-blocking CSS delaying LCP image download
CLS Checklist
- Explicit
widthandheighton every<img>tag -
font-display: swapon all custom font declarations - Announcement bar rendered server-side with fixed height
- Video and iframe embeds wrapped in aspect-ratio containers
- App-injected overlays using
position: fixedor pre-reserved space - No content injected above existing page content after load
INP Checklist
- All non-critical scripts using
deferattribute - App scripts restricted to relevant page templates only
- No long tasks (50ms+) in Chrome DevTools Performance recording
- Scroll event listeners replaced with Intersection Observer
- Third-party tracking consolidated into Google Tag Manager
- Cart drawer loads recommendations asynchronously
Tracking Checklist
- Core Web Vitals report checked in Google Search Console
- Monthly PageSpeed Insights tests logged in a spreadsheet
- PageSpeed tested on homepage, product page, and collection page
- Tested on a real mid-range Android device on 4G
- Performance regression monitoring in place after app installs
Summary
Core Web Vitals are not abstract technical metrics. They measure whether your store feels fast and stable to real visitors on real devices. LCP tells you how fast your most important content arrives. CLS tells you how stable the layout is while it loads. INP tells you how responsive the store feels when someone tries to interact with it.
Measure your baseline, fix the worst metric first, track results in Search Console, and test on real devices alongside lab tools. The stores that get Core Web Vitals right do not just score better in PageSpeed. They convert better, rank higher, and give customers an experience worth coming back to.
