Improving Shopify Core Web Vitals (Without Ripping Out Your Theme)

The short version: you almost never need to rebuild your theme to pass Core Web Vitals. On hosted Shopify, the server, CDN, and time-to-first-byte are Shopify's job — and already fast. Stores fail because of what gets piled on top: apps, scripts, oversized images, and layout shift. Every one of those is fixable in place. Here's the incremental playbook.

We build and optimise Shopify stores, so this is the order we actually work in — not "start over," but "find what's dragging and fix it."

First, the reframe: you probably don't need a new theme

The instinct when Search Console flags Core Web Vitals is to assume the theme is rotten and needs replacing. It usually isn't, and it usually doesn't.

Here's why. Shopify is fully hosted — its servers and CDN deliver a consistently low time-to-first-byte globally, and you can't touch that layer even if you wanted to. So the part of performance that lives on the server is already handled and out of your hands. Where Shopify stores actually fail Core Web Vitals is the layer you do control: the apps, third-party scripts, custom theme edits, oversized images, and font loading stacked on top of the base theme.

That's good news. It means the fixes are targeted and incremental — remove this app, preload that image, add a width to this element — not "burn it down and start again." A re-theme is a rebuild, not a swap (which is exactly why a Horizon migration is a bigger project than it looks), and you rarely need to take that on just to pass CWV.

Ignore the admin Speed Score — measure what Google actually ranks on

Before you change anything, look at the right number. This trips up almost everyone.

Your Shopify admin has an Online Store Speed score. It's a Lighthouse lab measurement — one simulated visit, on a simulated device and network. It is not your Core Web Vitals, and Google does not use it for ranking.

What Google ranks on is field data: real Chrome users, aggregated in the CrUX dataset over a rolling 28-day window, reported at the 75th percentile. You see it in Google Search Console (Core Web Vitals report) and PageSpeed Insights (the "field data" panel at the top).

The two can diverge sharply — and the gap is the whole point:

• A store can score a mediocre 42 in the lab yet pass Core Web Vitals in the field, and Google won't penalise it.
• A store can score a healthy 78 in the lab yet fail INP in the field — and get dinged.

So the rule is simple: optimise for field data, verify in lab tools. Chasing the admin Speed Score up and down is optimising the wrong number.

The three metrics — and what actually moves each

Core Web Vitals is three measurements, each with a different cause and a different fix:

(INP replaced FID as the responsiveness metric in March 2024 — if you're working from an older checklist that says "First Input Delay," it's out of date.)

Almost every failing Shopify store fails one or two of these for a specific, findable reason. Take them one at a time.

Fixing LCP — it's almost always the hero image

LCP is the big one for stores, and the culprit is nearly always the largest above-the-fold image — your hero or first product shot. The highest-impact fixes, in order:

1. Don't lazy-load the LCP image. Dawn and other OS 2.0 themes lazy-load images by default — which is right for everything except the one image that defines your LCP. Lazy-loading your hero actively makes LCP worse. Exclude it.
2. Preload it. Add a preload hint so the browser starts downloading the hero immediately instead of discovering it late.
3. Right-size and compress it. Serve it at the dimensions it actually displays, in a modern format, compressed. An uncompressed 3000px hero on a phone is the single most common LCP killer.
4. Inline critical CSS and preload fonts with display: swap. So text and layout paint without waiting on render-blocking resources.

Get the hero right and LCP usually falls into range on its own.

Fixing INP — this is where app bloat lives

If LCP is about images, INP is about JavaScript — and on Shopify, JavaScript overwhelmingly means apps. App bloat is widely cited as the single biggest speed killer on Shopify, and INP is where it shows up: every app that injects script adds work the browser must do before it can respond to a tap.

The fixes, in order of leverage:

1. Audit and remove unused apps. This is the highest-return action on most stores, full stop. Apps get installed for a trial or a season and never removed, but their scripts often keep loading. One commonly reported audit moved a store's mobile score from 20 to 38 on app removal alone — before a single image was touched. Go through every installed app and ask "is this earning its place?"
2. Check that uninstalled apps left nothing behind. Some leave orphaned script tags or theme snippets. Removing the app doesn't always remove the code.
3. Break up long JavaScript tasks in custom code so the main thread isn't blocked during interaction.
4. Defer or remove non-essential third-party scripts — chat widgets, heavy analytics, marketing pixels you no longer use.

The mental model: your INP problem is usually a subscription you forgot to cancel. Fixing it often saves money as well as milliseconds.

Fixing CLS — reserve the space

CLS is the most mechanical of the three. Layout shift happens when something loads and pushes other content around. The fixes are boring and reliable:

• Put explicit width and height (or an aspect ratio) on every image, video, iframe, and embed. This lets the browser reserve the space before the asset arrives — the single biggest CLS fix.
• Reserve space for anything an app injects — banners, badges, cookie bars, review widgets. A block that pops in above the fold after load is a classic CLS spike.
• Use font-display: swap and preload fonts so text doesn't reflow when the web font arrives.

CLS problems are almost always findable by scrolling the page slowly on a throttled connection and watching what jumps.

The one time a re-theme is actually justified

To be fair to the "rebuild it" camp — there is a case for it, just a narrow one:

• You're on a genuinely old, pre-OS-2.0 theme that lacks modern lazy-loading and section structure, and it's fighting you at every turn.
• You're redesigning anyway, so the performance rebuild rides along for free.

If that's you, do it deliberately — and know that even Shopify's newest flagship theme can start behind on mobile out of the box, so choosing Horizon isn't an automatic performance win. Your build quality — apps, image discipline, custom code — matters more than the base theme either way. Outside those cases, in-place fixes get you there faster and cheaper.

Measure before and after — and give the field data time

Two rules that separate real improvement from wishful thinking:

• Change one thing at a time and re-measure. If you remove three apps, compress the hero, and add width attributes all at once, you won't know what worked. For deliberate before/after comparison, treat it like any other optimisation and measure it properly.
• Give the field data ~28 days. A lab tool will show your LCP fix instantly, which is great for confidence — but Search Console's field data is a 28-day rolling average, so the ranking-relevant number catches up over about a month. Don't panic if Search Console lags; don't celebrate off the lab score alone.

And it's worth doing, because speed isn't only a ranking factor — a slow mobile LCP quietly increases bounce and abandonment before a visitor ever sees your product, which is one of the most common reasons stores leak sales despite growing traffic. It also feeds AI and search discovery, where mobile experience is increasingly part of how you get surfaced at all.

The bottom line

Core Web Vitals on Shopify looks intimidating because the report is red and the instinct is to blame the theme. But the server layer is Shopify's and already fast, and the failing layer is the one you can edit:

LCP → fix the hero image. INP → remove the app bloat. CLS → reserve the space.

Do those three, measure the field data, and the overwhelming majority of stores pass — without a rebuild, a migration, or ripping out a theme that was never really the problem.

We help Shopify brands diagnose and fix Core Web Vitals in place — app audits, LCP and INP work, and the measurement that proves the lift in the field, not just the lab. See our Shopify store development work, or talk to us about your store's performance.