A slow Shopify store costs you money every day. Google data shows a 1-second delay in mobile page load time reduces conversions by up to 20%. A store that loads in 1.5 seconds converts measurably better than one that loads in 3.5 seconds — at the same traffic level, from the same ads. This guide covers every technique to make your Shopify store load faster.
How to Measure Your Shopify Store’s Speed
Before optimising, measure baseline performance on three key pages:
- Homepage — first impression for all traffic sources
- Top collection page — where most organic search traffic lands
- Best-selling product page — where conversions happen
Use these tools:
- Google PageSpeed Insights — pagespeed.web.dev — gives lab scores and real-world CrUX field data. Mobile score is what matters.
- WebPageTest — webpagetest.org — run from a location close to your customers (Mumbai for India, London for UK). Shows exact waterfall of what is loading and when.
- Shopify’s built-in speed score — Online Store → Themes → View Report. Relative benchmark comparing you against other Shopify stores.
The Biggest Shopify Speed Problems (and How to Fix Them)
1. Unoptimised Images — The #1 Problem
Images are responsible for 60–80% of a typical Shopify page’s file size. Fixes:
- Upload in WebP format. WebP is 25–35% smaller than JPEG at equivalent quality. Shopify serves WebP automatically to supporting browsers when you upload JPEG/PNG — but uploading WebP directly gives better control.
- Resize before uploading. Do not upload a 4000×3000px image when your theme displays it at 800×600px. Resize to the maximum display size before uploading.
- Use Shopify’s image CDN parameters. Shopify’s CDN accepts width parameters:
image.jpg?width=800serves an 800px-wide version. Use these in your theme’simg_urlfilters. - Add lazy loading. Images below the fold should not load until the user scrolls to them. Add
loading="lazy"to all<img>tags except the hero image (which should havefetchpriority="high").
2. Too Many Apps Loading Scripts
Every Shopify app you install has the potential to load JavaScript on every page of your store — even pages where the app does nothing. A store with 15 apps often has 8–10 unnecessary scripts loading on the homepage.
How to audit: Open your store in Chrome → right-click → Inspect → Network tab → filter by JS. Look for scripts from apps you barely use or forgot about. Each unnecessary script adds 100–500ms to your load time.
Fix: Uninstall apps you no longer use (uninstalling removes the script — deleting the app listing in Shopify admin is not enough; you must also remove leftover script tags from your theme.liquid if they were added manually).
3. Render-Blocking JavaScript and CSS
Scripts loaded in the <head> block the browser from rendering your page until they finish downloading. Fix: move non-critical scripts to the bottom of <body>, add defer attribute to non-critical scripts, and use async for analytics and tracking scripts that do not affect page rendering.
// Before
<script src="app.js"></script>
// After (deferred — runs after HTML parsing, before DOMContentLoaded)
<script src="app.js" defer></script>4. Slow Google Fonts Loading
Google Fonts loaded via the standard <link> method block rendering until fonts are downloaded. Fix:
- Add
font-display: swapto your@font-facedeclarations so text renders in a fallback font while the custom font loads - Preconnect to Google Fonts:
<link rel="preconnect" href="https://fonts.googleapis.com"> - Self-host critical fonts in your theme assets (eliminates third-party DNS lookup)
5. Large Liquid Loops and Inefficient Theme Code
Shopify themes with large nested loops (e.g., looping through all products to find a specific one) generate slow server-side render times. This is visible as a high TTFB (Time to First Byte) — over 600ms is a red flag. Fix: refactor Liquid templates to use efficient filtering, avoid loading unnecessary sections on pages that do not need them, and minimise the number of Liquid objects accessed per render.
6. Uncompressed CSS and JavaScript Files
Shopify automatically gzips assets from its CDN, but custom CSS and JS files added to your theme should be minified. Remove comments, whitespace, and redundant code from theme.css and theme.js. Tools: CSS Minifier, JavaScript Minifier. A typical Shopify theme CSS file reduces from 150KB to 90KB minified — a 40% saving.
Fixing Core Web Vitals on Shopify
LCP — Largest Contentful Paint (Target: Under 2.5s)
LCP measures how quickly the largest element in the viewport loads — usually your hero banner image or product image. To improve LCP:
- Preload the hero image:
<link rel="preload" as="image" href="hero.webp"> - Add
fetchpriority="high"to the hero<img>tag - Serve the hero image at the correct size (match the CSS display size)
- Use WebP format for the hero image
INP — Interaction to Next Paint (Target: Under 200ms)
INP measures how quickly your store responds when a user clicks something. Poor INP is almost always caused by heavy JavaScript blocking the main thread. Common culprits on Shopify: chat widgets, complex product configurators, and analytics scripts that run synchronously. Defer non-critical scripts and break up long tasks using setTimeout or requestIdleCallback.
CLS — Cumulative Layout Shift (Target: Under 0.1)
CLS measures unexpected layout shifts as the page loads. On Shopify, the most common causes:
- Images without dimensions: Add explicit
widthandheightattributes to all<img>tags so the browser reserves space before the image loads - Late-loading fonts: Font swap causes text to reflow — use
font-display: optionalfor less critical fonts - Dynamically injected content: App banners, cookie notices, and promo bars that appear after page load push content down — reserve space for them in CSS
Expected Results from Speed Optimisation
| Metric | Before optimisation (typical) | After optimisation (typical) |
|---|---|---|
| Mobile PageSpeed score | 45–65 | 85–95 |
| LCP (mobile) | 4.5 – 7.0 seconds | 1.5 – 2.5 seconds |
| Page size (homepage) | 3.5 – 6.0 MB | 0.8 – 1.5 MB |
| HTTP requests | 80 – 140 | 35 – 60 |
| Conversion rate change | Baseline | +15 – 35% typical improvement |
Speed optimisation is one of the highest-ROI investments a Shopify store can make because it improves both conversions and Google rankings simultaneously.
Want us to audit and optimise your Shopify store speed? See our Shopify Speed Optimisation service →
