How to Speed Up a Shopify Theme
A practical, no-fluff checklist for making a Shopify store load faster — from images and apps to Liquid and theme code — with better Core Web Vitals as the goal.
A slow Shopify store quietly costs you sales. Shoppers leave before the page even finishes loading, and Google factors speed into rankings through Core Web Vitals. The good news: most Shopify speed problems come from a handful of predictable places. Here's the checklist I work through on every store.
1. Start with a measurement, not a guess
Before changing anything, get a baseline. Run your store through:
- Google PageSpeed Insights — shows both lab data and real-world Core Web Vitals.
- Shopify's built-in speed report (Online Store → Themes) — a rough score, but useful for tracking direction.
Write down your Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) and Interaction to Next Paint (INP). These three are what you're actually trying to improve — not a single vanity number.
2. Fix your images (this is usually 60% of the win)
Images are the single biggest payload on most stores.
- Use Shopify's image URL parameters (or the
image_urlfilter) to serve appropriately sized images — never a 2000px hero on a 400px mobile screen. - Serve modern formats. Shopify automatically serves WebP where supported, so upload high-quality sources and let it convert.
- Add
widthandheight(or an aspect-ratio wrapper) to every image so the browser reserves space — this directly kills layout shift (CLS). - Lazy-load below-the-fold images with
loading="lazy", but let your LCP hero image load eagerly (fetchpriority="high").
3. Audit your apps ruthlessly
Every app you install can inject CSS and JavaScript into every page — whether you use it on that page or not.
- Open your theme and search the
<head>and layout for leftover script tags from apps you've uninstalled. Removing an app doesn't always remove its code. - Ask of each app: does this earn its weight? A review widget, a currency converter and three marketing pixels add up fast.
- Where possible, load third-party scripts with
deferorasync, and delay non-critical ones until user interaction.
4. Trim render-blocking CSS and JS
- Move non-critical JavaScript to the end and defer it. Nothing above the fold should wait on analytics.
- Avoid loading multiple font families and weights you don't use. Preload the one or two fonts that appear in your LCP element and set
font-display: swap. - Remove unused CSS from older theme customisations.
5. Clean up your Liquid
Theme code matters more than people expect.
- Avoid expensive loops in Liquid — for example, looping over all products or all variants on a page that doesn't need them.
- Use
{% render %}instead of the deprecated{% include %}for snippets; it's faster and scoped. - Paginate collections instead of rendering hundreds of products at once.
6. Reduce layout shift (CLS)
CLS is often the easiest win once images are sized:
- Reserve space for banners, announcement bars and embedded content.
- Avoid injecting content above existing content after load (a classic cause of shift from apps).
- Load web fonts with
font-display: swapand a well-matched fallback so text doesn't jump.
7. Re-measure and iterate
Make one category of change at a time, then re-run PageSpeed Insights. Speed work is iterative — you're chasing steady gains across LCP, CLS and INP, not a perfect score in one pass.
The short version
Size and lazy-load your images, remove app bloat, defer non-critical scripts, keep your Liquid lean, and reserve space to prevent layout shift. Do those five things and most Shopify stores get meaningfully faster.
If your store is slow and you'd rather have it handled, performance optimisation is one of the services I offer — get in touch and I'll take a look.