TL;DR
Your Shopify store can look great and still rank poorly. Google's Core Web Vitals measure what users actually experience - load speed, visual stability, and responsiveness. If your scores are in the red, rankings suffer regardless of how good your content or products are. Here's what to fix and how.
Why Your Shopify Store's Design Score and Its Speed Score Are Two Different Things
A store can pass every visual check - clean theme, polished product photos, tight copy - and still score a 42 on mobile PageSpeed Insights. That gap between how a store looks and how it performs is one of the most expensive problems in Shopify SEO, because it's invisible until you go looking for it.
Google made Core Web Vitals a ranking factor because its own data showed that slow, unstable, unresponsive pages drive users away. Poor scores mean Google is actively working against your rankings while you're spending money on ads, content, and design. Let's cut straight to what's causing the damage and how to fix it.
The Three Metrics You Need to Understand
INP - Interaction to Next Paint
Start here because this one surprises most store owners. INP replaced FID as an official ranking factor in March 2024. It measures how fast your page responds when a user does something - clicks a button, selects a variant, taps "Add to Cart." Under 200ms is good. Above 500ms is poor.
The cause on Shopify is almost always JavaScript accumulation. Every app you install - review widgets, upsell popups, loyalty tools, live chat, email capture - adds scripts the browser must parse and execute before the page can respond to input. The degradation is gradual and compounding. Stores that were fast at launch slow down over months as apps stack up.
LCP - Largest Contentful Paint
LCP measures how long it takes for the largest visible element to fully load. On most Shopify product and collection pages, that's your hero image or first product photo. Google's thresholds:
- Under 2.5s → Good
- 2.5s - 4s → Needs improvement
- Above 4s → Poor (ranking penalty territory)
The default behavior on most Shopify themes is to serve images exactly as uploaded - often 3MB to 6MB files shot for print, not web. Shopify applies some automatic processing, but an 8MB image that gets lightly compressed is still heavier than one that was optimized before upload.
CLS - Cumulative Layout Shift
CLS tracks visual stability. Every time page elements jump around after rendering begins - because an image loaded without reserved space, a promotional banner injected itself above the fold, or a third-party widget appeared late and pushed content down - that's a layout shift. Google scores it.
- Below 0.1 → Good
- Above 0.25 → Poor
Common Shopify CLS culprits: images missing width and height attributes, announcement bars that load after initial render, and app widgets that fire late.
The Fixes, In Order of Impact
1. Compress and Convert Images with TinyIMG
Images are the top LCP killer on Shopify. TinyIMG is a Shopify app that handles the three things that matter most:
- Compression - reduces file sizes across your existing product, collection, and blog image library without visible quality loss
- WebP conversion - automatically serves images in WebP format to supported browsers (the vast majority of modern ones). WebP delivers the same visual quality at roughly 25 - 34% smaller file sizes than JPEG and up to 26% smaller than PNG
- Lazy loading - defers off-screen images so the browser loads above-the-fold content first
For stores with large catalogs - say, 500 products with 4 - 6 photos each - running TinyIMG on your full library typically cuts substantial page weight within hours, with no image-by-image manual work. It also adds alt text optimization, which is a secondary win for image search rankings.
2. Audit Your Installed Apps Aggressively
Open your Shopify admin. List every installed app. For each one, ask: is this actively generating measurable revenue? If the answer is "not sure," it's a removal candidate.
Use Chrome DevTools (Performance panel) or PageSpeed Insights' "Reduce unused JavaScript" recommendations to see which scripts are loading and how much weight each adds. Many apps load their full script on every page by default - a review widget doesn't need to fire on your Contact or About page. Check each app's settings for page-specific script restrictions.
3. Add defer to Non-Critical Scripts
Any <script> tag in your theme's <head> without a defer or async attribute is render-blocking - the browser stops and waits for that script to fully download and execute before continuing to paint the page. This directly hurts LCP and INP.
In theme.liquid, add defer to script tags that aren't needed for the above-the-fold render. PageSpeed Insights will list your render-blocking resources explicitly and estimate the time each one is adding. Work through that list.
4. Define Image Dimensions to Kill Layout Shift
Every image on your store should have explicit width and height attributes in its HTML. Without them, the browser reserves no space during initial render. When the image loads, it shoves everything else down - that's a CLS event.
Fix this in your Liquid templates by adding width and height attributes to your image rendering code. Match the attributes to the image's actual aspect ratio. Your theme's documentation will tell you which templates handle image rendering.
5. Evaluate Your Theme
Some older or heavily customized third-party Shopify themes load dozens of JS files and stylesheets by default, many of them unused. If your scores remain poor after the fixes above, the theme itself may be the ceiling. Shopify's native themes (Dawn, Craft, Sense) are built with Core Web Vitals as a design requirement and consistently outperform older premium themes out of the box.
How to Track Progress
Google PageSpeed Insights - Run this on your key URLs (homepage, top collection pages, top product pages) before and after each fix. Lab scores tell you what's broken.
Google Search Console → Experience → Core Web Vitals - This is field data from real Chrome users. It's what Google actually uses in ranking signals. Lab scores from PageSpeed are diagnostic; Search Console data is the official record. Check it monthly.
Chrome DevTools Performance Panel - For deep dives: record a page load and inspect resource timing, script execution duration, and layout shift events frame by frame.
Pages that move from "poor" to "good" in Search Console typically show ranking improvements within four to eight weeks, depending on Googlebot's recrawl frequency for your store.
The Sequence That Works
Fix the technical floor before layering SEO content strategy on top. Compress images, cut JavaScript, defer non-critical scripts, define image dimensions. Then your keyword targeting, internal linking, and content work can actually perform - instead of being capped by a slow store that Google can't load cleanly.
The Shopify stores winning in organic search right now often aren't the ones with the most content. They're the ones that removed the invisible technical barriers first.
For a deeper breakdown of Shopify SEO strategy built around this kind of technical foundation, New Seas covers it in detail.
Working on your store's SEO and not sure where the speed bottlenecks are hiding? Visit newseas.co - built specifically for Shopify and ecommerce brands.
Top comments (0)