Shopify speed, measured in revenue.
Core Web Vitals in the green. LCP under 2.5 seconds, INP under 200 milliseconds, CLS under 0.1. Image compression, app audit, theme surgery, third-party script diet, all tied to conversion and organic traffic.
Every slow store has one waterfall. Read it first.
Speed optimisation starts by opening Chrome DevTools on your slowest URL and reading the network waterfall. Every Shopify store bottleneck shows up here within 30 seconds: the 1.2MB hero JPG, the synchronous third-party tag, the fifteen Klaviyo and Meta Pixel requests firing on load. The autopsy below is a redacted view of a typical slow Shopify product detail page.
| Resource | Size / duration | Fix |
|---|---|---|
| Hero JPG @ 2400×1600 | 1.2MB / 1,600ms | AVIF + responsive srcset + preload = 60KB / 180ms. |
| Klaviyo onsite script | 180KB / 420ms | Defer until user intent (exit, scroll, tap). |
| Meta Pixel sync | 80KB / 290ms | Move to CAPI server-side. Remove client pixel. |
| Product recommendations app | 320KB / 580ms | Replace with Shopify native Product Recommendations. |
| Reviews widget (Loox) | 240KB / 510ms | Lazy-load on scroll. Show summary only above fold. |
| GoogleTagManager + 6 tags | 160KB / 340ms | Consolidate to GA4 + Meta CAPI. Remove GTM. |
| Google Fonts (3 families) | 140KB / 260ms | Self-host, subset, preload, font-display swap. |
| Theme JS bundle | 280KB / 410ms | Tree-shake. Split per-route. Remove legacy carousel. |
| 14 more tags | ~600KB total | Audit individually. Keep 4, defer 6, remove 4. |
The waterfall above converts cleanly into a prioritised fix backlog. The top three fixes (hero image, Klaviyo script, Meta Pixel migration to CAPI) usually deliver 60 to 70 percent of the total LCP and INP win. Everything below is incremental against that.
Every second costs conversion.
Core Web Vitals are not abstract metrics. Each one maps to a revenue lever: LCP to bounce rate and organic ranking, INP to cart conversion, CLS to mis-clicks and rage-taps. Below is the documented mapping.
| Metric | Good | Needs work | Revenue impact |
|---|---|---|---|
| LCP | < 2.5s | 2.5-4s | Bounce rate + organic rank signal. |
| INP | < 200ms | 200-500ms | Cart abandonment + add-to-cart friction. |
| CLS | < 0.1 | 0.1-0.25 | Mis-clicks, rage-taps, checkout abandonment. |
| TTFB | < 800ms | 800-1800ms | Googlebot crawl depth + first byte cost. |
| JS bundle | < 200KB gz | 200-500KB | INP regressions + mobile parse time. |
Slow waterfall on the left. Fast one on the right.
Images are 80% of the weight.
The median Shopify product detail page is 80 percent image weight. Fixing images is the highest-impact work available on most stores.
Format: AVIF then WebP
AVIF compresses 50-70 percent smaller than JPEG at equivalent quality. WebP as fallback for older iOS. Shopify's image CDN handles conversion automatically when you use the image_url Liquid filter with format parameter.
Responsive srcset
Shopify CDN resizes on the fly. Use srcset with 400, 800, 1200, 1600, 2000 widths. Browser picks the smallest that covers the display.
Preload the hero
Hero image (above-fold LCP element) preloaded in the head with imagesrcset. Saves 300-800ms on first paint.
Lazy-load everything else
loading=lazy on every below-fold image. decoding=async on everything. Native browser support is universal now.
Most slow Shopify stores have 40+ apps.
Shopify now publishes app performance scores in the admin. We cross-reference those with a waterfall audit to find the three to eight apps that are actually dragging your store. Everything else stays.
- Storefront JavaScript injection: app adds JS to every page. Biggest INP hit. Candidates for removal or replacement.
- Render-blocking scripts: app loads synchronously before paint. Always fixable via defer or async attribute.
- Third-party network calls on load: app fires a request to its own CDN before the page is painted. Usually movable to post-load.
- Liquid render cost: app uses Liquid blocks with heavy object lookups. Shopify's render time per section is visible in the admin app performance view.
- Duplicate functionality: two apps do the same thing (reviews, wishlist, upsell). Keep one, remove the other.
- Native replacements: if Shopify ships a native feature that replaces the app (e.g., native Product Recommendations), always prefer native.
Dawn is fast. Most customisations are not.
Shopify's Dawn theme ships fast out of the box. Three years of agency customisation on top of it is what slows it down. The surgery below is what we run when the starting theme is a Dawn fork or a Premium theme with heavy accumulated customisations.
Section-level JS splitting
Each section loads only its own JS. Collection page does not parse product detail JS.
Critical CSS inlined
Above-fold styles in a style tag in head. Rest deferred.
Font subsetting
Only the characters actually used, self-hosted, preloaded.
Liquid render audit
Remove expensive loops over all_products, product_type collections, and large metafield trees.
CSS purge
Old theme forks carry unused CSS. Purge unused selectors per template.
Section Rendering API
Use Section Rendering API for cart updates, filter changes. Avoid full page reload.
Marketing tags are the silent killer.
Meta Pixel, GA4, TikTok, Pinterest, Klaviyo, plus whatever your marketing team installed last quarter. Every tag is measured, then either kept, deferred, or moved server-side.
| Tag | Default state | Optimised state |
|---|---|---|
| Meta Pixel | Client-side synchronous | CAPI server-side via Shopify native. |
| Google Analytics 4 | Client-side gtag | Shopify Web Pixels Manager, server-side where possible. |
| TikTok Pixel | Client-side sync | TikTok Events API server-side. |
| Pinterest Tag | Client-side sync | Defer to user intent or server-side Conversion API. |
| Klaviyo onsite | Client-side sync | Defer until scroll or exit intent. Keep identification server-side. |
| Google Tag Manager | Client-side sync with container | Remove. Use Shopify Web Pixels. GTM adds a layer of weight for dubious benefit on Shopify. |
Shopify's CDN is already good. Use it right.
Shopify uses Cloudflare as its CDN and Fastly for image delivery. Both are fast. Most slow Shopify stores are not slow because the CDN is slow; they are slow because the origin output is bad and the CDN can only cache what exists.
Image CDN parameters
Use Shopify's image_url filter with width, format, crop parameters. Hard-coded URLs bypass the CDN resize.
Asset fingerprinting
Shopify handles this via asset_url filter. CSS and JS get long cache TTLs because the URL changes on every deploy.
Full-page cache
Shopify edge-caches full pages aggressively for anonymous visitors. Personalised or logged-in content bypasses cache; keep above-fold content anonymous where possible.
Preconnect warm-up
Add preconnect tags for the 3-4 domains you load from (CDN, image host, payment iframe). Saves 100-300ms on TTFB to those origins.
52 → 94 mobile Lighthouse. Four weeks.
A Noble Paris-archetype luxury fragrance brand came to us at 52 mobile Lighthouse on the product detail page. Checkout conversion had been drifting down quarter over quarter, and Google Search Console showed CWV failing on 60 percent of tracked URLs.
What shipped: hero image migrated to AVIF with responsive srcset and preload, Meta Pixel moved to server-side CAPI, 11 of 42 apps uninstalled (duplicates or replaced by native), GTM removed, Klaviyo deferred until scroll, 3 fonts self-hosted and subsetted. Before/after measured against CrUX field data, not synthetic. Conversion uplift isolated from concurrent marketing by holdout test across cohorts.
Four shapes.
Audit
Waterfall autopsy, app audit, 20-item fix backlog.
Speed sprint
Targeted fixes. Measurable green-zone delivery.
Retainer
CWV monitoring, regression response, new-app triage.
BFCM hardening
10x load testing, pre-warming, on-call through peak.
Six questions merchants ask.
Why is my Shopify store slow on mobile?
On Shopify, three causes account for the vast majority of slow mobile pages: uncompressed or oversized hero images (LCP), too many third-party apps injecting JavaScript into every page (INP), and fonts loaded without preload plus images rendered without explicit dimensions (CLS). Theme code is usually a distant fourth. A waterfall audit of your top five URLs will show which cause dominates within 30 minutes; we do this in week one of every engagement.
How much speed gain can I realistically get?
For a Shopify store currently at 40-60 mobile Lighthouse, reaching 80-90 is typical within a four-week sprint. Reaching 95+ requires structural changes (reducing the app count, migrating to Dawn 2.0 sections, sometimes moving to Hydrogen for heavy merchandising stores). The single highest-impact fix on most Shopify stores is the hero image: replacing an 800KB hero JPG with a 60KB AVIF plus correct preload drops LCP by 1.5 to 2.5 seconds. Everything else is incremental against that one move.
Does speed actually affect my revenue?
Yes, directly. Shopify's own data plus Google's Core Web Vitals studies both show conversion penalties that scale with LCP. Stores with LCP above 4 seconds typically convert 15-25% worse than the same store with LCP under 2.5 seconds, holding traffic quality constant. Organic traffic also moves: since 2021, Core Web Vitals has been part of Google's ranking signals, and pages that fail CWV lose to competitors who pass. The revenue math is usually straightforward once we have your current conversion rate and top-URL LCP numbers.
Should I uninstall apps to get faster?
Selectively, yes. Not every app is a speed drag. We audit each installed app for: does it inject JavaScript into every page, does it load synchronously, does it render-block, does it fire third-party network requests. Typical outcome: 3-8 apps become candidates for removal (either the feature is no longer used, or a lighter alternative exists), and 2-4 more apps need a Shopify support ticket to request a snippet fix. We never recommend uninstalling an app without a specific measured impact.
What is INP and why is it harder than LCP to fix?
INP (Interaction to Next Paint) measures how quickly the page responds when a user taps or clicks. It replaced FID in March 2024. It is harder to fix than LCP because the cause is almost always JavaScript blocking the main thread, and JavaScript on Shopify is scattered across the theme, installed apps, and third-party tags. A typical Shopify INP fix involves: code-splitting non-critical theme JS, deferring third-party tags until interaction, auditing apps that bind heavy event listeners, and where possible moving work to Web Workers. 4 weeks is normal for a significant INP improvement.
Do we need Shopify Plus to get Core Web Vitals green?
No. Shopify Basic, Shopify, and Shopify Advanced can all hit green CWV on mobile with the right engineering. The limits you hit without Plus are mostly checkout-related (no Checkout UI Extensions, no Shopify Functions, no custom checkout rendering) and deeply-bespoke performance work (no Hydrogen headless, no Oxygen edge). For 80 percent of stores, native Shopify theme engineering on Basic or Advanced is enough to reach 90+ mobile Lighthouse. Plus becomes necessary when merchandising or checkout performance bottlenecks cannot be solved inside a Liquid theme.
Two-week speed audit. Twenty fixes.
Waterfall autopsy, app scorecard, CWV mapped to revenue. Scoped four-week sprint plan at the end.
Book my 30-minute speed audit call