LCP — Largest Contentful Paint — is the metric Google uses to decide whether your store loads “feels fast.” Under 2.5 seconds is the official pass mark. Anything worse and you bleed conversion before the page is even interactive. Anything over 4 seconds and Google quietly drops you from product feeds.
Most Shopify Plus stores I've audited land somewhere between 3.5s and 5.5son mid-tier mobile. The fix isn't mysterious. It's mechanical. Here's the order of operations.
The five LCP killers
Every slow Shopify Plus store I've worked on has shared at least three of these:
- Hero image bloat. Above-the-fold images served as 2MB PNGs with no responsive sizing.
- App stack debt. 8–15 active apps injecting scripts at
theme.liquidload. - Render-blocking custom fonts. Third-party fonts loaded synchronously, no
font-display: swap. - No critical CSS. Entire stylesheet downloads before the first paint.
- Liquid loops gone wild. Heavy
{% for product in collection.products %}with expensive metafield lookups in the loop.
The order matters
If you fix these in the wrong order, you waste time. The image pipeline saves the most LCP. App audit saves the most JS. Do them first.
1. Fix the hero image (single biggest win)
The single biggest LCP improvement on most Shopify stores comes from the hero image alone. Three changes:
- Serve as AVIF with WebP fallback. Shopify CDN supports both via
.avifand.webpURL transforms. - Use
srcsetwith real device widths (390w, 750w, 1280w, 1920w). Not the lazy “3x scaling” method. - Add
fetchpriority="high"andloading="eager"on the hero, lazy-load everything else.
A 1.2MB hero PNG becomes an 84kb AVIF. That alone shaves 1.5–2 seconds on 4G mobile.
2. Audit the app stack
Every Shopify app injects code at theme load. Most do it synchronously. Open your store in DevTools, look at the Network tab, sort by waterfall. Each row that blocks your hero is a target.
Ask of every app: can this be theme code instead? Most of the time the answer is yes:
- Review widgets → native review tags + Liquid render
- Size guides → custom drawer in theme
- Currency switchers → Shopify Markets native
- Country selectors → Geolocation API + Liquid
- Cart drawers → custom Liquid + Alpine
Six apps replaced by 200 lines of clean Liquid. Bundle size drops 60–80%.
3. Font strategy
Most Shopify themes load fonts wrong. The fix:
- Self-host critical fonts (don't hit Google Fonts on every load).
- Use
font-display: swapso text renders with fallback while font loads. - Preload only the specific weights used above the fold (usually 1, sometimes 2).
- Subset to Latin characters only unless you're shipping internationally.
4. Critical CSS
Inline the styles needed for above-the-fold render in <head>. Defer the rest. Tools like critical (npm) automate this — but for Shopify, the manual approach gives better control. Identify your above-the-fold selectors, inline them in theme.liquid, async-load the rest.
5. Liquid loop discipline
Inside {% for product in collection.products %}, avoid:
- Metafield lookups (cache them above the loop)
- Repeated
filterchains - Conditional includes that pull entire snippets
Real numbers from a recent build
For one DTC fashion brand the team went from:
- LCP: 4.2s → 0.9s on 4G mobile
- Lighthouse Performance: 38 → 98
- JS bundle: cut by 73%
No design simplification. No reduction in animation. No loss of brand richness. Just a disciplined audit, in the right order.
Speed isn't the enemy of design
The lazy excuse for slow Shopify stores is “but we want it to look nice.” Look at Linear, Stripe, Vercel. They're some of the most considered-looking software products in the world. They're also some of the fastest. Speed and design are correlated, not in tension.
If your Shopify Plus store is over 2 seconds LCP, you're not under-designing. You're under-engineering.