Every additional second of mobile load time drops conversion by roughly 7%. Google uses Core Web Vitals as a confirmed ranking signal. And yet most Shopify stores still load in 4–6 seconds on mobile. The good news: getting under 2.5s LCP isn't magic. It's a 12-point checklist most stores can complete in 10–15 business days.
Here it is, in priority order.
1. Convert hero images to WebP/AVIF with responsive srcset
Your homepage hero is usually the LCP element. A 600KB JPEG can drop to 80KB WebP with no visible quality loss. Implement srcset so mobile fetches a 768px version instead of the desktop original. This alone often cuts LCP by 30–40%.
2. Preload your critical hero image and font
Add <link rel="preload" as="image" href="hero.webp"> in your theme.liquid for the homepage hero. Same for your main font. Browsers will start fetching these immediately, before parsing the rest of the HTML.
3. Use font-display: swap and subset your fonts
Most themes load 5+ weights of a Google Font. You probably use 2. Subset your font files to only the weights and characters you actually need. Add font-display: swap so text renders immediately with a fallback while the custom font loads.
4. Defer non-critical JavaScript
Add defer or async to every script that isn't critical for first paint. Most theme bundles include scripts for slideshows, popups, and animations that don't need to run before the page renders.
5. Audit every third-party app
Each Shopify app you install can inject JavaScript via the theme.liquid app embed. Some apps add 100KB+ of synchronous JS. Use the Coverage tab in Chrome DevTools to see how much of each script is actually used. Defer or remove the ones that aren't paying their way in revenue.
If an app injects 200KB of JS for a feature you use on 0.1% of pages, defer it or remove it. There's no middle ground.
6. Move review widgets below the fold
Yotpo, Stamped, and Judge.me widgets often appear above the fold and block LCP. Move the widget rendering to a lazy-load trigger that fires only when the user scrolls past 50% of the page. Reviews are important, but they don't need to render in the first 2 seconds.
7. Reserve space for layout-shifting elements
CLS (Cumulative Layout Shift) under 0.1 is the goal. The usual culprits: lazy-loaded images without dimensions, late-loading social proof bars, web fonts that swap and resize text. Add explicit width/height to every image, reserve space for banners, and tune your font fallback metrics so text doesn't shift when the custom font loads.
8. Inline critical CSS
The CSS needed for above-the-fold rendering should be inlined in the <head>. The rest can load asynchronously. This eliminates one render-blocking round trip and typically improves LCP by 200–400ms.
9. Remove unused Liquid loops
Custom themes often have Liquid sections that loop through every product on the homepage even when only 12 are visible. Audit your homepage sections.json and remove unused logic.
10. Use native lazy-loading for below-the-fold images
Add loading="lazy" to every image that's not in the first viewport. Browsers handle this natively now, no JavaScript library needed. This cuts initial page weight by 50% or more on collection and product pages.
11. Trim unused JavaScript bundles
Use Chrome DevTools Coverage tab to identify code you ship but don't use. Most theme bundles ship 200–400KB of JS where only 80–120KB is used on any given page. Tree-shake or code-split.
12. Benchmark on real mobile devices
Lighthouse on a Macbook lies. Run WebPageTest on a real mid-range Android (Moto G Power, Pixel 6a) over a throttled 4G connection. That's where your customers actually shop. Lighthouse scores of 90+ on desktop can mean 40–50 on real mobile.
Pre-launch scorecard
Before any speed work, capture these baseline numbers from PageSpeed Insights mobile:
- LCP (target <2.5s)
- CLS (target <0.1)
- INP (target <200ms)
- FCP (target <1.8s)
- Total page weight (target <1MB)
- JavaScript weight (target <200KB)
After completing the 12-point checklist, re-run and compare. Most stores see all six metrics move into the green within 10–15 business days.
Need help executing?
We run this checklist for Shopify brands every week. Most projects deliver visible Core Web Vitals improvements within 10–15 business days. Send us your URL. We'll send back a free Loom walking through the top 5 opportunities specific to your store.
Comments (0)
No comments yet. Be the first to weigh in.