Skip to content

Core Web Vitals on Shopify: Fixing LCP, CLS, and INP

A practical guide to the three metrics that define Shopify performance in 2026 — with the fixes that actually move them, ordered by impact.

A speedometer-style dashboard measuring page performance.
EV

Elena Vasquez

July 11, 2026 · 9 min read

SEO

The three numbers that matter

LCP (largest contentful paint) under 2.5s — how fast the main content appears. CLS (cumulative layout shift) under 0.1 — whether the page jumps while loading. INP (interaction to next paint) under 200ms — whether taps and clicks respond instantly.

All three are ranking inputs and conversion drivers. Stores that fix them see the improvement in both rankings and revenue.

Fixing LCP first

The usual LCP offenders on Shopify: uncompressed hero images, late-loading fonts, and app scripts blocking render. Serve hero images as AVIF/WebP at display size, preload the LCP image, and move font loading to swap-safe patterns.

Measure per template — the PDP, collection, and homepage usually have different offenders.

Taming CLS

Layout shift on Shopify comes from lazy-loaded images without dimensions, late-loading banners, and fonts that reflow text. Reserve image space with explicit aspect ratios, and load above-fold content in a stable font strategy.

CLS is the cheapest fix on this list and the most neglected. Most stores cut it by 80% in an afternoon.

INP: the metric apps break

INP measures main-thread responsiveness. The classic Shopify INP killer is app scripts attaching listeners and timers to every page interaction — cart drawers, chat widgets, and popups.

Audit third-party scripts with Chrome's performance tools, remove what you cannot justify, and defer what you keep.

The app audit that pays for itself

List every app, its scripts, and its measured contribution. Apps that exist 'just in case' are running performance tax on every visitor. Prune to a stack where every app has an owner and an outcome.

After the audit, re-measure. Stores we audit typically recover 1–3 seconds of LCP purely from script discipline.

When to go further

If theme and app discipline still leaves you above target, the next steps are theme-level refactoring, moving heavy functionality to custom code, or — for experience-driven brands — a headless build.

Headless is the last lever, not the first. Most stores fix 90% of the problem before needing it.

Frequently asked questions

Topics

core web vitalsshopify speedLCP optimization

Ready to upgrade your checkout experience?

Book a free 15-minute technical fit call. Vetted developers, fixed pricing, and a defined onboarding process.

Vetted within 48 hours; most engagements are fully matched within 3.5 days.