How to Speed Up a Shopify Store: A Practical Optimization Guide

Shopify takes care of servers, caching and the global CDN. That removes a whole class of performance problems, but it also means the things you can change are concentrated in three places: the theme, the apps, and the content you upload. On most slow stores, one or two of those are responsible for nearly all of the delay.

This guide walks through Shopify speed optimization in the order that usually pays off: measure, remove app weight, fix images, then tune the theme.

Step 1: Measure the right thing

Use field data, not a single score

The Shopify admin includes a Web performance report based on real visitor data for Largest Contentful Paint, Interaction to Next Paint and Cumulative Layout Shift. That is the same family of metrics Google uses, and it is far more useful than a single lab score.

Cross-check it with:

• PageSpeed Insights for your homepage, a collection page and a product page. The field section at the top shows Chrome user data when your store has enough traffic.
• Search Console's Core Web Vitals report, which groups URLs by similar templates and shows which groups fail.

The three thresholds to aim for at the 75th percentile:

If you are new to these metrics, the Core Web Vitals developer guide explains each one, and INP vs FID covers why responsiveness is now measured differently.

Test by template

A Shopify store has a handful of templates: home, collection, product, cart, blog article and pages. Each one is usually fast or slow as a whole. Pick one representative URL per template and test those, not twenty random products.

Record a baseline trace

In Chrome DevTools, open the Performance panel, enable mobile CPU and network throttling, and record a page load. Note the LCP element, long tasks on the main thread, and which third-party domains load before LCP. You will compare against this after each change.

Step 2: Audit your apps

Apps are the most common reason a Shopify store is slow. Each one can add JavaScript, CSS, fonts and network requests to every page, and many load on pages where they are not used.

List what each app loads

In DevTools, open the Network panel, reload, and group requests by domain. For each third-party domain, note which app it belongs to, how much it transfers, and whether it loads before or after LCP. Then check the Coverage panel to see how much of each script actually runs.

Ask three questions per app:

1. Is it still used? Trials that were never cancelled and features that were replaced are common.
2. Does it need to load on every page? A size chart only matters on product pages. A store locator only matters on one page.
3. Is there a lighter alternative? Many themes now include features that used to need apps: product reviews display blocks, announcement bars, quick add, recommendations.

Clean up after uninstalled apps

Older apps often inserted code directly into theme files. Uninstalling the app removes its billing and admin, but not necessarily the snippets it added. Search your theme code for the app's name or domain and remove leftover script tags, render calls and snippet files.

Modern apps should use theme app extensions (app blocks and app embeds). These can be switched off in the theme editor under App embeds, and they are removed cleanly when the app is uninstalled. Prefer apps that use them.

Move tracking to Customer Events

Marketing pixels are a major source of main-thread work, and they hurt INP. Shopify's Customer Events lets you add tracking pixels that run in a sandbox, isolated from the main page, instead of pasting tags into theme.liquid. Where your ad and analytics platforms support it, migrate to their Shopify app integrations or custom pixels in Customer Events and remove the hardcoded tags.

Step 3: Fix images

Shopify's CDN resizes images on request and serves modern formats such as WebP to browsers that support them. You still have to ask for the right size, and you still have to treat the hero image differently from everything else.

Request the rendered size with image_url and image_tag

Use the image_url filter with a width, and let image_tag generate a responsive srcset:

{{ product.featured_image
  | image_url: width: 1600
  | image_tag:
    widths: '400, 600, 800, 1000, 1200, 1600',
    sizes: '(min-width: 990px) 50vw, 100vw',
    loading: 'lazy',
    alt: product.featured_image.alt
}}

image_tag also outputs width and height attributes from the image's dimensions, which prevents layout shift. See understanding Cumulative Layout Shift for why that matters.

Do not lazy-load the hero

The first large image on the page is almost always the LCP element. It should load eagerly with high priority. Online Store 2.0 themes can use section.index to treat the first section differently from the rest:

{%- liquid
  if section.index == 1
    assign loading = 'eager'
    assign priority = 'high'
    assign preload = true
  else
    assign loading = 'lazy'
    assign priority = 'auto'
    assign preload = false
  endif
-%}

{{ section.settings.image
  | image_url: width: 2000
  | image_tag:
    widths: '600, 900, 1200, 1600, 2000',
    sizes: '100vw',
    loading: loading,
    fetchpriority: priority,
    preload: preload
}}

This treats only the first section on the page as the hero. Use preload: true only for the LCP image. It adds a preload hint so the browser fetches the image before it reaches the tag. Preloading several images makes them compete for bandwidth and cancels the benefit. Our LCP playbook explains how to confirm which element is the LCP.

Simplify the hero

Rotating carousels with five full-width slides, and autoplaying background media, are common LCP problems on Shopify homepages. A single static hero image, sized correctly, almost always beats them. If merchandising needs several messages, put the extras below the fold.

Upload sensible originals

Shopify resizes on the fly, but very large originals still slow down processing and the admin. Uploading images around 2000 to 2500 pixels on the long edge is enough for nearly every theme layout.

Step 4: Tune the theme

Start from a fast theme

Shopify's Dawn and other recent Online Store 2.0 themes are built with performance in mind: minimal JavaScript, native lazy loading and responsive images. If your store runs a heavily customized older theme, the most effective speed project may be migrating to a modern theme rather than patching the old one.

Defer JavaScript

Any script tag in theme.liquid without defer or async blocks rendering. Add defer to theme scripts that are not needed for the first paint:

<script src="{{ 'global.js' | asset_url }}" defer></script>

Leave content_for_header in place. Shopify uses it to load platform and app scripts, and removing it breaks the store.

Shopify's Theme Check linter, built into the Shopify CLI and the VS Code extension, flags parser-blocking scripts and other common performance problems in theme code. Run it before every theme deploy.

Load fonts efficiently

Each font family and weight is another download, and custom fonts can delay text rendering. Use one or two families, limit weights, and use font-display: swap so text appears immediately in a fallback font. Theme fonts from Shopify's library support this through the font_face filter:

{% style %}
  {{ settings.type_body_font | font_face: font_display: 'swap' }}
  {{ settings.type_header_font | font_face: font_display: 'swap' }}
{% endstyle %}

Preload only the font used above the fold, and only one or two files. If your brand allows it, a system font stack for body text removes font loading altogether.

Keep Liquid efficient

Server response time on Shopify depends partly on how much work your Liquid does. Slow patterns include nested loops over large collections, rendering many product cards with heavy snippets, and repeated lookups inside loops. The Shopify Theme Inspector for Chrome extension profiles Liquid rendering and shows which templates and snippets take the most time.

Practical fixes:

• Paginate collections rather than looping over every product.
• Limit the number of products in homepage sections and recommendation blocks.
• Move rarely used content (long size guides, full reviews) behind a click, or load it after the page is interactive.

Reduce layout shift

Common Shopify CLS sources are announcement bars injected by apps after load, review stars that push content down, and images without dimensions. Reserve space for anything that loads late with a fixed min-height, and prefer app blocks placed in the theme editor over scripts that insert elements at runtime.

Common Shopify speed problems and fixes

Step 5: Keep the store fast

Shopify stores rarely get slow all at once. They get slow one app install, one campaign banner and one theme customization at a time. Build a few habits:

• Test every new app on a duplicate theme and compare traces before publishing.
• Review installed apps and app embeds each quarter.
• Re-check the Web performance report after every theme update.
• Watch field data for each template, not just the homepage.

AI Monitoring checks your key templates daily and alerts you when LCP, INP or CLS regress, so you can tie a slowdown to the change that caused it. If you would rather start with a full review of where your store stands, our audits are fixed-price; see pricing.

Summary

• Shopify handles hosting and the CDN; your theme, apps and images decide your speed.
• Measure by template with field data from the Web performance report, PageSpeed Insights and Search Console.
• Audit apps first: remove unused ones, clean leftover snippets and move tracking pixels to Customer Events.
• Use image_tag for responsive images with dimensions, and load the hero eagerly with high priority.
• Defer theme scripts, limit fonts, profile Liquid, and test every change on a duplicate theme.