In 2021, Google officially made Core Web Vitalsa ranking signal. Since then, page performance has gone from a "nice to have" to a direct factor in where your store appears in search results. A slow Shopify store doesn't just frustrate users — it gets outranked by faster competitors.
After optimizing dozens of Shopify stores, I've identified the exact issues that cause poor scores — and the interventions that fix them. This is the checklist I run on every build.
Understanding What Lighthouse Actually Measures
Google Lighthouse scores are weighted across five metrics. For performance specifically, the 2024 weightings are:
- Largest Contentful Paint (LCP) — 25%: How long until the largest visible element renders. Target: under 2.5s.
- Total Blocking Time (TBT) — 30%: How much JavaScript blocks the main thread. Target: under 200ms.
- Cumulative Layout Shift (CLS) — 15%: How much the page jumps as elements load. Target: under 0.1.
- First Contentful Paint (FCP) — 10%: When the browser first renders anything. Target: under 1.8s.
- Speed Index — 10%: How quickly the page visually fills in. Target: under 3.4s.
TBT has the highest weight, which means JavaScript reduction is the highest-leverage optimization for most Shopify stores.
The 6 Highest-Impact Optimizations
1. Audit and Remove Unused Apps
This is the single biggest win on almost every store I've worked on. Each Shopify app typically injects 20–80KB of JavaScript on every page — including pages where the app does nothing. A store with 8 apps might be loading 300KB+ of third-party scripts that users never interact with.
Run Chrome DevTools' Coverage tabon your storefront. You'll typically see 60–80% of loaded JavaScript marked as unused. Start removing apps that haven't been used in 30 days, then evaluate whether the remainder can be replaced with native Liquid functionality.
Average LCP improvement after removing unused apps from a mid-size Shopify store. Measured across 8 client projects in 2024.
2. Serve Correctly Sized Images
Shopify's CDN supports on-the-fly image resizing via URL parameters (_200x200, _800x, etc.). Despite this, most themes serve the original uploaded image — sometimes 2000×2000px images displayed at 400×400px — wasting bandwidth and LCP budget.
Use Shopify's image_url filter with explicit dimensions based on actual rendered size. For a product grid showing 3 items per row on desktop at 1200px, each image should be requested at no wider than 400x. On mobile at 375px with 2 columns, request 190x. Use srcset to serve the right size at each breakpoint.
Additionally, use WebP format via format: 'webp' in the image URL. WebP images are typically 25–35% smaller than JPEG at equivalent quality.
3. Preload the LCP Image
The LCP element — usually the hero image or first product image — is often discovered late in the loading process because the browser has to parse HTML, load CSS, and evaluate layout before it knows which element will be largest. Adding a <link rel="preload"> tag for that image tells the browser to start fetching it immediately.
In Liquid, this looks like injecting a preload tag into the <head>for the hero section's featured image. On product pages, preload the first product image. This alone typically improves LCP by 200–500ms.
4. Eliminate Render-Blocking Resources
CSS files in the <head>block rendering until they're fully downloaded and parsed. Most Shopify themes load a single large stylesheet — sometimes 50–100KB — that must be processed before any pixel is painted.
The solution is to inline critical above-the-fold CSS directly in the <head> and load everything else asynchronously. Tools like Critters can automate critical CSS extraction, or you can manually identify the styles needed for above-the-fold content and inline them.
5. Defer All Non-Critical JavaScript
Any script that doesn't affect the initial render should be deferred. In Shopify's Liquid architecture, this means using deferon script tags and conditionally loading feature scripts only on pages where they're needed.
Your cart drawer JavaScript has no reason to load on blog posts. Your product recommendations script has no reason to load on the contact page. Use Liquid's template object to conditionally load scripts based on the current template.
6. Fix Layout Shift Sources
CLS above 0.1 usually comes from one of three sources: images without explicit dimensions (the most common), web fonts causing text to reflow when they load, and late-injecting banners or cookie notices that push content down.
For fonts: use font-display: optional or font-display: swap. For cookie banners: CSS-position them as overlays rather than document flow elements. For images: always set width and height attributes.
Testing Methodology
Don't test Lighthouse in your browser's DevTools alone — your machine's hardware will inflate the scores. Use PageSpeed Insights (which uses Google's servers) and WebPageTest with a Moto G4 mobile emulation profile. This more closely reflects the experience of real users on mid-range devices.
Always test on your live store, not localhost. CDN behavior, app scripts, and third-party embeds only run in production.
What Scores Are Actually Achievable
After these optimizations, the realistic range for a Shopify store is:
- Image-heavy stores (fashion, home goods): 82–91
- Product-focused stores (tech, accessories): 88–96
- Minimal stores (single product, SaaS-style): 93–99
StyleScape — an image-heavy theme — consistently scores 90–95 across stores using it. That's achievable for almost any well-built Liquid theme, but it requires making performance decisions from the first line of code rather than trying to retrofit optimizations after launch.
Abderrahim Baad
Expert Shopify Developer · Authorized Partner
Expert Shopify developer and premium theme developer based in Marrakech, Morocco. Creator of StyleScape, Bolt, and Vibe on the Shopify Theme Store. Available for new projects →