Profiling Liquid: How I Find What Slows a Shopify Page

Описание и применение

Автор использует инструменты Shopify Theme Inspector и заголовок Server‑Timing, чтобы измерить время рендеринга Liquid, выявить узкие места, убрать вложенные циклы и кэшировать сниппеты, тем самым сократив время рендеринга с 900 мс до <200 мс.

Задача

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

Результат

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.

Рабочий процесс

• 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.

Доказательства

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

Источник

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.

Источник

Nested loops over full collections are the usual slow culprit

Источник

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

Источник