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 Performance Is a Business Concern

Liquid runs on Shopify’s servers before any HTML reaches the browser. Unlike JavaScript, you cannot “fix it later” on the client. Inefficient Liquid:

Increases Time to First Byte (TTFB)
Reduces concurrency during peak traffic
Compounds under load on collection and search templates
Quietly caps scalability even on Plus stores

Liquid performance issues rarely show up in Lighthouse alone. They show up when traffic spikes.

Design Rationale and Trade-offs

Fewer renders beat clever abstractions

Reusable snippets are valuable, but render depth matters more than elegance. Two levels deep is usually safe. Beyond that, flatten aggressively.

Liquid is not a programming language

Treat Liquid as a templating DSL, not a logic engine. Business logic belongs in apps, metafields, or build-time tooling.

Metafields reduce compute cost

Pre-structured metafields often outperform runtime filtering across large collections.

Fact Checks and Clarifications

render isolates scope and is cached more safely than include, which is deprecated.
Liquid render cost scales with object size and loop depth, not just line count.
Shopify’s CDN does not cache Liquid output per-user for dynamic templates.

Key Takeaways

Optimise Liquid first, JavaScript second.
Render depth is the silent killer.
Structure data to avoid runtime filtering.

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

Need Shopify help? I work with retailers and agencies across Liverpool and Merseyside. Learn more about my Shopify services or get in touch.