TL;DR
Your Shopify store can convert fine and still be tanking your Google rankings because of Core Web Vitals failures. This post breaks down which metrics matter, why Shopify stores are structurally prone to failing them, and exactly what to fix - in order of impact.
Why Speed Is Now a Ranking Variable You Can't Ignore
Google's Page Experience signal uses real Chrome user data - not lab estimates - to score your pages on three performance metrics. Stores that pass all three get a ranking lift over stores with identical content and backlinks that don't. If you're on page two for a high-volume collection keyword, a Core Web Vitals failure could be the difference between position six and position fourteen.
Here are the three metrics and what Google actually wants:
- LCP (Largest Contentful Paint): Your hero image or main product photo should fully load in under 2.5 seconds. Above 4 seconds is scored "Poor."
- CLS (Cumulative Layout Shift): Measures how much the page visually jumps during load. Target is below 0.1. Cookie banners and unsized images are common culprits.
- INP (Interaction to Next Paint): Replaced FID in March 2024. Measures how fast the page responds after a click or tap - filters, buttons, dropdowns. Target is under 200ms.
Fail all three and you're handing ranking ground to competitors whose pages load faster, even if your content is better.
Why Shopify Stores Fail These Tests More Than They Should
Shopify handles hosting, CDN, and SSL - but it creates predictable performance bottlenecks that show up regardless of store size.
Uncompressed images
Product photos are typically uploaded at full resolution - often 3,000px wide, 3 - 8 MB per file. Shopify applies some compression automatically, but doesn't enforce WebP across all themes and contexts. A collection page with 24 products at 2 MB per thumbnail is asking the browser to process 48 MB of image data before the page is usable. That destroys LCP scores.
Third-party app JavaScript
The average Shopify store runs 6 - 20 installed apps. Each one injects JavaScript into your storefront. Many load synchronously - the browser stops rendering until that script downloads and executes. Worse: apps you've stopped using often still inject scripts if they weren't fully uninstalled. "Deleted from the dashboard" is not the same as "removed from your theme code."
The load impact is compounding, not additive. On a mid-range mobile device on 4G - the median real-world user - this can mean 6 - 8 second load times on a store that feels fast on a fiber connection in Chrome DevTools. INP scores take the worst hit here, because script-heavy main threads can't respond quickly to user interactions.
Render-blocking resources
JavaScript files and CSS stylesheets loaded in the document <head> without async or defer attributes pause the entire render process. The browser won't paint a single pixel of visible content until it finishes downloading and processing those files. Heavily customized or older Shopify themes commonly have multiple render-blocking scripts plus external font files stacked in the head. LCP can't start until all of that resolves.
Five Fixes, Ordered by Impact
1. Compress and convert images with TinyIMG
TinyIMG is a Shopify-native app that bulk-compresses existing images, converts them to WebP (25 - 35% smaller than JPEG at equivalent visual quality), and adds lazy loading to below-the-fold images.
The direct LCP impact: cutting a 2 MB hero image down to ~180 KB in WebP can reduce LCP by 1 - 2 seconds on its own.
TinyIMG also automatically adds width and height attributes to image tags - which is the primary fix for CLS caused by unsized images. When the browser knows an image's dimensions before it loads, it reserves space in the layout and eliminates the visual shift.
2. Audit and remove unused app scripts
Open your Shopify admin and go through every installed app. Anything you don't actively use: fully uninstall it. Not just disable - fully uninstall, so the code is removed from your storefront.
For apps you keep, check whether their scripts load on every page or only where they're needed. A review widget doesn't need to fire on your contact page. An upsell popup script doesn't need to load on blog posts.
After each removal, rerun PageSpeed Insights and check the "Eliminate render-blocking resources" and "Reduce unused JavaScript" diagnostics for a prioritized list of what's still causing drag.
3. Add async or defer to non-critical scripts
For scripts that need to stay but don't need to block rendering:
-
async: downloads in parallel, executes immediately when ready -
defer: downloads in parallel, executes after HTML finishes parsing
For analytics, chat widgets, and tracking pixels, defer is usually correct. This requires editing your theme's theme.liquid file or configuring load behavior in the app's settings if that option exists. A Shopify developer can make these changes in under an hour if you're not comfortable in theme code.
4. Define image dimensions to fix CLS
Every <img> tag in your theme should include explicit width and height attributes. In Liquid:
{{ image | image_url: width: 800 | image_tag: width: 800, height: 600 }}
TinyIMG handles this for product and collection images automatically. For custom theme sections with hardcoded image tags, you'll need to audit your theme files manually.
5. Switch to a performance-optimized theme
If you're on an older theme and the above fixes haven't moved your scores meaningfully, the theme itself may be the ceiling. Older themes load entire JavaScript libraries for features used on a handful of pages.
Shopify's free Dawn theme was rebuilt with performance as a primary constraint and consistently scores 90+ on PageSpeed Insights mobile. If your theme is consistently producing "Poor" Core Web Vitals scores, a theme migration is worth evaluating.
How to Measure Before and After
Run these three tools in sequence:
- Google PageSpeed Insights (pagespeed.web.dev): Test your homepage, top collection page, and top product page. Record LCP, CLS, and INP individually - not just the overall score.
- Google Search Console → Core Web Vitals report: Shows field data from real Chrome users, broken down by URL group. Identifies which page types are failing and at what severity.
- Chrome DevTools → Performance tab: Most granular view for diagnosing specific render-blocking resources and JavaScript execution timing on individual pages.
Document your baseline before making any changes. Rerun after each fix. This lets you isolate what's actually moving the needle.
What to Expect on the Ranking Side
Core Web Vitals improvements don't produce overnight ranking changes. Google updates this field data periodically, and the ranking benefit accumulates over 60 - 90 days as Chrome user data reflects your improvements.
What typically happens: stores that move from "Poor" or "Needs Improvement" to "Good" across LCP, CLS, and INP see gradual gains on their highest-traffic pages - collection pages especially - during that window. Those gains compound with whatever on-page and content work is running in parallel.
Speed isn't a standalone strategy. It's the technical floor. A perfectly optimized collection page behind a 6-second load time is leaving organic revenue on the table every day it stays that way.
Fix the floor. Everything built on top performs better.
If you want this work done properly for your Shopify store - images, scripts, theme performance, and the SEO layer on top - New Seas handles all of it. Check out what they do for ecommerce brands.
Top comments (0)