Hitting all-green Core Web Vitals on Shopify Plus

A no-BS engineering breakdown of LCP, INP, and CLS — including the Liquid patterns that kill performance.

Hitting all-green Core Web Vitals on Shopify Plus is no longer optional — Google ranks on it, ad platforms penalize for it, and conversion math punishes you in real money. After tuning 60+ Plus stores to all-green, here’s the engineering reality.

LCP: the only metric most people get wrong

LCP is dominated by the hero image and the time to first paint. Shopify’s default theme loads ~14 third-party scripts before the hero is decoded. Block them. Move them to defer or load them after load. Preload the LCP image with fetchpriority="high". Most stores can move LCP from 3–4s to under 1.2s with these three changes alone.

INP: the new gotcha

INP replaced FID in 2024. It measures how slow the slowest interaction is — most often a scroll or tap. Shopify apps that attach event listeners on every render are the #1 culprit. Audit them. The biggest INP wins we’ve shipped came from removing or debouncing app-injected handlers.

Half the time, the fix isn’t code you wrote. It’s an app you forgot you installed.

CLS: easy if you’re disciplined

Reserve space for everything that loads async — images, embeds, banner bars, sticky headers. Use aspect-ratio CSS, not padding hacks. Don’t inject announcement bars without reserved height. CLS under 0.05 is achievable on every Shopify theme; we’ve never had a build miss this.

The one-line audit that exposes everything

Open Chrome DevTools, run the Lighthouse Performance audit on a slow 4G profile. The opportunities panel almost always names your problem in plain English. The hard part isn’t finding the issue — it’s convincing stakeholders to remove the popup app.