Fix your hero image first. On most Shopify stores, the single largest factor dragging down your Core Web Vitals score is an unoptimized above-the-fold image that takes 3+ seconds to load. Everything else matters, but if you do nothing else today, compress and properly format your hero image. That one change can cut your LCP by 40-60%.
Core Web Vitals aren't a vanity metric. Google uses them as a ranking signal. Slow stores also bleed conversions. Every additional second of load time pushes buyers toward the back button. If your Shopify speed score is sitting in the red and you don't know where to start, this guide ranks every fix by actual impact so you can work through them in order.
Before we get into fixes, you should know where your store stands across more than just speed. Run a free authority check on your store to see how your technical health, AI visibility, and brand signals stack up together.
What Core Web Vitals Actually Measure
Google tracks three metrics. Each one captures a different dimension of user experience. You need to pass all three to get the ranking benefit.
| Metric | What It Measures | Good | Needs Improvement | Poor |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Loading speed of the biggest visible element | ≤ 2.5s | 2.5s – 4.0s | > 4.0s |
| INP (Interaction to Next Paint) | Responsiveness when user clicks/taps/types | ≤ 200ms | 200ms – 500ms | > 500ms |
| CLS (Cumulative Layout Shift) | Visual stability (elements jumping around) | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
INP replaced FID (First Input Delay) in March 2024. If you're still reading guides that reference FID, they're outdated. INP is a harder test because it measures every interaction during the session, not just the first one.
One thing I think people underestimate: CLS is often the easiest of the three to fix, yet it's the one most Shopify stores ignore because it doesn't feel like a "speed" problem. It is. Layout shifts frustrate users and Google counts it against you the same way slow loading does.
How to Diagnose Your Shopify Store's Bottlenecks
Don't guess. Test. Shopify's built-in speed score gives you a rough number, but it doesn't tell you which specific elements are failing. Use these tools in this order:
- Google PageSpeed Insights (pagespeed.web.dev) — Enter your homepage and your highest-traffic product page. Look at both "mobile" and "desktop" tabs. Mobile is what Google uses for ranking.
- Chrome DevTools > Performance tab — Record a page load, then look at the "Timings" row. It shows you exactly which element triggered LCP and when.
- Chrome DevTools > Network tab — Sort by size. The top 5 largest assets are usually your biggest opportunities.
- Google Search Console > Core Web Vitals — This shows real user data from the last 28 days. Lab tools show simulated performance; Search Console shows what actual visitors experience.
Once you've got your numbers, map them to the fixes below. Work from the top down. They're ordered by typical impact.
LCP Fixes (Loading Speed)
LCP is where most Shopify stores fail. The "largest contentful paint" is usually your hero image, a product image, or a large banner. Here's how to fix it.
1. Optimize Your Hero Image
This is almost always the single biggest win. Your above-the-fold hero image is typically the LCP element, and on most Shopify stores it's a 2-5MB PNG or uncompressed JPEG.
- Convert to WebP or AVIF format. Both are natively supported by modern browsers and typically 30-50% smaller than equivalent JPEGs at the same visual quality.
- Resize to the actual display dimensions. A 4000x3000px image displayed at 1200x800px wastes bandwidth on pixels nobody sees.
- Add
fetchpriority="high"to the hero image tag. This tells the browser to prioritize it over other assets. - Add a
preloadlink in the theme's<head>for the hero image. This starts the download before the browser discovers the image in HTML. - Remove lazy loading from above-the-fold images. Lazy loading on the hero image actually hurts LCP because it delays the load until the element enters the viewport.
2. Reduce Render-Blocking JavaScript
Every third-party app that loads JavaScript in your theme's header blocks rendering. The browser can't paint anything until those scripts finish downloading and executing.
- Audit your apps. Open Chrome DevTools > Network, filter by JS, and sort by blocking time. Any script over 100ms blocking time is a problem.
- Move non-critical scripts to the footer with
deferorasyncattributes. - Remove apps you're not actively using. Uninstalling from the Shopify admin isn't always enough. Some apps leave residual code in your theme. Check your theme's
layout/theme.liquidfor leftover script tags.
3. Use Shopify's Built-in CDN Properly
Shopify serves all assets through its CDN automatically. But you can undermine that by doing things like hosting images on external servers, loading custom fonts from Google Fonts instead of self-hosting, or using external CSS files that create additional DNS lookups.
- Upload all images through Shopify's file manager or product admin. They'll be served from
cdn.shopify.comwith automatic compression. - Self-host fonts. Download your web fonts and upload them to your theme's
assetsfolder. This eliminates the DNS lookup and connection to Google Fonts servers. - Use Shopify's
image_urlLiquid filter with width parameters. This generates responsive image URLs:{{ image | image_url: width: 800 }}.
INP Fixes (Responsiveness)
INP measures how fast your store responds when someone interacts with it. Clicks, taps, keyboard input. If there's a visible delay between tapping "Add to Cart" and seeing a response, your INP is bad.
| Common INP Blocker | Why It Hurts | Fix |
|---|---|---|
| Heavy JavaScript on main thread | Browser can't process user input while JS executes | Break long tasks into smaller chunks; use requestIdleCallback |
| Third-party chat widgets | Often run expensive scripts on every interaction | Load chat on user intent (click a button) instead of on page load |
| Review widgets with inline rendering | Block main thread while rendering stars/text | Use server-side rendered reviews or load asynchronously |
| Cart drawer animations | Complex CSS animations on non-composited layers | Use transform and opacity only; avoid animating height or width |
| Mega menus with deep nesting | Large DOM operations on hover/click | Render menu content on demand, not on page load |
| Analytics event listeners | Fire on every click, blocking the main thread | Use requestAnimationFrame or batch events with sendBeacon |
The biggest INP offenders on Shopify are almost always third-party apps. I'd estimate that 80% of the INP issues I see on Shopify stores could be fixed by loading three or four apps differently, not by removing them entirely. The code isn't necessarily bad. It's just running at the wrong time.
Speed is just one signal. How visible is your store overall?
Our free AI Authority Checker scans your brand across technical health, AI visibility, and trust signals. Core Web Vitals matter, but they're part of a bigger picture. See where you stand in 30 seconds.
Check Your Store's Authority Score →CLS Fixes (Visual Stability)
CLS measures how much your page layout shifts while it's loading. When an image pops in and pushes text down, or a banner loads late and shoves the whole page, that's layout shift. Users hate it. Google measures it.
The Most Common CLS Culprits on Shopify
- Images without dimensions. If your
<img>tags don't havewidthandheightattributes, the browser reserves zero space until the image loads, then reflows everything. Fix: always include explicit dimensions or use CSSaspect-ratio. - Late-loading app embeds. Review widgets, upsell pop-ups, and trust badges that inject content after page load cause shifts. Fix: reserve space in your theme layout with a placeholder of the correct height.
- Web fonts causing text reflow. When a custom font loads and replaces the fallback font, text reflows because the two fonts have different dimensions. Fix: use
font-display: swapcombined with asize-adjustfallback to minimize the size difference. - Dynamic content above the fold. Announcement bars, cookie consent banners, and promotional ribbons that load after the initial paint push everything below them down. Fix: render these server-side or reserve their space in the initial layout.
- Variant selectors resizing on load. Product pages where the variant picker changes dimensions after JavaScript hydration. Fix: set a fixed minimum height on the variant container.
The Shopify App Impact Table
Not all apps are equal when it comes to speed impact. Here's a breakdown by app category, based on how they typically affect each Core Web Vital:
| App Category | LCP Impact | INP Impact | CLS Impact | Typical Fix |
|---|---|---|---|---|
| Review widgets (Judge.me, Loox, etc.) | Medium | High | High | Async load; reserve container space |
| Live chat (Tidio, Gorgias widget) | Low | High | Low | Load on user intent, not page load |
| Pop-up builders (Privy, Justuno) | Medium | Medium | High | Delay load by 5+ seconds; use exit intent only |
| Analytics (GA4, Hotjar, Lucky Orange) | Low | Medium | None | Load async; batch event dispatching |
| Upsell/cross-sell (ReConvert, Frequently Bought) | Medium | Medium | High | Server-side render; reserve container height |
| Currency converters | Low | Low | Medium | Use Shopify Markets instead of third-party apps |
| Trust badges/seal widgets | Low | Low | Medium | Inline the badge SVG directly in theme code |
Here's my honest take on apps and speed: the Shopify app ecosystem is a net positive for store owners, but the average store has 6-10 apps installed and maybe uses 3-4 regularly. Every app you're not using is dead weight on your page speed. Do a quarterly audit. If you haven't opened an app in 60 days, it's a candidate for removal.
Theme-Level Optimizations
Your Shopify theme is the foundation. If the theme itself is bloated, no amount of app optimization will save you. Here's what to check:
- Liquid template complexity. Every
forloop in Liquid adds server-side rendering time. Collection pages that loop through 50+ products with nested conditionals are slow to generate. Paginate collections to 24 items max per page. - Unused CSS. Most Shopify themes ship with CSS for features you're not using. Use Chrome DevTools > Coverage tab to identify unused CSS. On many themes, 40-60% of CSS loaded on any given page is unused.
- JavaScript bundle size. Check your theme's total JS payload. If it exceeds 200KB gzipped, look for opportunities to split or defer. Some themes ship with jQuery plus a modern framework, doubling the JS cost.
- Section rendering. Shopify's section rendering API lets the browser update individual page sections without a full reload. If your theme doesn't use it for cart updates and variant changes, it's doing full-page work unnecessarily.
Premium themes from the Shopify Theme Store generally perform better than free themes or custom builds. They're required to meet Shopify's performance standards. If you're on a heavily customized theme that's consistently scoring poorly, sometimes the most cost-effective fix is migrating to a performant theme and re-applying your customizations.
Speed vs. AI Visibility: They're Connected
There's a link between Core Web Vitals and your AI visibility score that most store owners miss. Google's AI Overviews and other AI search products pull from the same index that rewards fast, well-structured pages. A store that fails Core Web Vitals is less likely to appear in Google's AI-generated results for product queries.
That said, Core Web Vitals are just one piece. AI engines also weigh structured data, brand authority, and third-party signals. If your speed is solid but your GEO strategy is nonexistent, you're still leaving AI traffic on the table.
The Fix Priority Checklist
Work through these in order. Each fix is ranked by the typical impact it has on Shopify stores. Don't skip ahead. The first three items account for the majority of improvements.
- Optimize hero/banner images (LCP) — Convert to WebP, resize to display dimensions, add
fetchpriority="high", preload in<head>. - Audit and defer third-party app scripts (LCP + INP) — Move non-essential JS to footer with
defer. Remove apps you don't use. - Add explicit image dimensions (CLS) — Every
<img>tag getswidthandheight. - Self-host fonts (LCP) — Download from Google Fonts, upload to theme assets, reference locally.
- Reserve space for dynamic embeds (CLS) — Set min-height on containers for review widgets, upsell blocks, trust badges.
- Load chat/support widgets on intent (INP) — Replace auto-load with a click trigger.
- Reduce Liquid loop complexity (LCP) — Paginate collections, limit nested loops, cache repeated lookups.
- Remove unused CSS (LCP) — Use Coverage tab to find dead CSS, then remove or split it.
- Compress and lazy-load below-fold images (LCP) — Only lazy-load images below the fold. Never lazy-load the hero.
- Use font-display: swap with size-adjust (CLS) — Prevents text reflow when custom fonts load.
How Speed Affects Your Conversion Rate
Speed isn't just an SEO metric. It's a conversion metric. Faster stores convert better. The relationship isn't linear, but the pattern is consistent across ecommerce conversion rate benchmarks. Stores that pass all three Core Web Vitals thresholds consistently outperform stores that fail them, even when controlling for other variables like pricing and product quality.
This is where speed optimization pays for itself. You're not just chasing a better score in PageSpeed Insights. You're removing friction from the buying process. Every millisecond of delay is a small tax on buyer intent.
If you're working to improve both speed and profit margins, start with speed. The conversion lift from a faster store compounds on every dollar of traffic you send to it, paid or organic.
Measuring Progress
After making changes, don't check PageSpeed Insights once and call it done. Here's the right way to validate your fixes:
- Lab data (PageSpeed Insights): Shows immediate results from simulated tests. Use this to confirm your fixes are working technically.
- Field data (Chrome UX Report / Search Console): Shows real user experience data. This takes 28 days to update because it's based on actual Chrome user data. Your lab scores can be green while field data is still red. Wait for the 28-day window before declaring victory.
- Shopify speed score: Updates on its own schedule. It's a useful directional indicator but not precise enough to measure individual fixes. Use PageSpeed Insights for specifics.
Set a calendar reminder to recheck your Core Web Vitals monthly. Theme updates, new app installs, and seasonal content changes (holiday banners, flash sale pop-ups) can regress your scores without warning. Treat speed like inventory: monitor it regularly or it degrades.
Frequently Asked Questions
What are Core Web Vitals on Shopify?
Core Web Vitals are three metrics Google uses to measure real-world user experience: LCP (Largest Contentful Paint) measures loading speed, INP (Interaction to Next Paint) measures responsiveness, and CLS (Cumulative Layout Shift) measures visual stability. Shopify stores are scored on all three, and failing any one of them can hurt your Google rankings.
Why is my Shopify speed score so low?
The most common causes are unoptimized hero images (often the single biggest LCP bottleneck), too many third-party apps injecting JavaScript, render-blocking scripts in the theme header, oversized product images without modern format compression, and excessive Liquid template complexity. Most stores can improve dramatically by fixing just the top two or three issues.
Does Shopify speed score affect SEO rankings?
Yes. Google confirmed Core Web Vitals as a ranking signal in 2021 and has maintained them since. Stores that pass all three thresholds get a ranking boost over stores that fail. The effect is strongest in competitive niches where other ranking factors are close between sites. Speed also affects conversions directly, which has a bigger revenue impact than the ranking signal alone.
What is a good LCP score for Shopify?
Google considers LCP "good" at 2.5 seconds or faster, "needs improvement" between 2.5 and 4.0 seconds, and "poor" above 4.0 seconds. Most unoptimized Shopify stores land between 3 and 6 seconds. The target is under 2.5 seconds, and well-optimized Shopify stores can achieve LCP under 1.8 seconds by optimizing hero images, reducing render-blocking scripts, and preloading critical assets.
How do I fix CLS on Shopify?
The most common CLS fixes are adding explicit width and height attributes to all images, reserving space for dynamically loaded content like app embeds and review widgets, avoiding late-loading fonts that cause text reflow, and setting fixed dimensions on promotional banners and announcement bars. Your CLS score should be under 0.1 to pass Google's threshold.
Should I remove Shopify apps to improve speed?
Not necessarily. The biggest speed offenders are apps that inject JavaScript on every page load: review widgets, live chat, pop-up builders, and analytics trackers. Before removing apps, audit which ones actually load scripts on your storefront using Chrome DevTools. Some apps only run in the admin panel and have zero speed impact. Focus on deferring or replacing the apps that add the most render-blocking JavaScript rather than removing everything.