Shopify Essentials: Shopify Theme Performance: Liquid Optimisation

Advanced techniques for optimising Shopify themes using Liquid. Improve load times, reduce render-blocking, and streamline your theme architecture.

Shopify performance starts with Liquid - the templating engine behind every Shopify theme. Misusing Liquid logic can introduce significant server-side rendering delays, especially on high-traffic or complex stores.

This guide covers practical, code-level Liquid optimisation techniques to streamline your Shopify theme.

Why Liquid Impacts Performance

Liquid is rendered server-side. Each loop, filter, and conditional adds processing time before the HTML is delivered.

Themes with deeply nested includes or inefficient loops can create:

Long Time to First Byte (TTFB)
Bottlenecks under load
Poor Core Web Vitals scores

Avoid Deep Include Trees

Every render call adds an HTTP server read and variable scope resolution.

Inefficient nesting

{% render 'product-grid' %} → {% render 'product-card' %} → {% render 'price-badge' %}

Flatten when possible

Use for loops directly inside the page section with inline snippets where possible.

Reduce Expensive Loops

Nested or duplicated loops are the #1 cause of render lag in custom themes.

Nested loops with filtering

{% for collection in collections %}
  {% for product in collection.products %}
    {% if product.available %} ... {% endif %}
  {% endfor %}
{% endfor %}

Optimised by pre-filtering

Use limit in loops, filter conditions, or pre-filtered metafields where possible.

{% for product in collections['frontpage'].products limit: 6 %}
  {% if product.available %}
    {{ product.title }}
  {% endif %}
{% endfor %}

Use Section Settings for Control

Avoid hardcoded logic. Leverage section schema settings to control visibility and behaviour:

{% if section.settings.enable_promo %}
  <div class="promo-banner">...</div>
{% endif %}

Debounce Expensive Filters

Avoid chaining multiple filters inside loops:

Chained filters in loops

{{ product.title | truncatewords: 3 | upcase | escape }}

Better approach

Move transformation logic to a helper snippet or apply filters outside loops where possible.

Leverage `defer` and `lazyload`

Use Shopify’s built-in lazy loading for:

<img src="{{ image | image_url }}" loading="lazy">

Defer any JS-heavy components until interaction or view:

<script defer src="custom-slider.js"></script>

Use `render` over `include`

include is deprecated. render isolates scope and improves caching:

{% render 'icon-star', filled: true %}

Clean Up `theme.liquid`

Remove unused script includes
Avoid {{ content_for_header }} duplication
Consolidate metafields into a single lookup block

Real-World Results

In the Shopify performance rework project:

Reduced Liquid render time by 47%
Flattened include structure reduced TTFB by 180ms
Converted 12 sections to pre-filtered loops

Best Practices

Limit render depth to 2 levels max
Optimise collection/product loops aggressively
Use limit, where, and sort_by wherever possible
Offload JS interactions to client side
Test changes with Shopify Theme Inspector for Chrome