Profiling Liquid: How I Find What Slows a Shopify Page

Description and use

The author measures total and per‑section Liquid times with Shopify tools, removes nested loops, caches snippets with render, and achieves a reduction from ~900 ms to <200 ms.

Problem

A Shopify product page can take several hundred milliseconds to render Liquid, causing slow page load times.

Outcome

By measuring total and per‑section Liquid times, eliminating nested loops, and caching snippets, the author reduced Liquid rendering from ~900 ms to <200 ms.

Workflow

• 1. Open the page and read the Server‑Timing header for total Liquid time.
• 2. Open Theme Inspector to see per‑section render times.
• 3. Identify the three slowest sections.
• 4. Inspect the slowest section for nested loops or excessive data access.
• 5. Replace nested loops with limited or filtered loops (e.g., use where, limit).
• 6. Replace include with render for pure snippets to enable caching.
• 7. Hoist repeated lookups outside loops and cache metafields.
• 8. Measure again: reload twice and read Server‑Timing.
• 9. Repeat until total Liquid time is <250 ms and no section >60 ms.
• 10. Log before/after times and close the tab when criteria met.

Evidence

A product page that took 900ms to render Liquid dropped to under 200ms once I found the one section eating the whole budget.

Source

The first is the Shopify Theme Inspector for Chrome. Install the extension, log into your store, open DevTools, and you get a flame graph of every Liquid partial on the page with its render time.

Source

Nested loops over full collections are the usual slow culprit

Source

Cached snippets with the render tag cut repeat work to near zero

Source