Loading tutorials…
Loading tutorials…
Every 100ms of additional page-load time costs ~1% of conversion rate on mobile. Shopify stores routinely run 3-7 second LCPs because apps stack, images go un-optimized, and themes ship with bloat. Here's the systematic speed audit.
Who this is forShopify owners whose PageSpeed Insights mobile score is below 60 OR whose Largest Contentful Paint exceeds 2.5 seconds. If you run paid ads, every second of load time costs you Quality Score in Google Ads and CR in checkout.
What you'll need
Step 1
Run PageSpeed Insights on your homepage, top product page, and top collection page. Note LCP, FID, CLS, and TTFB. These are your baseline metrics.
Open pagespeed.web.dev → enter your homepage URL → run.
Note: Mobile score, LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), INP (Interaction to Next Paint — replaced FID in March 2024).
Repeat for: top product page and top collection page. Speed varies meaningfully by template type.
Targets: Mobile score 70+, LCP under 2.5s, CLS under 0.1, INP under 200ms.
If you're below 50 mobile score or above 4s LCP, you have meaningful room to improve. Anything above 80 mobile score is already strong — focus elsewhere.
Step 2
Shopify Admin → Apps. Every installed app adds 50-500ms of JS to your store. Disable apps you don't actively use.
Open Shopify Admin → Apps → sort by 'Last used' descending.
Apps not used in 30+ days: uninstall. They're still loading their JS on every pageview.
Apps you DO use but don't need on every page: configure to load only where needed (e.g., reviews only on product pages, not on home or collection).
Use the Shopify theme inspector or Lighthouse → JavaScript coverage to identify which apps inject the most unused JS.
Common culprits: chat widgets (300-500ms), review apps (200-400ms), popup/upsell apps (200-600ms), bundled-product apps (300-1000ms).
Decision: each app must justify its performance cost with measurable revenue. If you can't tie it to revenue, remove it.
Step 3
Shopify auto-converts images to WebP, but oversized originals still bloat the page. Compress and resize.
Shopify auto-serves WebP for modern browsers. The issue is original file size — if you upload a 5MB hero image, Shopify still serves a 1.5MB WebP.
Pre-upload, resize images to actual rendered dimensions. Hero images: 1920px wide max. Product images: 1200px wide. Thumbnails: 400px wide.
Compress with Squoosh.app, ImageOptim, or a build-time tool. Target: hero images under 200KB, product images under 100KB.
Use Shopify's image_url filter with explicit width: {{ image | image_url: width: 1200 }}. This forces correct sizing.
For LCP (the largest visible image on first load), preload it via <link rel='preload' as='image'> in theme.liquid. Lifts LCP by 200-500ms typically.
Step 4
Online Store 2.0 themes support native lazy loading. Verify it's enabled on all image elements + iframes.
Most Online Store 2.0 themes ship with loading='lazy' on below-fold images. Verify by inspecting img elements in DevTools.
For the hero image (above the fold), do NOT lazy-load — preload it instead. Lazy-loading the hero hurts LCP.
iframes (embedded YouTube videos, social media embeds) should ALWAYS be lazy. Add loading='lazy' to <iframe> tags in theme.liquid.
For image carousels: lazy-load all but the first slide. Themes vary — verify or customize.
Lazy-loading typically lifts mobile score 5-15 points if your store is image-heavy.
Step 5
PageSpeed Insights flags every CSS/JS file that blocks the first render. Defer non-critical JS. Inline critical CSS.
Run PageSpeed Insights → check 'Eliminate render-blocking resources' opportunity.
Each flagged resource adds 100-500ms of blocking time on mobile.
Common offenders: theme CSS (one large bundle), third-party fonts loaded synchronously, Klaviyo / Privy / Mailchimp signup scripts.
Fix critical CSS by inlining the first 14KB of CSS into theme.liquid <head>. Tools like Critical-CSS-Plus do this automatically.
Defer non-critical JS: add async or defer attributes to <script> tags. Especially for chat widgets, popup scripts, analytics tags.
Move Google Fonts to font-display: swap. Better: self-host the font files for full control over loading behavior.
Step 6
Online Store 2.0 themes are flexible but ship with unused code from sections you don't use. Audit and trim.
Open DevTools → Coverage tab → reload your homepage.
Coverage shows which CSS and JS is actually used vs loaded. Typical: 40-60% of theme CSS goes unused on a given page.
Solution depends on technical comfort: (a) Switch to a leaner theme (Dawn from Shopify is fastest), (b) Customize your theme to remove unused sections, (c) Hire a developer to refactor.
Beware: aggressive CSS purging can break responsive behaviors or dark-mode variants. Test thoroughly.
For non-developers: the highest-leverage move is switching to Dawn (Shopify's reference theme — fastest available) and customizing from there. Dawn ships with 60% less unused CSS than most paid themes.
Step 7
Don't make 8 changes at once. Ship one, wait 24 hours, re-run PageSpeed Insights, then ship the next.
Pick the highest-leverage finding (usually app removal or image optimization).
Ship only that change. Wait 24 hours for Shopify CDN caches to refresh.
Re-run PageSpeed Insights. Compare mobile score, LCP, CLS, INP against baseline.
If meaningful improvement: ship the next finding. If no improvement: revert (or accept that the finding wasn't the bottleneck) and try the next hypothesis.
Track changes in a spreadsheet. Date, change made, before/after metrics. Speed is a compound — knowing what worked matters.
Common mistakes
Installing apps without measuring the speed impact
What goes wrong: Each app adds 100-500ms. Five 'small' apps = 1-2 seconds of LCP drag. Conversion rate drops 5-15%. You blame the funnel when it's actually app stack performance.
How to avoid: Before installing any app, baseline PageSpeed score. After installing, re-measure. If score drops 5+ points, uninstall unless the app drives measurable revenue.
Uploading uncompressed hero images
What goes wrong: A 5MB hero image becomes a 1.5MB WebP — still 5x what it should be. Mobile LCP exceeds 4 seconds. Quality Score drops in Google Ads.
How to avoid: Pre-process every image: resize to display dimensions, compress with Squoosh or ImageOptim. Target: hero under 200KB, product images under 100KB.
Lazy-loading the hero image
What goes wrong: Lazy-loading the LCP element delays it by 200-500ms. PageSpeed Insights flags 'Largest Contentful Paint image was lazily loaded.' Mobile score drops 10+ points.
How to avoid: On the hero image: remove loading='lazy', add fetchpriority='high', and preload via <link rel='preload'> in theme.liquid <head>.
Render-blocking chat widget loading on every page
What goes wrong: Chat widget loads 300-500ms of JS before render. Mobile users on 4G see 1-2 seconds of blank page. Bounce rate climbs.
How to avoid: Configure chat widget to load async/defer. Better: only load it after first user interaction (mousemove, scroll, tap). Lifts LCP 200-400ms.
Sticking with a bloated paid theme
What goes wrong: Many paid themes (especially older ones) ship with 200-500KB of unused CSS. Mobile score caps at 50-60 no matter what you optimize.
How to avoid: Switch to Dawn (free, Shopify reference theme, fastest available) or a known-fast paid theme (Impulse, Prestige, Refresh). Migration cost: 1-2 weeks of work + ~$200-300 if you hire a developer for theme migration.
Ignoring Cumulative Layout Shift (CLS)
What goes wrong: Hero images, banners, or buttons load and shift the page below them. CLS over 0.1 is a Core Web Vitals failure. Search ranking takes a hit, especially in competitive niches.
How to avoid: Reserve space for every above-fold element via aspect-ratio or fixed dimensions in CSS. Test with Lighthouse → CLS section.
Recap
Done — what's next
How to audit Shopify app bloat and reclaim speed
Read the next tutorial
Hand it off
Speed optimization is a one-time project for most stores but a continuous discipline for stores doing $50K+/mo. A specialist can ship the full audit + first-pass fixes in 1-2 weeks at $14-16/hr — typically $400-800 total. Ongoing speed monitoring runs $200-400/mo.
See specialist rates
Somewhat. Shopify's hosting is fast (CDN-served, sub-200ms TTFB). The limits come from: theme code quality, app stack, and image optimization. A clean Shopify store on Dawn can hit 85+ mobile score. A bloated paid theme with 12 apps caps at 50.
Only for stores doing $1M+/year with custom requirements. Hydrogen + Oxygen (Shopify's headless stack) gives you full rendering control and can hit 95+ mobile scores. But it requires a developer team. For most stores, optimizing the standard Shopify stack reaches 80+ scores at a fraction of the cost.
App removal. Every store we've audited had at least one app responsible for 300ms+ of load time that wasn't justifying its cost. Cleanup wins more speed than any code change for most stores.
Yes, but smaller than marketing copy suggests. Going from 5s to 2.5s LCP typically lifts mobile CR 5-15%. Going from 2.5s to 1.5s is another 2-5%. Below 1.5s, returns are minimal — focus elsewhere.
Markets adds a small amount of JS for currency/language switching (50-100ms). Negligible for most stores. The bigger Markets-related speed risk: poorly-configured per-country routes that don't use the same CDN edge.
Shopify
Every Shopify app adds JavaScript. Every script blocks rendering. The average Shopify store has 12-18 installed apps and 6-10 of them shouldn't be there. Here's how to identify the bloat and cut it without breaking anything.
Shopify
Shopify ships with decent SEO defaults but several land mines. Wrong title template, duplicate collection URLs, missing structured data — these are the issues that cap your organic ceiling no matter how much you blog. Here's the foundation, done right.
Shopify
If your store gets traffic but your checkout completion rate is below 50%, you're losing real money to fixable friction. This walkthrough is the diagnostic sequence a Shopify CRO specialist runs in their first week on the account.
Shopify
Product pages get the love. Collection pages get the rankings. For ecommerce SEO, your collection pages are the equivalent of category pages on Amazon — and most Shopify stores leave them as glorified product grids. Here's how to make them rank.
Shopify
DIY Shopify marketing is a great idea — until it isn't. This is the honest framework: when the cost of self-managing exceeds the cost of hiring, and how to tell which side you're on.