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.
Frequently Asked Questions
What are Core Web Vitals and do they actually affect my Shopify store's Google rankings?
Core Web Vitals are three performance metrics Google uses to score your pages based on real Chrome user data: LCP (how fast your main image loads), CLS (how much the page jumps during load), and INP (how quickly the page responds to clicks or taps). Stores that pass all three receive a ranking lift over stores with identical content and backlinks that don't. A Core Web Vitals failure can be the difference between ranking in the top positions and falling deep into page two for a high-volume keyword.
Why is my Shopify store slow even though I'm using Shopify's hosting?
Shopify handles hosting and CDN, but several built-in patterns cause predictable performance problems. The most common are full-resolution product images that weren't compressed before upload, third-party app scripts that load on every page and block the browser from rendering, and JavaScript or CSS files in the document head that pause page rendering entirely. These issues exist regardless of store size and compound on mobile devices, where most real shoppers are browsing.
How do unused or old Shopify apps slow down my store?
Every installed app can inject JavaScript into your storefront, and many do so even after you stop using them — simply deleting an app from your dashboard doesn't always remove its code from your theme. These scripts often load synchronously, meaning the browser stops rendering the page until each one finishes downloading and executing. The slowdown is compounding, not additive, which means a store with many scripts can see load times in the range of several seconds on a typical mobile connection even if it feels fast on a fast desktop setup.
What's the fastest way to improve my Shopify store's Core Web Vitals score?
Image compression and conversion to WebP tends to have the biggest immediate impact, particularly on LCP. Cutting a large hero image down to a much smaller WebP file can reduce LCP by one to two seconds on its own, and setting explicit image dimensions in your theme eliminates the layout shifts that hurt CLS scores. After images, auditing and fully uninstalling unused apps — not just disabling them — is the next highest-impact step.
How long does it take to see ranking improvements after fixing Core Web Vitals?
Ranking changes don't happen overnight because Google updates its field data periodically. Improvements typically accumulate over a 60 to 90 day window as Chrome user data reflects the changes you've made. Stores that move from a "Poor" or "Needs Improvement" rating to "Good" across all three metrics tend to see gradual gains on their highest-traffic pages, particularly collection pages, during that period.
How do I measure my Shopify store's Core Web Vitals before and after making changes?
Use three tools in sequence: Google PageSpeed Insights to test your homepage, top collection page, and top product page; the Core Web Vitals report in Google Search Console to see field data from real users broken down by page type; and the Chrome DevTools Performance tab for a detailed diagnosis of specific render-blocking resources. Record your LCP, CLS, and INP scores individually before making any changes, then rerun after each fix so you can see exactly what's moving the needle.
Top comments (0)