Core Web Vitals for Shopify: Speeding Up Without Sacrificing Conversions

Core Web Vitals are Google's user-experience signals: LCP (page load speed), CLS (layout stability), and INP (interaction responsiveness). They affect SEO rankings, but more importantly they directly affect conversion rate. After auditing dozens of Shopify stores, the same speed problems show up repeatedly — and the fixes are usually less invasive than brands expect.

Why Core Web Vitals matter for revenue

Two separate effects, both real:

1. Direct conversion impact. A 1-second improvement in LCP typically lifts conversion rate by 2-4%. For a brand doing £100k/month, that's £2-4k incremental revenue per month per second saved.
2. SEO impact. Core Web Vitals are a confirmed ranking signal. Stores in the bottom quartile for performance lose 5-10% of organic traffic that goes to faster competitors.

The Google PageSpeed Insights "score" doesn't matter directly — what matters is the field data from real users (Chrome User Experience Report). The scores you see in Search Console under "Core Web Vitals" are the ones Google uses.

Fixing LCP (Largest Contentful Paint)

LCP measures how long the largest visible element takes to render. On Shopify, this is usually the hero image on collection/product pages. The target is under 2.5 seconds; Google flags anything over 4 seconds.

The biggest wins (in order)

1. Compress hero images. Use WebP/AVIF format. Compress to the smallest size that looks good (typically 70-100KB for hero, 30-50KB for product cards). Shopify's image_url filter can do this automatically.
2. Use proper image dimensions. Don't load a 2000px-wide hero on mobile if it'll display at 400px. Use srcset or Shopify's image_url with width parameter.
3. Preload the hero image. Add <link rel="preload" as="image" href="hero.webp"> in the head. Tells browser to download the hero image immediately.
4. Defer non-critical fonts. Use font-display: swap in @font-face declarations. Don't block rendering on font loading.
5. Inline critical CSS. The above-the-fold CSS gets inlined; the rest loads asynchronously.

Fixing CLS (Cumulative Layout Shift)

CLS measures how much the page layout shifts as it loads. Annoying when text moves while you're trying to click. Target is under 0.1.

Common CLS causes on Shopify

• Images without dimensions. Always set width and height attributes (or use aspect-ratio CSS) so the browser reserves space.
• Web fonts loading late. Font swap causes text to reflow when web font loads. Use font-display: optional or self-host fonts.
• Pop-ups and banners injecting content. Newsletter pop-ups, cookie consent banners pushing content down. Reserve space or position absolutely.
• Third-party widgets. Klaviyo pop-ups, Yotpo reviews loading and pushing content. Lazy-load them, reserve space.
• Ads or recommended product carousels. Same issue — reserve space upfront.

Fixing INP (Interaction to Next Paint)

INP replaced FID (First Input Delay) in 2024 as a Core Web Vital. Measures how quickly the page responds to user interactions throughout the visit, not just the first one. Target is under 200ms.

What hurts INP on Shopify

• Heavy third-party JS — Shopify apps that inject scripts (reviews, pop-ups, chat widgets) often block the main thread
• Expensive event handlers — particularly on cart updates, variant selection, filter clicks
• Large React/Vue bundles — common in headless storefronts that aren't optimised
• Synchronous analytics calls — GTM, GA4 events firing synchronously can block interactions

The fixes

• Audit installed apps — every Shopify app is a tax on your INP. Remove ones you don't actively use.
• Move analytics to GTM Server-side (see our GA4 guide) — moves work off the main thread.
• Defer non-critical JS. Use defer or async on script tags. Use the "load on interaction" pattern for chat widgets etc.
• Code-split if you're on headless. Don't ship 800KB of JS to render a product page.

The app audit (often the biggest win)

The single most common cause of slow Shopify stores: too many apps. Each app injects scripts, often loaded synchronously, often making external requests on every page load. Brands accumulate apps over years; nobody ever does the audit to remove the dead ones.

How to audit

1. List every installed app (Settings → Apps)
2. For each, ask: "If we uninstalled this today, would we notice in 30 days?"
3. For apps you'd notice losing, ask: "Is there a lighter alternative or native Shopify feature?"
4. For apps you'd not notice: uninstall

Apps that we frequently see uninstalling

• Review apps from 3 years ago, never migrated when newer ones replaced them
• Pop-up apps no longer running active campaigns
• Theme customisation apps that did one thing once
• "Trust badge" apps adding 200KB to every page
• Currency converter apps when Shopify Markets now handles this natively

Most stores we audit have 8-15 active apps. The brands we move to 5-7 see meaningful Core Web Vitals improvements.

How to measure correctly

The mistake brands make: relying on PageSpeed Insights' synthetic scores. Those reflect a single test run from Google's servers in California, not real user experience.

The right tools

• Search Console → Core Web Vitals report. Real user data from Chrome. This is what affects rankings.
• web-vitals npm package or Cloudflare Web Analytics. Track real-user metrics on your own site.
• Lighthouse in DevTools. Useful for diagnosing specific pages, but use field data for actual decisions.

Pages to monitor

• Homepage (often biggest issue, biggest visit volume)
• Top 5 collection pages by traffic
• Top 10 product pages by traffic
• Cart and checkout (Shopify's, but worth tracking)

"You can't optimise what you don't measure. And you shouldn't measure what doesn't reflect real users."