Shopify Liquid Performance: 8 Fixes for a Faster Theme

Shopify Liquid performance decides how fast your storefront feels. A slow theme hurts conversions and rankings. This guide covers eight fixes you can ship today, ordered by impact.

Measure Shopify Liquid performance first

Do not guess. First, run Lighthouse on a product page and a collection page. Then check real user data in Google Search Console under Core Web Vitals. Finally, use the Shopify Theme Inspector for Chrome to see which Liquid snippets render slowly.

Focus on Largest Contentful Paint first. It usually points to a hero image or a heavy script. Learn more in Google’s guide to LCP.

Speed up images for better Shopify Liquid performance

Fix 1: serve responsive images. Images cause most slow pages. Use the image_tag filter with widths and sizes. It outputs a srcset, so phones download small files.

{{ product.featured_image | image_url: width: 1200 | image_tag: widths: '400, 800, 1200', sizes: '(min-width: 990px) 50vw, 100vw', loading: 'lazy' }}

Fix 2: prioritize the hero image. Never lazy load the image at the top of the page. Instead, mark it as high priority.

{{ section.settings.hero | image_url: width: 1600 | image_tag: loading: 'eager', fetchpriority: 'high' }}

Limit loops and use render

Fix 3: cap your loops. Liquid runs on the server for every uncached request. So each loop costs time. Add a limit to for loops and use paginate for large collections. Also avoid all_products inside loops, because it is capped.

{% for product in collection.products limit: 8 %}
  {% render 'product-card', product: product %}
{% endfor %}

Fix 4: use render, not include. The include tag is deprecated. Render isolates variables, so snippets are easier to reason about and to debug.

Trim scripts, apps and fonts

Fix 5: defer non-critical JavaScript. Scripts block rendering by default. Add the defer attribute to your theme scripts.

<script src="{{ 'theme.js' | asset_url }}" defer></script>

Fix 6: audit apps. Every installed app can add scripts. Uninstalling an app does not always remove its code. Therefore, search your theme for leftovers and delete them. Then test again.

Fix 7: load fonts efficiently. Use the font_face filter with swap, then preload the main file. The text stays visible while the font loads.

<style>{{ settings.type_body_font | font_face: font_display: 'swap' }}</style>
<link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>

Reserve space to stop layout shift

Fix 8: set dimensions. Give images and embeds a width and a height. As a result, the browser reserves space before assets load. The image_tag filter adds these automatically.

Lean templates help here too. For example, show custom data with metafields in Liquid instead of adding another app widget. For more tactics, see Shopify’s theme performance best practices.

FAQ about Shopify Liquid performance

Does Liquid slow down my store? Rarely on its own. Bad loops and heavy apps are the usual culprits.

What is a good LCP score? Google considers 2.5 seconds or less good.

Should I install a speed app? Usually no. Speed apps add scripts, so fix the theme first.