If you run a Shopify store, you’ve probably opened PageSpeed Insights, seen a sea of red, and wondered if passing Core Web Vitals is even possible on the platform. The short answer: yes, it is, but most generic advice (“compress your images!”) only gets you halfway there. This guide is a practical walkthrough built for store owners who want to improve Core Web Vitals on Shopify without rebuilding their store from scratch.
We’ll cover theme-level tweaks, app audits, image handling, and third-party script management, with concrete before/after examples from real stores we’ve optimized at CSS Gallery Pro.
What Core Web Vitals Actually Measure in 2026
Before fixing anything, you need to know what you’re fixing. As of 2026, Google measures three Core Web Vitals:
| Metric | What it measures | Good score |
|---|---|---|
| LCP (Largest Contentful Paint) | How fast the main content loads | Under 2.5s |
| CLS (Cumulative Layout Shift) | How much the page jumps around while loading | Under 0.1 |
| INP (Interaction to Next Paint) | How fast the page responds to clicks/taps | Under 200ms |
INP replaced FID in 2024, and it’s where most Shopify stores now fail because of heavy JavaScript from apps. Keep this in mind as we go through the fixes.
10 Fixes That Actually Improve Core Web Vitals on Shopify
1. Audit Your Apps Before Anything Else
This is the single biggest lever on Shopify, and most guides skip it. Every app you install can inject JavaScript and CSS on every page, even pages where the app isn’t being used.
How to audit:
- Open your store in Chrome DevTools, go to the Network tab, and filter by JS
- Look for scripts loaded from third-party domains (review apps, upsell apps, popups, chat widgets)
- Compare the script size against the actual value the app provides
Real example: A client running a fashion store had 14 apps installed. We removed 6 of them (duplicate functionality, unused features). LCP dropped from 4.2s to 2.1s on mobile, with zero impact on conversions.
2. Switch to a Lightweight, Online Store 2.0 Theme
If you’re still on a heavily customized Debut, Brooklyn, or an old paid theme, this matters. Modern Shopify themes like Dawn, Sense, or premium options like Impulse and Motion are built with native section-based architecture and ship far less JavaScript by default.
Before switching, duplicate your current theme and test the new one on a staging URL. Most stores see a 30 to 50% LCP improvement just from theme migration.
3. Fix Your Hero Image (The LCP Killer)
On almost every Shopify store, the LCP element is the homepage hero image. Here’s how to handle it properly:
- Export the image in WebP or AVIF format
- Keep the file size under 150 KB for desktop and 80 KB for mobile
- Add
fetchpriority="high"andloading="eager"on the hero image only - Set explicit
widthandheightattributes to prevent CLS - Use Shopify’s responsive image filters (
image_url: width: 1200) withsrcset
Before: 2.4 MB JPEG hero, no priority hint, LCP at 5.1s.
After: 95 KB WebP with fetchpriority, LCP at 1.8s.
4. Preload Critical Assets
In your theme.liquid file, just above the closing </head> tag, preload your hero image and primary web font:
<link rel="preload" as="image" href="{{ 'hero.webp' | asset_url }}" fetchpriority="high">
<link rel="preload" as="font" type="font/woff2" href="{{ 'main-font.woff2' | asset_url }}" crossorigin>This single change typically shaves 300 to 600ms off LCP.
5. Defer or Async Non-Critical JavaScript
This is the main lever for fixing INP. Open your theme code and look for inline <script> tags or external scripts loaded without defer or async.
- Add
deferto anything that isn’t required for first paint - Load chat widgets, reviews, and analytics after user interaction or after a 3-second delay
- Replace heavy sliders (Slick, Swiper bundles) with native CSS scroll-snap when possible
6. Eliminate Layout Shift from Fonts and Banners
CLS issues on Shopify almost always come from:
- Web fonts swapping in late: use
font-display: optionalor preload the WOFF2 - Announcement bars injected by apps: reserve space with
min-height - Product images without dimensions: always set width/height
- Cookie banners appearing at the top of the page after load: anchor them to the bottom or use a fixed overlay
7. Lazy Load Below-the-Fold Content
Every image below the fold should use loading="lazy". The same goes for iframes (YouTube embeds, Instagram feeds). For YouTube specifically, use a lite-youtube embed pattern instead of the default iframe, which loads over 500 KB of JavaScript.
8. Clean Up Your Liquid and Section Bloat
Themes accumulate unused sections, snippets, and CSS over time. Run through your assets/ folder and look for:
- Old CSS files no longer referenced
- JavaScript libraries duplicated by multiple apps (jQuery loaded 3 times is common)
- Unused section schemas still rendering on every page
Use PurgeCSS patterns or manually remove unused selectors. A trimmed theme typically removes 100 to 300 KB of unused code.
9. Optimize Third-Party Scripts (GTM, Pixels, Reviews)
Google Tag Manager, the Meta Pixel, TikTok Pixel, and review widgets are notorious INP killers. Strategies:
- Use Shopify Web Pixels for tracking when possible (they run off the main thread)
- Delay GTM until user interaction
- For reviews (Judge.me, Loox, Yotpo), only load the widget on product pages, not the homepage
- Replace live chat with a static “Contact us” button on the homepage, and load the full widget only on click
10. Monitor with Real User Data, Not Just PageSpeed Insights
PageSpeed Insights gives you lab data. Google ranks you on field data (real users via CrUX). Use:
- Google Search Console > Core Web Vitals report
- CrUX dashboard for trend analysis
- The Web Vitals Chrome extension while browsing your own store
Lab scores can look good while real users still struggle. Always confirm fixes with 28-day field data before celebrating.
Before and After: What Realistic Results Look Like
| Metric | Before | After |
|---|---|---|
| LCP (mobile) | 4.8s | 2.1s |
| CLS | 0.28 | 0.04 |
| INP | 520ms | 180ms |
| PageSpeed Mobile Score | 38 | 87 |
These are real numbers from a Shopify store we optimized in early 2026 using the exact 10 steps above.
Common Mistakes to Avoid
- Installing a “speed booster” app on top of all your other apps (it adds another script)
- Implementing AMP (deprecated and no longer recommended for Shopify in 2026)
- Only testing the homepage and ignoring product and collection pages
- Chasing a 100 score in PageSpeed Insights instead of focusing on the three CWV thresholds
FAQ
Can a Shopify store actually pass Core Web Vitals?
Yes. It takes work, but with a modern theme, disciplined app usage, and proper image handling, passing all three CWV thresholds on mobile is achievable for most stores.
What’s the most impactful fix for Shopify LCP?
Optimizing the hero image (WebP format, fetchpriority="high", preload tag) combined with removing unused apps usually delivers the biggest LCP gain.
Why is my INP so bad even after optimizing images?
INP is driven by JavaScript execution. Images don’t affect it. You need to audit your apps and third-party scripts, defer non-critical JS, and delay tracking pixels.
Should I use a Shopify speed optimization app?
Most of them are marginal. The fundamentals (theme quality, app discipline, image handling, script management) will always outperform an app-based shortcut. If you do use one, audit its impact carefully.
How long until improvements show in Search Console?
Search Console uses 28-day rolling field data, so expect to wait 3 to 4 weeks after deploying fixes before scores update in the CWV report.
Final Thoughts
Improving Core Web Vitals on Shopify is less about magic tricks and more about discipline: fewer apps, lighter themes, smarter images, and controlled JavaScript. Work through these 10 fixes in order, measure with real field data, and you’ll see your scores climb into the green zone.
If you’d like our team at CSS Gallery Pro to audit your Shopify store and handle the technical fixes for you, get in touch and we’ll send you a free Core Web Vitals report.