Profiling Liquid: How I Find What Slows a Shopify Page

说明与用途

作者使用 Shopify Theme Inspector 和 Server‑Timing 头部测量 Liquid 渲染时间，定位并优化嵌套循环和缓存片段，将渲染时间从 900 ms 降至 200 ms 以下。

问题

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

来源