Fixing Page Speed on a Shopify Store

What you can and cannot change

Before spending time on a Shopify speed problem, it helps to be clear about which layer is responsible. Shopify's platform handles a lot, and some things are simply not editable on a standard plan.

So the useful question is not "how do I make Shopify faster", but "what have we added on top of Shopify that is slowing it down". The answer is almost always somewhere in the theme and app rows.

Measuring load speed on a Shopify store

Run the Page Speed Analyzer on four templates: the home page, a collection page, a product page and the cart or a content page. It measures each with real-user and lab data and names the requests, files and scripts holding the page back. For each template, write down:

• Server response time. How long the first byte of HTML takes. On Shopify this mainly reflects how much work your Liquid does when a page is not already cached.
• Total page weight and request count. These show how much the theme and apps ask the browser to download.
• The list of heaviest files and third-party requests. These become the raw material for the theme and app audits.

Testing without skewing the results

• Test in a private window. When you are logged in to the admin, Shopify can add a preview bar and extra scripts that visitors never see.
• Use a throttled mobile profile. Most shoppers browse on phones, and heavy stores feel very different on a mid-range device.
• Test the same URLs each time. A collection with a handful of products is not a fair comparison with one showing a full page of them.
• Take each test more than once. Lab results vary, so compare typical values rather than the single best run.

Shopify's admin also includes a web performance report under Analytics, based on real visits. It is useful for tracking the trend over time, but it does not tell you which file is responsible, so use it alongside the analyzer rather than instead of it.

Slow Liquid: when the delay is on the server

If the analyzer shows a slow server response on some templates but not others, the cause is usually the Liquid on those templates. Shopify caches rendered pages, but pages still need to be built when the cache is empty or has been cleared, for example after a product edit, and heavy Liquid makes those builds slow.

Profiling with Theme Inspector

Shopify publishes a Chrome extension called Shopify Theme Inspector. When you are logged in with access to the store, it records how long each part of the Liquid took to render and shows it as a flame graph. Wide bars are the slow parts, and each bar names the file and line, such as a snippet or section.

Patterns that make Liquid slow

• Loops inside loops. A mega menu that loops through every collection and then every product in each one can do a very large amount of work on every page.
• Looking up products one by one. Fetching products by handle inside a loop, or leaning on all_products, is slow and has built-in limits.
• Large collection pages. A high paginate count means more product cards, more images and more Liquid per page.
• Filtering in Liquid. Looping over a whole collection to find a few matching products, when a smaller collection or Shopify's own filtering would do.
• Legacy include tags. Older themes use include, which Shopify has deprecated in favour of render. Changing them is good housekeeping, though the speed gain varies.

A typical improvement is to limit how much a menu or section loops over:

{%- comment -%} Before: every product in every menu collection {%- endcomment -%}
{%- for link in linklists.main-menu.links -%}
  {%- for product in link.object.products -%}
    {%- render 'menu-product-card', product: product -%}
  {%- endfor -%}
{%- endfor -%}

{%- comment -%} After: four featured products per collection {%- endcomment -%}
{%- for link in linklists.main-menu.links -%}
  {%- for product in link.object.products limit: 4 -%}
    {%- render 'menu-product-card', product: product -%}
  {%- endfor -%}
{%- endfor -%}

Auditing theme weight

Themes gain weight gradually. A developer adds a slider library, a marketing agency adds a countdown timer, a seasonal banner brings its own stylesheet, and nobody takes anything out. The simplest way to see how much has been added is to compare your live theme with a clean copy of the same theme.

1. From the theme library, add a fresh copy of the same theme at the same version, and leave it unpublished.
2. Preview both themes on the same product URL in a private window, with the cache disabled.
3. In the Network panel, compare total transfer size, request count and the CSS and JavaScript files each one loads.

The difference is what your store has added. Some of it will be deliberate and worth keeping. Much of it usually is not.

Where the extra weight usually comes from

A script budget for every app

Apps are the most common reason one Shopify store is much slower than another built on the same theme. Each one can add scripts, stylesheets, fonts and images, and some load further files from their own servers. The fix is not necessarily fewer apps. It is knowing what each one costs and deciding whether that cost is worth it.

Measuring one app at a time

Chrome DevTools can block requests to a domain or a single URL. Open the Network panel, right-click one of an app's requests and choose to block its domain, then reload and test again. The difference in bytes, requests and load time is roughly what that app costs. Unblock it and repeat for the next app. This works without uninstalling anything and without affecting real visitors.

Setting the budget

Write a short table for each app with its purpose, the pages it needs to run on, the files it loads and an agreed limit. An illustrative table for a fictional store, Harbour Lane Candles, might look like this:

Many apps built on theme app extensions can be switched on or off per template or per block in the theme editor. Older apps may load everywhere; if so, ask the developer whether they can load only where needed, and treat the answer as part of your decision to keep the app.

The fix, step by step

Edge cases

• Paid theme updates. If you edit a paid theme's code, updating to a new version can bring back what you removed or overwrite your changes. Keep a list of edits, and consider putting custom code into separate snippets so it is easy to carry across.
• Apps that write to Liquid. Some older apps edit theme files directly during installation. Their code will not show up as an app embed, which is why searching the code in step 4 matters.
• Markets and translations. Stores with several markets or languages can have slower Liquid on some variants of a page, so test at least one URL in each main market.
• Headless storefronts. If your store uses Hydrogen or another custom front end, the theme advice here does not apply. Speed depends on the framework and hosting, and a framework guide such as the Next.js speed guide is closer to your situation.
• Checkout speed. Checkout runs on Shopify's own pages and is not affected by theme code in the same way. If shoppers complain about checkout, check payment and checkout apps and extensions rather than the theme.

Keeping the store fast

Shopify stores tend to slow down again through small, well-meant additions. A few habits keep the gains:

• Trial apps on a duplicate theme first. Measure what an app adds before it reaches customers, and compare it with the budget it would need.
• Remove what you uninstall. Whenever an app is removed, search the theme for its name the same day.
• Keep the change log. Note every script or section added to the theme, who asked for it and why.
• Retest after sales campaigns. Timers, banners and pop-ups are often added for a promotion and forgotten afterwards.

For the underlying causes that apply on any platform, the third-party scripts guide covers tag audits in more depth, and the render-blocking guide covers files that delay the first paint.