Core Web Vitals for Shopify: What They Mean and How to Improve Them
Content notice: This article is more than 12 months old. Google's metrics and thresholds evolve — verify current benchmarks at web.dev.
Core Web Vitals are Google's way of measuring the real-world experience of using a website. They affect both your search ranking and your conversion rate — poor scores mean fewer visitors and fewer of those visitors buying.
The three metrics and what they measure
LCP — Largest Contentful Paint
LCP measures how long it takes for the largest visible element on the page to load — usually the hero image on a Shopify product or collection page. Google's "good" threshold is under 2.5 seconds. Most Shopify stores fail this.
The primary culprit is almost always the hero image. A large, unoptimised image in JPG or PNG format served without priority loading will produce a poor LCP score regardless of how fast everything else is.
Fix: Compress and properly size your hero images. Add loading="eager" and fetchpriority="high" to your hero image tag. Ensure your theme isn't lazy-loading the above-the-fold image.
INP — Interaction to Next Paint (replaced FID in 2024)
INP measures how quickly the page responds to user interactions — taps, clicks, keyboard input. A poor INP score means the page feels sluggish when customers try to interact with it. Selecting a product variant that takes 500ms to register is an INP problem.
Fix: Reduce heavy JavaScript execution. The main offenders on Shopify stores are usually app scripts — each installed app adds JavaScript, and some are poorly written. Auditing and removing unused apps is the highest-leverage fix.
CLS — Cumulative Layout Shift
CLS measures unexpected layout shifts as the page loads — elements jumping around as images load, fonts swap, or ads inject content. A high CLS score means customers are clicking the wrong thing because the page moved under their finger.
Fix: Set explicit width and height attributes on all images. Reserve space for any content that loads asynchronously. Avoid inserting content above existing content after load.
How to check your scores
The two tools I use:
- PageSpeed Insights (pagespeed.web.dev) — run your homepage, your most important product page, and your collection page. Shows field data (real user measurements) and lab data (controlled test).
- Google Search Console — if you've verified your site, the Core Web Vitals report shows real-world performance across all your pages grouped by issue.
Shopify-specific factors that hurt scores
App scripts
Every installed Shopify app has the potential to inject JavaScript into every page of your store — including pages where it's not doing anything useful. A chat widget loading on your product page when no one is going to use chat on a product page is dead weight. Audit your apps, remove anything unused, and check whether remaining apps offer options to limit which pages they load on.
Theme bloat
Many premium Shopify themes are feature-rich but heavy. They load slider libraries, animation libraries, and feature code for options you've never enabled. A custom build or a lean theme will consistently outperform a feature-heavy premium theme on Core Web Vitals.
Font loading
Web fonts cause layout shift and render delays if not handled correctly. Use font-display: swap to prevent invisible text during load. Preload your primary font file. Limit yourself to two typefaces maximum.
Want to know what's dragging down your scores?
Performance issues are part of a CRO audit. I'll identify exactly what's slowing your store and prioritise the fixes by impact. From $699 AUD.
Book an audit →