Seven things I check first when a Shopify theme is slow

At TruTech I launched more than 30 Shopify storefronts, and a recurring job was lifting average Lighthouse performance scores from the 60s into the 90s. At Pepkor, performance mattered for a different reason: two national retail stores with millions of monthly visitors, where slow pages are paid for in lost sales.

The same short list of problems explains most slow Shopify themes. This is the order I check them in.

1. Third-party apps and scripts

Start here, because it is usually the biggest win and nobody wants to hear it.

Every installed app can add JavaScript, CSS and network requests to every page, including pages where the app does nothing. Open the browser's network panel on a product page and sort by size and by third-party domain. Ask of each one: is this earning its weight?

Apps that were uninstalled but left code behind in the theme are common, too. Search the theme for leftover snippets and script tags.

2. The largest image above the fold

The Largest Contentful Paint element is very often a hero or product image. Two mistakes show up constantly:

• It is lazy-loaded, which tells the browser to delay the one image that matters most.
• It is served far larger than it displays.

For the main image, load it eagerly and give it high priority:

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

Everything below the fold can stay lazy.

3. Responsive image sizes everywhere else

image_url with an explicit width, plus image_tag with widths and sizes, lets the browser pick an appropriately sized file. A product grid that downloads full-resolution images for 200-pixel thumbnails is wasting most of its bytes.

4. Render-blocking CSS and JavaScript

Check what loads in the head. Scripts that don't need to run before first paint should use defer. Large stylesheets that only apply to one template shouldn't load on all of them. In Online Store 2.0 themes, scoping assets to the section that needs them keeps pages light.

5. Fonts

Custom fonts can delay text rendering. Shopify's font_face filter can emit the right declaration with font-display: swap, so text shows immediately in a fallback and swaps when the font arrives:

{{ settings.type_body_font | font_face: font_display: 'swap' }}

Also question how many families and weights are loaded. Two weights of one family beat five weights of three.

6. Liquid that does too much

Slow server-side rendering is less common than slow front ends, but it happens. Watch for deeply nested loops over large collections, repeated work inside loops, and sections that render far more than they display. Keep loops bounded and push heavy lifting into pagination.

7. Everything else

Only then do the small things matter: preconnecting to critical third-party origins, trimming unused sections and assets, tidying redirects. They help, but they don't rescue a page still dragging three heavy apps.

Measure, change one thing, measure again

Two habits matter more than any individual trick:

1. Test on a throttled mobile profile. A fast laptop on office Wi-Fi hides problems your customers have.
2. Change one thing at a time. If you change five things and the score moves, you've learned nothing about which one worked.

I also work on a duplicate, unpublished theme so the live store is never the test bench, and I re-check the key flows (navigation, product page, add to cart) after each change. A fast store that can't take payments isn't a win.

If your store needs this kind of audit, or you are building a team that does, let's talk.