Shopify speed: the theme changes that do most of the work

When a store feels slow, the first instinct is usually to install a speed app. Sometimes that helps. More often it adds one more script to a page that already has too many. In the stores we build and support, the biggest gains almost always come from a handful of theme-level changes, not from another layer on top.

Here's the order we work in.

1. Measure the right thing

Lab scores are useful for debugging, but they aren't what your customers experience. Start with field data: the Core Web Vitals assessment at the top of PageSpeed Insights, and the web performance report in your Shopify admin. Look at mobile first, and check your four money templates separately: home, collection, product and cart. A fast homepage with a slow product page is still a slow store.

2. Audit what your apps load

Every app that adds something to your storefront adds code to load it. Go through your app embeds in the theme editor and switch off anything you don't actively use. Then search your theme files for snippets left behind by apps you've already uninstalled. Removing an app from the admin doesn't always remove what it added to theme.liquid, and those orphaned scripts keep running on every page.

For tools that don't need to be there on first paint, like chat widgets and some review carousels, load them on interaction or after the page is idle instead of up front.

Most slow Shopify stores aren't slow because of Shopify. They're slow because of what's been added on top.

3. Fix the hero image

On most storefronts the largest contentful paint is the hero image, so it deserves special treatment. Serve it with responsive widths using image_url and image_tag so phones don't download a desktop-sized file. Never lazy-load it: mark it loading: 'eager' and fetchpriority: 'high'. And think twice about a slideshow in that position. Sliders delay the first meaningful image and rarely earn their place.

4. Ship less JavaScript

Older themes often bring jQuery and a pile of plugins with them. Modern Online Store 2.0 themes don't need either. Defer non-critical scripts, load a section's JavaScript only when that section is on the page, and lean on the browser for things it now does natively, like <details> for accordions and CSS for simple animation.

5. Be strict with fonts

Each font weight is another file. Pick two or three weights and stick to them, use font-display: swap so text shows immediately, and prefer Shopify's own font library or a system stack where the brand allows it. If you load fonts from a third party, preconnect to it.

6. Stop the page jumping

Layout shift is the one customers notice most: they go to tap a button and it moves. Give every image a width and height, reserve space for announcement bars and review widgets that load late, and avoid injecting banners above content after the page has rendered.

7. Keep it fast

Speed decays. Every new app, campaign section and tracking pixel chips away at it. Agree on a simple performance budget for each template, re-check after every app install, and put a monthly look at the field data on the calendar. It takes minutes, and it's much cheaper than another rescue project in a year.

Where to start

If you only do two things this month: remove the scripts from apps you no longer use, and make sure your hero image is sized properly and never lazy-loaded. Then measure again on mobile, on your product template, before you spend anything on a speed app.