Performance

Where a Shopify store loses its speed

· Luke Tran · 2 min read

A slow store rarely has one big problem. It has a dozen small ones that add up: a script for every app, a hero image that waits its turn, fonts that hold the text back. Here is where to look first.

Measure what shoppers feel

Google’s Core Web Vitals measure three things a shopper notices: how soon the main content appears (Largest Contentful Paint), how quickly the page answers a tap (Interaction to Next Paint) and how much it jumps while it loads (Cumulative Layout Shift).

Field data from real visitors, which PageSpeed Insights shows when your store has enough traffic, tells you how the store performs. A lab test such as Lighthouse tells you why. Test the pages that sell, not only the homepage: a product page and a collection page.

1. Apps that load on every page

Most apps add JavaScript and CSS to the storefront. One is fine; ten that load on every page are not. Check what each app adds and whether it needs to run on that page at all.

Apps built on theme app extensions can be switched off in the theme editor, and their code leaves with the app. Older apps sometimes edited theme files directly, and that code can stay behind after you uninstall them, so look for leftover snippets.

2. The hero image

The largest image at the top of the page is usually what Largest Contentful Paint measures. Do not lazy-load it, give it a width and height so the browser can save its space, and serve it at the size the screen needs. Shopify’s image_url and image_tag Liquid filters can produce the responsive sizes for you:

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

3. Third-party tags

Chat widgets, review carousels, analytics and ad pixels each fetch code from another server. Load what you can after the page is ready to use, and remove what nobody looks at any more.

4. Fonts

Every weight and style of a font is a separate file. Two weights of one family usually cover a store. Serve them from your own store and let text show in a fallback font while they load.

5. Theme code

Liquid that loops over every product in a collection, or every variant of every product, makes each page slower to build. So do sections that render content nobody sees. A review of the theme’s templates finds these.

Fix in this order

  • Remove the apps and the leftover code you do not use.
  • Make the hero image fast.
  • Load third-party scripts later, or not at all.
  • Trim the fonts.
  • Profile the theme.

Measure again after each step, so you know which change helped. If you would like a second pair of eyes, our tech support covers speed work on stores we did not build.

Keep reading

All insights

Is your store slower than it should be?

Send us a link and what feels slow.