PERFORMANCE · 14 min read · 2026-05-14

Core Web Vitals for Shopify: The Technical Playbook

LCP, CLS and INP fixed one metric at a time, with the specific Liquid and JavaScript changes that move each number.

Shopindev Team

Most Shopify speed advice stops at 'compress your images'. This is the sequence we actually run, in the order that produces the biggest gain per hour of work, on the way to a Lighthouse score above 95.

Measure field data, not lab scores

Lighthouse is a lab simulation. Google ranks on field data from real Chrome users, visible in Search Console's Core Web Vitals report and PageSpeed Insights. Fix what the field data says, then use Lighthouse to iterate quickly between measurements.

LCP: it is almost always the hero image

Preload it, mark it fetchpriority="high", never lazy-load it, and serve it through image_url with an explicit width. Declare width and height so the browser reserves space. On most stores this single element accounts for the majority of the LCP number.

CLS: reserve space for everything that arrives late

Set aspect-ratio on every image container, use font-display: optional or swap with a matched fallback metric, and give banners and cookie bars fixed heights. Layout shift is nearly always something injected by JavaScript into a space nobody reserved.

INP: the metric apps break

Interaction to Next Paint measures responsiveness, and long JavaScript tasks are what ruin it. Audit third-party scripts by real cost: review widgets, chat, popups and analytics each block the main thread. Defer everything that is not needed for first interaction, and remove what nobody uses.

The third-party audit nobody wants to run

Open Chrome DevTools, record a load, and sort by script size and blocking time. Then ask, for each app, what revenue it produces. In most audits we find two or three apps costing 300KB combined and contributing nothing measurable.

Liquid-level wins

Avoid nested loops over large collections in templates, paginate rather than rendering everything, cache expensive fragments in section settings where possible, and split CSS so critical styles inline while the rest loads asynchronously.

When headless is the honest answer

Below roughly 500K monthly sessions, a well-optimised Liquid theme reaches the same field metrics as Hydrogen for a fraction of the cost. Headless earns its price at high traffic, or when you need rendering flexibility Liquid genuinely cannot provide.

Keeping the score

Performance decays: a new app, a marketing tag, an unoptimised image in a campaign. Put a monitoring tool in place with alerts on regression, and check Search Console monthly. Optimisation without monitoring is a one-off cost with a short half-life.

Ask us on WhatsApp →

More articles