Shopify Liquid 循环太多导致渲染慢怎么优化

现象#

集合页、搜索页打开要 3 秒以上，TTFB 正常但 HTML 返回很慢；页面里嵌套了多层 for 循环。

原因#

• 在循环里对每个商品再查一次 metafield 或 collection，形成 N+1 查询
• 对 collections.all.products 做全量遍历再筛选
• 同一个 snippet 在循环中反复 render，每次都重新解析
• 循环里调用需要额外计算的对象（如 product.variants 全量展开）

处理步骤#

1. 把循环内的对象查询提到循环外，先 assign 成变量再在循环里读取
2. 集合页限制渲染数量，用 paginate 分页而不是一次取 250 个商品
3. 循环里只输出必要字段，避免把完整商品 JSON 塞进页面
4. 用 {% render %} 替代 {% include %}，并给 snippet 传最小参数集

验收标准#

集合页 TTFB 与 HTML 下载时间下降 30% 以上；首屏商品数量不变但渲染不再卡顿。