\n
\n I audited 14 Shopify themes last quarter for speed. 11 of them blamed apps. None had touched Liquid loop count, capture-in-loop allocations, or image output.<\/p>\n
After optimizing 100+ Shopify stores over 12 years: the code-level patterns in your theme files account for 40-60% of total render time. Apps matter. Images matter. The template layer is where the compounding problems live.<\/p>\n
Here are the 5 Liquid patterns that move the needle.<\/p>\n
1. Drop capture from loops<\/p>\n
assign stores a value. capture renders a full block and stores it as a string. Using capture inside a loop means a new string allocation on every iteration.<\/p>\n
Slow \u2014 48 allocations on a 48-product collection:<\/p>\n
{% for product in collection.products %}
\n {% capture product_card %}<\/p>\n
{{ product.title }}
\n {{ product.price | money }}<\/p>\n
{% endcapture %}
\n {{ product_card }}
\n{% endfor %}<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Fast \u2014 direct output, zero allocations:<\/p>\n
{% for product in collection.products %}<\/p>\n
{{ product.title }}
\n {{ product.price | money }}<\/p>\n
{% endfor %}<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Use capture only when you need a reusable HTML block built once and output in a different location.<\/p>\n
2. Cap nested loops with limit and {% break %}<\/p>\n
Nested loops are the single biggest source of Liquid render time problems.<\/p>\n
Slow \u2014 2,500 iterations on a featured collections section:<\/p>\n
{% for collection in collections %}
\n {% for product in collection.products %}
\n {% for image in product.images %}
\n {{ image | image_url: width: 300 }}” alt=”https:\/\/dev.to\/mdkaspianfuad\/{{ image.alt }}”>
\n {% endfor %}
\n {% endfor %}
\n{% endfor %}<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Fast \u2014 32 iterations, using featured_image and limit:<\/p>\n
{% for collection in collections limit: 4 %}
\n {% for product in collection.products limit: 8 %}
\n {% if product.featured_image %}
\n {{ product.featured_image | image_url: width: 300 }}”
\n alt=”https:\/\/dev.to\/mdkaspianfuad\/{{ product.featured_image.alt | default: product.title }}”
\n width=”300″ height=”300″ loading=”lazy”>
\n {% endif %}
\n {% endfor %}
\n{% endfor %}<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Use {% break %} to stop early once you have the N items you need. Use {% continue %} to skip non-matching items without a nested if.<\/p>\n
Real result: Factory Direct Blinds went from 4,800 collection iterations to 216. LCP dropped from 22s to 2.7s.<\/p>\n
3. Output images with image_tag (srcset + dimensions)<\/p>\n
This single change can improve LCP by 500ms+ on collection pages.<\/p>\n
Slow \u2014 no srcset, no dimensions, no lazy loading:<\/p>\n
{{ product.featured_image | image_url: width: 800 }}”><\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Fast:<\/p>\n
{{ product.featured_image | image_url: width: 800 | image_tag:
\n srcset: “200,400,600,800”,
\n sizes: “(max-width: 768px) 100vw, 400px”,
\n loading: “lazy”,
\n decoding: “async”,
\n alt: product.featured_image.alt | default: product.title,
\n width: 800,
\n height: 800
\n}}<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Critical: Your hero and first visible product image should use loading: “eager”, not lazy. Lazy-loading your LCP element is one of the most common speed mistakes I see on audits.<\/p>\n
To handle this in a grid, conditionally eager-load the first 4:<\/p>\n
{% for product in collection.products limit: 24 %}
\n {% assign img_loading = forloop.index 4 | iif: “eager”, “lazy” %}
\n {{ product.featured_image | image_url: width: 600 | image_tag:
\n loading: img_loading,
\n width: 600,
\n height: 600
\n }}
\n{% endfor %}<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
4. Preload hero image and critical font in theme.liquid<\/p>\n
{% if template == ‘index’ %}
\n {% assign hero_image = section.settings.hero_image %}
\n {% if hero_image %}
\n {{ hero_image | image_url: width: 1200 }}”
\n imagesrcset=”https:\/\/dev.to\/mdkaspianfuad\/{{ hero_image | image_url: width: 600 }} 600w, {{ hero_image | image_url: width: 1200 }} 1200w”
\n imagesizes=”100vw”>
\n {% endif %}
\n{% endif %}<\/p>\n
{{ ‘your-heading-font.woff2’ | asset_url }}” crossorigin><\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Wrap third-party preconnects in conditionals so they only fire when the feature is enabled:<\/p>\n
{% if settings.enable_reviews %}<\/p>\n
{% endif %}<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
5. Push dynamic content onto the Section Rendering API<\/p>\n
Instead of a full page reload to update one section, fetch just that section’s HTML.<\/p>\n
Slow \u2014 full page reload on filter click:<\/p>\n
window.location.href = newUrl;<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Fast \u2014 Section Rendering API:<\/p>\n
async function updateCollection(url) {
\n const sectionId = ‘collection-grid’;
\n const response = await fetch(`${url}?sections=${sectionId}`);
\n const data = await response.json();
\n document.getElementById(sectionId).innerHTML = data(sectionId);
\n}<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Response size drops from 100KB+ to 5-15KB. Perceived load time drops from 2-3 seconds to 200-400ms.<\/p>\n
Good candidates: collection filtering, cart drawer, product recommendations, quick-view modals.<\/p>\n
Before and after numbers<\/p>\n
Store
\nMetric
\nBefore
\nAfter<\/p>\n
WD Electronics
\nMobile LCP
\n9.3s
\n3.1s<\/p>\n
WD Electronics
\nLighthouse
\n41
\n72<\/p>\n
WD Electronics
\nDOM Elements
\n4,200+
\n1,100<\/p>\n
Factory Direct Blinds
\nMobile PageSpeed
\n38
\n81<\/p>\n
Factory Direct Blinds
\nLCP
\n22.0s
\n2.7s<\/p>\n
Factory Direct Blinds
\nLiquid Render
\n840ms
\n65ms<\/p>\n
Both stores saw measurable conversion improvements within 30 days of deploying the speed fixes.<\/p>\n
How to verify in 5 minutes<\/p>\n
Install the Shopify Theme Inspector Chrome extension. Open DevTools, go to the Shopify tab, reload your slowest collection page. Total Liquid render time should be under 100ms. Over 200ms means a section is bleeding render budget.
\nOpen PageSpeed Insights on Mobile. Read Field Data first \u2014 that is real Chrome users, the metric Google ranks on.
\nCheck Search Console > Experience > Core Web Vitals for which URL groups are flagged Poor.<\/p>\n
The full post (with more code and the FAQ section) is at kaspianfuad.com.<\/p>\n
If you want a professional audit of your theme’s Liquid performance, I run a Shopify speed-focused CRO audit that covers every pattern above plus the JS and third-party script layer.<\/p>\n