Short answer: Shopify's platform is fast, but a heavy theme plus a stack of apps is what fails Core Web Vitals. The three metrics: LCP (main content paint, target < 2.0s), INP (tap responsiveness, < 200ms), CLS (layout shift, < 0.1). Fix them in order: the hero image and fonts for LCP, third‑party and app scripts for INP, and reserved space for images/banners for CLS. Measure with real‑user data in Search Console, not a single lab test.
Measure first
- Search Console → Core Web Vitals report — this is real Chrome user data (CrUX). It's what Google actually uses.
- PageSpeed Insights — run the homepage, a collection page, and your best‑selling product page on mobile.
- Web Vitals extension — watch the numbers as you browse your own store.
Lab scores and field data differ. Trust the field data for ranking; use lab tools to find the cause.
LCP — usually the hero image and fonts
- Serve the hero/product image as WebP or AVIF, sized to the container, with
and no lazy‑load on the LCP image. - Self‑host fonts, preload the one used above the fold,
. Cut unused weights. - Remove render‑blocking CSS/JS from the
; inline only critical CSS. - On collection pages, don't load 40 full‑res product images — lazy‑load below the fold.
INP — third‑party and app JavaScript
- Audit your app stack. Each app injects scripts that run on the main thread. Ten apps where four would do is the common cause.
- Replace simple apps (badges, tabs, size guides, FAQ, basic upsell) with theme code.
- Defer or delay non‑critical third parties (chat widgets, reviews, A/B tools) until interaction or idle.
- Keep the "add to cart" handler light — no heavy work on click.
CLS — reserve the space
- Set explicit
/(or) on every image and video. - Reserve space for banners, cookie bars, and app‑injected content so nothing jumps in.
- Avoid injecting content above existing content after load.
- Load fonts so the swap doesn't reflow layout (matched fallback metrics).
Theme choice
A lean, modern theme (Dawn‑based or a well‑built custom one) starts you in the green. A bloated "multi‑purpose" theme with a dozen sliders and animation libraries starts you behind.
Key takeaways
- Shopify is fast; your theme + apps are usually what fails CWV.
- LCP: WebP/AVIF hero,
, self‑hosted preloaded font, critical CSS. - INP: cut and defer app/third‑party JS; replace simple apps with code.
- CLS: explicit dimensions on everything, reserve space for injected content.
- Judge with Search Console field data, not one PageSpeed run.
FAQ
Can I pass Core Web Vitals without changing my theme?
Do apps really matter that much?
Will Shopify Plus fix this?
Alamin Sultan
Web developer for real estate and e‑commerce. WordPress · Next.js · MERN.