A slow Shopify store loses sales twice: once when the shopper gives up before the page loads, and again when Google ranks a faster competitor above you. Core Web Vitals are now part of how Google judges page experience, and with most ecommerce traffic on mobile, the gap between a fast and a slow store is measured in real revenue. This guide explains what the three metrics mean for Shopify, how to measure them properly, and the fixes we make most often for clients.
What Each Core Web Vital Means on a Shopify Store
- Largest Contentful Paint (LCP) measures how long the biggest visible element takes to render. On Shopify that is almost always the hero image on the homepage or the main product image on a product page.
- Interaction to Next Paint (INP) measures how quickly the page responds when a shopper taps something, such as a variant swatch, the add-to-cart button or the menu. Heavy JavaScript from apps is the usual cause of a poor INP.
- Cumulative Layout Shift (CLS) measures how much content jumps around while loading. Announcement bars, cookie banners, late-loading fonts and images without dimensions are the common Shopify culprits.
Step 1: Audit Before You Touch Anything
Run PageSpeed Insights on your homepage, your best-selling collection and your top three product pages, on mobile. Note the field data for each metric. Then open the Shopify admin, go to Online Store → Themes → Customize and check the theme inspector for app embeds. Most speed problems on Shopify come from the layer of apps and tracking scripts added over time, not from Shopify itself.
| Symptom | Likely cause | Fix |
|---|---|---|
| LCP over 4 seconds on product pages | Uncompressed hero or product images, no preload | Serve WebP or AVIF via Shopify's image CDN, add fetchpriority="high" to the hero image, lazy-load everything below the fold |
| INP over 500 ms | Too many app scripts, third-party pixels loading synchronously | Remove unused apps, move pixels to Shopify's Customer Events (Web Pixels), defer non-critical scripts |
| CLS over 0.25 | Images without width and height, fonts swapping late, injected banners | Set explicit dimensions, use font-display: swap with a matching fallback, reserve space for banners |
| Good lab score, poor field score | Real users on slow networks and older devices | Test on a throttled mobile profile, reduce total page weight, cut hero video on mobile |
Step 2: Fix Images First
Images are the largest part of almost every Shopify page. Use the theme's image_url filter with explicit widths so Shopify serves the right size for each device. Add srcset to product and collection images. Convert large PNG graphics to WebP. Set a maximum of one hero image or video above the fold on mobile. These changes alone usually bring LCP into the green on product pages.
Step 3: Remove, Replace or Defer Apps
Every installed app can inject JavaScript into every page, even if the app is only used on one. Go through your app list and ask of each one: does this make money? If not, uninstall it, and then check the theme code for leftover snippets, because many apps leave code behind. For apps you keep, check whether they offer a theme app extension, which loads more efficiently than old-style script tags.
Step 4: Tidy the Theme
- Update to the latest version of your theme. Shopify's Online Store 2.0 themes such as Dawn are built for speed and get regular performance updates.
- Remove unused sections, fonts and icon libraries. Loading two font families with four weights each is a common and expensive habit.
- Replace sliders and carousels on the homepage with a single static hero. Carousels are slow and shoppers rarely see slide two.
- Minify custom CSS and JavaScript, and avoid inline scripts in theme.liquid that run on every page.
Step 5: Set a Monthly Check
Speed decays. Someone installs an app, marketing adds a new pixel, a new banner goes up for a campaign. Put a 15-minute check in the calendar each month: open Search Console's Core Web Vitals report, run PageSpeed on the same five pages, and compare against last month. Catching a regression early is much cheaper than finding out from a drop in rankings.
If you want this done properly, our Shopify speed optimisation service covers the full audit, image and app clean-up, theme fixes and a before-and-after report on Core Web Vitals.
Get a Free Shopify Speed Audit
We'll measure your Core Web Vitals on real devices, show you exactly which apps and images are slowing your store, and give you a fix list in priority order.
Request a Speed Audit