How to Speed Up Your Shopify Store

A slow Shopify store costs you money. Research consistently shows that every additional second of load time drops conversion rates by roughly 7%. If your store takes 5 seconds to load instead of 2, you're leaving a significant chunk of revenue on the table.

The good news: most Shopify speed problems are fixable without a developer. This guide covers the six areas that make the biggest difference.

Before you start, get a baseline. Run your store through PageDiag to get a full performance breakdown including Core Web Vitals, asset analysis, and actionable recommendations specific to ecommerce sites.

1. Image Optimisation

Images are almost always the biggest culprit. A typical Shopify product page loads 2-5 MB of images, and most of that is unnecessary.

What to do

Use WebP or AVIF formats. Shopify's CDN automatically serves WebP when you use the image_url filter in Liquid, but only if you let it:

{{ product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy' }}

This generates a responsive <img> tag with proper srcset attributes and lazy loading. If you're still using img_url, switch - image_url gives you far more control.

Set explicit dimensions. Every image should have width and height attributes to prevent layout shifts (CLS). The image_tag filter handles this automatically.

Audit hero images. Your homepage hero is often a 3000px wide PNG weighing 2 MB+. Resize it to 1600px wide maximum and compress it. Tools like Squoosh or TinyPNG work well. Aim for under 200 KB for hero images.

Lazy load everything below the fold. Only your hero image and above-the-fold product images should load eagerly. Everything else gets loading="lazy".

Quick wins

Remove zoom-quality images from collection pages (customers don't zoom on grid views)
Use Shopify's built-in image editor to crop rather than uploading oversized originals
Check for decorative images that could be CSS instead

2. App Audit

Every Shopify app injects JavaScript and sometimes CSS into your storefront. Most store owners install apps, try them, and forget to uninstall - but the scripts remain.

How to audit

Go to Settings → Apps and sales channels
For each app, ask: "Is this actively generating revenue or improving the customer experience?"
If the answer is no, uninstall it

Even apps you've "disabled" may still inject scripts. The only way to be sure is to uninstall completely and check your theme's theme.liquid for leftover script tags.

Common offenders

Review apps that load 200 KB+ of JavaScript on every page, not just product pages
Chat widgets that load entire frameworks (some add 500 KB+)
Analytics apps that duplicate what Google Analytics already provides
Social proof popups - test whether they actually improve conversions before keeping them

A good rule: if an app doesn't have a measurable impact on revenue, remove it.

3. Theme Performance

Your theme is the foundation. A bloated theme makes everything else harder.

Evaluate your theme

Shopify's free themes (Dawn, Sense, Craft) are built on the Online Store 2.0 architecture and are well-optimised. If you're running a third-party theme, check when it was last updated. Themes that haven't been updated since 2023 likely don't use modern performance patterns.

Key theme checks

Does it use <script defer> or <script async>? Check theme.liquid - scripts in the <head> without these attributes block rendering
Does it load unused CSS? Dawn loads under 30 KB of CSS. Many premium themes load 200 KB+
Does it use sections everywhere? Online Store 2.0 sections load independently, which is faster

Font optimisation

Custom fonts are a hidden performance killer. Each font weight/style is a separate file download:

<!-- Bad: loading 6 font files -->
{{ 'custom-font-light.woff2' | asset_url | preload_tag: as: 'font', type: 'font/woff2', crossorigin: 'anonymous' }}
{{ 'custom-font-regular.woff2' | asset_url | preload_tag: as: 'font', type: 'font/woff2', crossorigin: 'anonymous' }}
{{ 'custom-font-bold.woff2' | asset_url | preload_tag: as: 'font', type: 'font/woff2', crossorigin: 'anonymous' }}

Stick to two weights maximum (regular and bold). Better yet, use system fonts - they load instantly.

4. Liquid Rendering

Liquid is Shopify's templating language, and inefficient Liquid code slows down server response times.

Common problems

Nested loops. Looping through all products inside a loop through all collections is O(n²) and gets slow quickly:

{% comment %} Bad: nested loops {% endcomment %}
{% for collection in collections %}
  {% for product in collection.products %}
    {{ product.title }}
  {% endfor %}
{% endfor %}

{% comment %} Better: use a specific collection {% endcomment %}
{% for product in collections['featured'].products limit: 12 %}
  {{ product.title }}
{% endfor %}

Excessive where filters. Each filter processes the entire array. Chain them carefully and use limit wherever possible.

Unused sections. If a section is included in your template but hidden via CSS (display: none), it still renders server-side. Remove it from the template instead.

5. CDN and Caching

Shopify includes Cloudflare CDN by default, so your static assets are already cached globally. But there are ways to make better use of it.

Preconnect to third-party origins

If you load resources from external domains (Google Fonts, analytics, etc.), add preconnect hints:

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://www.googletagmanager.com">

Add these to the <head> in theme.liquid, before the resources that need them.

Preload critical assets

Your main stylesheet and hero image should be preloaded:

<link rel="preload" href="{{ 'theme.css' | asset_url }}" as="style">
<link rel="preload" href="{{ 'hero.webp' | asset_url }}" as="image">

6. Third-Party Scripts

Third-party scripts (analytics, marketing pixels, chat widgets) are the hardest to control because they often load additional scripts of their own.

Strategies

Load non-essential scripts on interaction. Chat widgets don't need to load until the user shows intent:

// Load chat widget only when user scrolls or clicks
let chatLoaded = false;
function loadChat() {
  if (chatLoaded) return;
  chatLoaded = true;
  const script = document.createElement('script');
  script.src = 'https://chat-provider.com/widget.js';
  document.body.appendChild(script);
}
window.addEventListener('scroll', loadChat, { once: true });
document.addEventListener('click', loadChat, { once: true });

Use Google Tag Manager wisely. GTM itself is lightweight, but what you put inside it matters. Audit your tags regularly and use trigger conditions to avoid loading everything on every page.

Move tracking pixels to server-side where possible. Shopify supports server-side tracking for Facebook CAPI and Google Ads. This removes the client-side script entirely.

Measure Your Progress

After making changes, measure again. Run your store through PageDiag to see the impact. PageDiag gives you ecommerce-specific insights that generic speed tests miss, including how your performance affects your AI Shopping Score and LLM visibility - increasingly important as AI-powered shopping assistants become mainstream.

Focus on these targets:

Largest Contentful Paint (LCP): Under 2.5 seconds
Cumulative Layout Shift (CLS): Under 0.1
First Contentful Paint (FCP): Under 1.8 seconds

Speed optimisation isn't a one-time task. Apps get updated, new features get added, and performance can regress. Schedule a monthly scan to catch issues before they cost you sales.