Page speed is not a vanity metric. It is a revenue metric. Every 100 milliseconds of additional load time costs you conversions, and the compound effect across thousands of sessions adds up to real money. A Shopify store that loads in 2 seconds converts at a measurably higher rate than one that loads in 4 seconds, and the gap widens on mobile where most of your traffic likely comes from.
Yet most Shopify stores are needlessly slow. The culprits are predictable: too many apps, unoptimised images, bloated themes, excessive fonts, and a pile of third-party scripts that nobody audits. The good news is that most of these problems are fixable without a complete rebuild, and the performance gains are immediate.
This guide is structured from highest-impact to lowest-impact interventions. Start at the top, work down, and measure after each change. You will likely see the biggest improvements from the first three sections alone. For the full QA perspective, read our guide on how we QA test Shopify stores.
Why speed matters for ecommerce
The relationship between page speed and revenue is well-documented:
- Conversion rate: Each additional second of load time reduces conversion by 7-12%
- Bounce rate: Pages that load in 5 seconds have a 38% bounce rate vs. 9% for 2-second loads
- SEO ranking: Google uses Core Web Vitals as a ranking signal — slow stores get less organic traffic
- Ad spend efficiency: Slow landing pages reduce Quality Score in Google Ads, increasing your cost per click
- Customer perception: 79% of shoppers say they would not return to a slow website
For a store doing £500,000 annually, a one-second improvement in load time could add £35,000-£60,000 in revenue. That makes performance optimisation one of the highest-ROI investments you can make.
How to measure Shopify performance
Before optimising, establish baselines. Use these tools to measure your current performance:
Google PageSpeed Insights
The primary tool. Run it against your homepage, a product page, and a collection page. Note both the lab data (synthetic tests) and field data (real user metrics from the Chrome User Experience Report).
Shopify's built-in speed score
Found under Online Store > Themes. Shopify's speed score uses Lighthouse data and compares your store against similar Shopify stores. It is useful for tracking trends over time but should not be your primary metric.
Google Search Console
The Core Web Vitals report shows how your pages perform for real users. This is the data Google uses for ranking, making it the most important performance data for SEO purposes.
WebPageTest
The most detailed tool. Run tests from UK servers on a 3G connection to simulate real-world mobile conditions. The waterfall view shows exactly what is loading and in what order.
/* Performance benchmarks for Shopify stores:
Metric Good Needs Work Poor
─────────────────────────────────────────────────
LCP (Largest <2.5s 2.5-4.0s >4.0s
Contentful Paint)
INP (Interaction <200ms 200-500ms >500ms
to Next Paint)
CLS (Cumulative <0.1 0.1-0.25 >0.25
Layout Shift)
PageSpeed Score 70+ 50-69 <50
(Mobile)
*/
Core Web Vitals explained
Core Web Vitals are Google's three key metrics for measuring real-world user experience. Understanding what each one measures helps you target the right optimisations.
LCP (Largest Contentful Paint)
Measures how quickly the main content loads. On a product page, this is typically the hero product image. Target: under 2.5 seconds.
How to improve LCP: Optimise your hero image (size, format, lazy loading disabled), preload critical resources, reduce server response time (Shopify handles this), minimise render-blocking CSS and JavaScript.
INP (Interaction to Next Paint)
Measures responsiveness to user interactions (clicks, taps, key presses). If clicking "Add to cart" has a noticeable delay before anything visually changes, your INP is poor. Target: under 200ms.
How to improve INP: Reduce JavaScript execution time, defer non-critical scripts, avoid long main-thread tasks, minimise DOM size.
CLS (Cumulative Layout Shift)
Measures visual stability. If elements on the page shift position while loading (images popping in, banners appearing, fonts swapping), that is layout shift. Target: under 0.1.
How to improve CLS: Set explicit width and height attributes on all images and embeds, preload fonts with font-display: swap, reserve space for dynamically injected content (app widgets, pop-ups).
Image optimisation
Images are the single largest contributor to page weight on most Shopify stores. A typical product page with 6-8 images can easily exceed 5MB if images are not optimised. This section alone will likely deliver the biggest performance improvement for your store.
Before uploading
- Resize to maximum 2048px on the longest side. Shopify will serve smaller versions via srcset, but the source image determines the maximum quality.
- Use JPEG for photographs (85-90% quality is the sweet spot between file size and visual quality)
- Use PNG only for transparency (logos, icons with transparent backgrounds)
- Compress before uploading using TinyPNG, Squoosh, or ImageOptim
In your theme
{% comment %} Use Shopify's image_url filter for responsive images {% endcomment %}
<img
src="{{ product.featured_image | image_url: width: 800 }}"
srcset="
{{ product.featured_image | image_url: width: 400 }} 400w,
{{ product.featured_image | image_url: width: 600 }} 600w,
{{ product.featured_image | image_url: width: 800 }} 800w,
{{ product.featured_image | image_url: width: 1200 }} 1200w
"
sizes="(max-width: 749px) 100vw, 50vw"
width="{{ product.featured_image.width }}"
height="{{ product.featured_image.height }}"
alt="{{ product.featured_image.alt | escape }}"
loading="lazy"
>Critical: the hero image (your LCP element) should NOT use loading="lazy". Use loading="eager" or remove the attribute entirely. Lazy loading your LCP image delays the largest paint event and hurts your score.
App audit and cleanup
Apps are the most common cause of Shopify store slowdowns. Each app that adds storefront functionality injects JavaScript and CSS into your pages. The cumulative effect can be devastating — we have seen stores with 30+ apps where app scripts account for over 70% of total page weight.
How to audit your apps
- Go to Settings > Apps and sales channels
- Review every installed app
- For each app, ask: "Is this app actively contributing to revenue or operations?"
- Uninstall any app that is not essential
- Critical: After uninstalling, check your theme code for leftover app code. Many apps leave behind Liquid snippets, CSS, and JavaScript even after uninstallation.
For a detailed methodology, read our guide to auditing your Shopify app stack.
App performance impact assessment
/* How to measure individual app impact:
1. Open Chrome DevTools > Network tab
2. Filter by JavaScript
3. Look for scripts from app domains
4. Note the file sizes and load times
Common heavy offenders:
- Live chat widgets: 200-500KB
- Review platforms: 150-400KB
- Upsell/cross-sell: 100-300KB
- Pop-up builders: 100-250KB
- Analytics/tracking: 50-200KB per script
*/Font optimisation
Custom fonts are a common performance problem. Each font weight and style is a separate file (typically 20-100KB each). A store loading 4 weights of 2 fonts is downloading 8 font files before the text can render properly.
Best practices
- Limit to 2 font families maximum
- Use only the weights you actually need (typically 400 and 700)
- Use
font-display: swapto prevent invisible text during font loading - Preload your primary font to prevent layout shift
- Consider using system fonts for body text — they load instantly
<!-- Preload critical fonts in your theme.liquid head -->
<link rel="preload"
href="{{ 'your-font-regular.woff2' | asset_url }}"
as="font"
type="font/woff2"
crossorigin>Theme performance
Your theme's code quality has a significant impact on performance. Some themes are built for speed, others are built for features at the expense of performance.
Signs your theme is the problem
- Large CSS and JavaScript bundle sizes (check in DevTools > Network)
- Excessive DOM elements (more than 1,500 nodes on a page)
- Render-blocking resources in the head
- Unused CSS and JavaScript loading on every page
Theme-level optimisations
- Defer non-critical JavaScript with
deferorasyncattributes - Use Shopify's section rendering API for dynamic content loading
- Minimise CSS by removing unused styles
- Use native Shopify features instead of JavaScript-heavy alternatives
Lazy loading and above-the-fold
Lazy loading defers the loading of off-screen content until the user scrolls to it. This is one of the most effective techniques for improving initial page load speed.
What to lazy load
- All images below the fold
- Embedded videos and iframes
- Third-party widgets (chat, reviews) that appear lower on the page
What NOT to lazy load
- The hero image (your LCP element)
- Above-the-fold product images
- Navigation elements
- Any content visible without scrolling
Third-party script management
Third-party scripts — analytics, marketing pixels, chat widgets, social proof tools — collectively add hundreds of kilobytes to your pages. Managing these scripts is essential for maintaining performance.
Script loading strategies
/* Priority 1: Load immediately (essential for page function) */
/* Shopify's own scripts, critical CSS */
/* Priority 2: Load after page is interactive */
/* Analytics (GA4, server-side preferred) */
/* Payment providers */
/* Priority 3: Load on user interaction */
/* Chat widgets: load on scroll or after 5 seconds */
/* Social proof: load on scroll */
/* Review widgets: load when section is visible */
/* Priority 4: Load on specific pages only */
/* Product review widget: product pages only */
/* Size guide tools: product pages only */
/* Checkout scripts: checkout only */Liquid code optimisation
Shopify's Liquid templating language is executed on the server. Inefficient Liquid code increases server response time (TTFB) and can slow down every page on your store.
Common Liquid performance issues
{% comment %} BAD: Nested loops with all_products {% endcomment %}
{% for product in collections['featured'].products %}
{% for tag in product.tags %}
{% if tag == 'sale' %}
{{ product.title }}
{% endif %}
{% endfor %}
{% endfor %}
{% comment %} GOOD: Use the where filter {% endcomment %}
{% assign sale_products = collections['featured'].products
| where: 'tags', 'sale' %}
{% for product in sale_products %}
{{ product.title }}
{% endfor %}For deeper technical SEO and performance work, see our technical SEO complete guide.
Ongoing performance monitoring
Performance is not a one-time project. Every app update, theme change, and content addition can affect speed. Set up ongoing monitoring:
- Weekly PageSpeed checks on key pages
- Monthly Core Web Vitals review in Search Console
- Pre/post-change testing when installing apps or modifying themes
- Set performance budgets: maximum page weight, maximum JavaScript size, target LCP
Speed is not a technical concern — it is a commercial one. Every millisecond you shave off load time converts to revenue. The fastest Shopify stores are not just technically superior; they are commercially superior.
Andrew Simpson, Founder
Speeding up your Shopify store does not require a complete rebuild. Start with image optimisation and an app audit — these two actions alone will produce measurable improvement for most stores. Then work through font optimisation, theme code cleanup, and third-party script management for compounding gains.
If your store needs professional performance optimisation as part of a broader Shopify development and SEO strategy, get in touch. We routinely improve Shopify PageSpeed scores by 20-40 points through systematic optimisation.
