Core Web Vitals on Shopify: how to fix LCP, INP and CLS at the source

What are Core Web Vitals and what are the 2026 thresholds?

The data source is the Chrome User Experience Report (CrUX). A Lighthouse score of 95 in the lab does not mean your customers’ phones see green. Most Shopify traffic is mobile, so judge yourself on the mobile dataset.

Metric	What it measures	Good	Needs improvement	Poor
LCP (Largest Contentful Paint)	Time until the largest content element is visible	≤ 2.5 s	2.5 – 4.0 s	> 4.0 s
INP (Interaction to Next Paint)	Delay in responding to taps, clicks and key presses (worst value across the visit)	≤ 200 ms	200 – 500 ms	> 500 ms
CLS (Cumulative Layout Shift)	Sum of unexpected layout shifts	≤ 0.1	0.1 – 0.25	> 0.25

INP replaced FID (First Input Delay) on 12 March 2024. FID only measured the first interaction; INP reports the slowest interaction over the whole visit. That is why INP is the metric that most often goes red on Shopify stores: dozens of app scripts keep the main thread busy.

The revenue effect of speed is measured, not assumed. Google and Deloitte’s “Milliseconds Make Millions” study across 37 brands found that a 0.1-second improvement in mobile speed lifted retail conversion by 8.4%. Vodafone measured an 8% sales increase after improving LCP by 31% (web.dev case study).

What you can change on Shopify, and what you cannot

Shopify is a hosted platform. Servers, CDN and checkout are not yours to tune; theme code, images, fonts and apps are entirely yours. A realistic optimisation plan starts from that split.

Layer	Controlled by	What you can do
Server response (TTFB), CDN, HTTP/2 and HTTP/3	Shopify	Nothing; it is already in good shape
Checkout pages	Shopify	Limited customisation via Checkout Extensibility; performance is Shopify’s
Theme (Liquid, CSS, JS, sections)	You	Most of LCP, CLS and INP is solved here
Images and fonts	You	Size, format, priority and loading strategy
Apps and app embeds	You	The number one INP cause; remove and disable
Third-party tags (Pixel, chat, A/B testing)	You	Load timing and consent-gated loading

Measure first: which metric, on which page type?

Use three data sources together. Relying on a single tool is the most common mistake on Shopify.

1. Shopify Admin → Online Store → Themes → Web performance. Shopify’s own CrUX-based report. It shows LCP, CLS and INP from your real visitors and benchmarks them against the Shopify average. Start here.
2. Google Search Console → Experience → Core Web Vitals. Tells you which URL groups (product pages, collections, home) are poor. On Shopify the problem is usually specific to a page type.
3. PageSpeed Insights. Field data (CrUX) at the top, lab diagnostics below. The “LCP element” and “Avoid large layout shifts” sections show exactly which DOM element to fix.

Lab tools are not enough for INP; it needs interaction. Use the Interactions track in the Chrome DevTools Performance panel, or temporarily add the attribution build of the web-vitals library and log which script causes the delay:

<script type="module">
import {onINP, onLCP, onCLS} from 'https://unpkg.com/web-vitals@4/dist/web-vitals.attribution.js';
const log = m => console.log(m.name, Math.round(m.value), m.attribution);
onINP(log); onLCP(log); onCLS(log);
</script>

LCP: prioritise the hero image from the first byte

On Shopify stores the LCP element is, nine times out of ten, the hero image on the home page, the first product image on a collection and the main product photo on a product page. Four techniques are enough.

1. Request the right size in a modern format

Shopify’s CDN converts images to WebP/AVIF automatically, but only sends the right size when you pass proper width and sizes values. Sending a 4,000-pixel original to a 390-pixel phone is the most common LCP mistake.

{{ section.settings.image
   | image_url: width: 1600
   | image_tag:
       widths: '480, 768, 1024, 1366, 1600',
       sizes: '100vw',
       loading: 'eager',
       fetchpriority: 'high',
       preload: true,
       alt: section.settings.image.alt }}

preload: true makes Shopify’s image_tag filter emit a <link rel="preload">; fetchpriority="high" tells the browser to download this image ahead of other resources. These two lines alone can cut LCP by 0.5–1.5 seconds.

2. Never lazy-load above-the-fold images

Dawn-based themes ship with loading="lazy" on every image. Set the hero and the first product cards to eager. A lazy-loaded LCP image does not even start downloading until the browser has computed layout.

3. Drop the slider

Auto-rotating hero sliders delay LCP, create CLS, and there are very few measured cases where they help conversion. One static hero, a clear headline and a single CTA is the best-performing pattern on Shopify.

4. Get fonts and CSS out of the way

Add font_display: 'swap' to Shopify’s font_face filter and preload the font file. Avoid third-party font services (including Google Fonts); Shopify’s own font library is served from its CDN with no extra DNS/TLS cost.

{{ settings.type_header_font | font_face: font_display: 'swap' }}
<link rel="preload" as="font" type="font/woff2" crossorigin
      href="{{ settings.type_header_font | font_url }}">

INP: audit your app scripts

INP problems are almost always JavaScript, and on Shopify most JavaScript comes from apps you did not write. Each installed app adds one to three scripts on average, some more than ten. They create long tasks (>50 ms) on the main thread, so when a customer taps “Add to cart” the browser is not idle.

Audit steps

1. List every app and mark the ones actually used in the last 90 days. Remove the rest. Removing is not enough: go to Online Store → Themes → Customize → App embeds and switch off leftover embeds; some apps leave code in theme.liquid after uninstall.
2. Clean theme.liquid and the layout files. Search for <script> lines left by old apps: anything referencing cdn.shopify.com/extensions or scripts outside {{ content_for_header }}.
3. Measure and compare. DevTools Performance → record → tap “Add to cart” → look at the Interactions track and the long tasks. The file name tells you which script is responsible.
4. Defer what remains. Use defer on your own theme JS, push non-urgent work into requestIdleCallback, and make scroll and resize listeners { passive: true }.

// Break up long tasks: do the heavy work after the interaction
button.addEventListener('click', () => {
  updateCartUI();                       // immediate visible response
  requestIdleCallback(() => {           // heavy work when idle
    trackAnalytics(); rebuildRecommendations();
  });
});

CLS: reserve space for everything

Layout shift has three causes: images without declared dimensions, banners and widgets injected after load, and font swapping. All three are solved by the same principle: reserve the space in advance.

• Images: the image_tag filter adds width and height automatically. Do not omit them on hand-written <img> tags, or use CSS aspect-ratio.
• Announcement bars and app widgets: everything added to the DOM later (free-shipping bar, chat bubble, pop-up) pushes the content below it. Give the container a min-height; keep pop-ups out of the flow with position: fixed.
• Font swap: font-display: swap fixes visibility, but fonts with different metrics still shift text. Match the fallback with size-adjust and ascent-override:

@font-face {
  font-family: "Fallback-Heading";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 22%;
}
h1, h2 { font-family: "Brand-Font", "Fallback-Heading", sans-serif; }

On product pages, the gallery re-rendering when a variant is selected also produces CLS. Give the gallery container a fixed aspect ratio and upload variant images in the same ratio.

Shopify-specific checklist

Check	Metric	Where
Online Store 2.0 theme (Dawn or a derivative)	All	Themes
Hero image: loading: 'eager', fetchpriority: 'high', preload: true	LCP	sections/image-banner.liquid
First 2–4 product cards eager, the rest lazy	LCP	sections/main-collection-product-grid.liquid
widths + sizes on every image	LCP, CLS	snippets/card-product.liquid
Unused apps removed, app embeds switched off	INP	Apps, Theme → App embeds
No orphan scripts in theme.liquid	INP	layout/theme.liquid
Shopify fonts with font_display: 'swap' + preload	LCP, CLS	snippets or layout
min-height on announcement bar and widgets	CLS	CSS
Pixel, chat and A/B scripts loaded conditionally on consent	INP	Customer events / GTM
No background video on the home page, or preload="none" + poster	LCP	sections

How to verify the ranking and revenue effect

CrUX uses a 28-day rolling window, so it takes 2–4 weeks for changes to be fully reflected. Watch two things in the meantime: the count of “good” URLs rising in Search Console, and mobile conversion rate in Shopify Analytics. Plan speed work alongside ad campaigns; buying traffic for a store with poor INP throws part of the budget away.

Core Web Vitals are only one part of technical SEO. For structured data and conversion measurement, read our Schema.org JSON-LD guide for e-commerce and GA4 Consent Mode v2 and Meta CAPI setup.