Shopify Theme Performance Tips

Performance is more than PageSpeed scores

Fast themes limit server-side Liquid work, load assets intentionally, and account for apps that inject scripts at runtime. A practical implementation usually needs a staging duplicate with the same apps enabled—not localhost alone.

Liquid rendering budget

• Avoid triple-nested loops over products, variants, and metafields
• Use limit: on homepage collection rows
• Paginate collection and blog templates—50-item cap is silent
• Split heavy cross-sell sections from decorative bands on product.json

Images and assets

Hero LCP images should be eager-loaded and correctly sized. Below-fold grids use lazy loading. Details: Image Optimization Guide.

JavaScript discipline

{% if template.name == 'product' and section.settings.enable_zoom %}
  <script src="{{ 'product-zoom.js' | asset_url }}" defer></script>
{% endif %}

Load slider and zoom libraries per template and setting—not globally in theme.liquid unless truly universal. Never duplicate <script> tags inside block loops.

App impact

Review widgets, popups, and tracking pixels added after theme launch inflate JavaScript on production. Test Lighthouse on staging with apps enabled before sign-off.

Section Rendering API

For cart drawers and quick views, fetch one section's HTML via Shopify's Section Rendering API instead of full page HTML.

Pre-launch checklist

1. Mobile Lighthouse on staging with apps on
2. Section count sane on product and collection JSON templates
3. No deprecated img_url in changed files
4. Preconnect to cdn.shopify.com in theme.liquid

Takeaway

Treat Liquid loops, image markup, and script loading as a performance budget. Patterns: Cheat Sheet performance category.

Performance is a section architecture problem

Adding twenty heavy sections to product.json hurts mobile scores more than micro-optimizing one filter. Split decorative bands from data-heavy cross-sell modules. Defer below-fold video until interaction. Count sections on critical templates before blaming the parent theme.

Liquid render limits in practice

Triple-nested loops over products, variants, and metafields timeout on large catalogs. Flatten logic—precompute in snippets, limit iterations, paginate collection templates. If a section needs hundreds of iterations, question whether it belongs on the storefront template at all.

App and script discipline

{% if template.name == 'product' and section.settings.enable_zoom %}
  <script src="{{ 'product-zoom.js' | asset_url }}" defer></script>
{% endif %}

Load assets conditionally per template and setting—not globally in theme.liquid unless truly universal.

Pre-launch checklist

• Lighthouse mobile on staging with apps enabled
• Hero LCP image eager-loaded, sized correctly
• Section count sane on product and collection JSON
• No duplicate slider scripts inside block loops

Agency gate: performance checklist before launch.