Shopify theme performance checklist for developers

The speed audit is what you do to a store that's already slow. This is the list you work through while building, so it never gets there. Every item maps to a Core Web Vital, because that's what Google measures and what correlates with conversion.

Images — mostly LCP and CLS

• Use Shopify's image filters, not fixed URLs. image_url: width: 800 and image_tag generate correctly sized, modern-format images with srcset for free.
• Size for the container, not the original. A 4000px hero shrunk in CSS downloads all four thousand pixels.
• Explicit width and height on every image. This is the single cheapest CLS fix and it's still missing from most themes.
• loading="eager" and fetchpriority="high" on the LCP image — usually the hero or the first product image. Everything below the fold gets loading="lazy".
• Never lazy-load the LCP image. It's the most common self-inflicted LCP regression.
• Preload the hero image when it's the LCP element.

Fonts — LCP and CLS

• Prefer Shopify's font picker. It serves fonts from the same CDN with no extra connection.
• If you use a third-party font, preconnect and preload it, and limit yourself to the weights you actually use. Four weights of two families is eight files nobody needs.
• font-display: swap so text renders immediately rather than waiting.
• Match the fallback's metrics to the web font so the swap doesn't shift the layout.

CSS — LCP and INP

• Inline the critical CSS for above-the-fold content; defer the rest.
• Split per-template CSS rather than shipping one monolithic file to every page. The product page shouldn't download the blog's styles.
• No CSS frameworks you use 5% of. The unused 95% still downloads and still parses.
• Delete dead CSS when you remove a section. It never happens by itself.

JavaScript — INP and LCP

• Default to no JavaScript. Most theme interactions — accordions, tabs, dialogs — have native HTML elements now.
• defer everything that isn't required for first paint.
• No jQuery. No framework for a carousel.
• Load on interaction where possible: the search modal's JavaScript can wait until someone opens search.
• Bound your event handlers. Long tasks on the main thread are what INP measures, and a scroll handler doing layout work is the classic offender.

Liquid — server response time

Server response happens before anything else, so it caps every other metric.

• Bound every loop with limit. Unbounded loops over collections are the top cause of slow Shopify templates.
• No nested loops over products and their variants. If you need this, the data model is wrong — usually the answer is metafields.
• Assign expensive lookups once, outside the loop.
• Use render, not include. Isolated scope is faster and more predictable — see Liquid basics.
• Run shopify theme check in CI; it catches several of these automatically.

Third parties — INP and LCP

• Every third-party script is a decision. Analytics, chat, reviews, pixels — each costs a connection and main-thread time.
• Load chat widgets on interaction, not on page load. A widget adding 400ms to every page for a feature 2% of visitors use is a bad trade.
• In checkout, use Web Pixels rather than script tags — see checkout extensibility.
• Audit app blocks before launch. App accumulation is the number one cause of stores getting slower over time, and theme app extensions at least make it visible.

Accessibility is on the same list

Every item above is a property of how the theme is built rather than a phase at the end — and so is accessibility. Both get designed in or retrofitted expensively.

Measure, don't assume

• Baseline the key templates — home, collection, product — on a throttled mobile profile before you start.
• Test the heaviest real page, not the demo one. The collection with 200 products and the product with 40 variants.
• Lab data for iteration, field data for truth. Real-user metrics are what Google ranks on and they take weeks to reflect a change.
• Re-measure after launch, once real traffic and real apps are on the store.

Every item on this list costs minutes during the build and hours to retrofit. That asymmetry is the whole argument for treating performance as part of the brief rather than a phase at the end.