每日整理真实提问 356 个问题 · 726 个回答 需要系统性的技术文档?看 Shopify 技术百科 1000 篇 → 400-873-8117
已解决 提问于 29 天前

Liquid 循环太多导致 TTFB 高

2 个回答 1,589 次浏览 性能与 Core Web Vitals 最后活跃 25 天前
85

首页 TTFB 1.8 秒,服务器渲染时间占了大部分。

泽
阿泽提问者
前端工程师 · Hydrogen / Storefront API
29 天前提问 · 已收到 2 个回答

2 个回答

已采纳 · 提问者确认解决
53

先把判断放在前面:Liquid 在服务端执行,双重循环、跨集合查询、大量 metafield 读取都会拖慢渲染。

1处理顺序

  1. 减少嵌套循环,尤其是「集合里再遍历商品变体」。
  2. 用 paginate 限制单次渲染数量。
  3. 把重复计算的结果 assign 缓存,避免循环内重复求值。
  4. 首页尽量不查全量集合,用精选集合代替。
  5. 用 ?debug=1 或本地 CLI 分析渲染耗时。
验收:TTFB 降到 600ms 以内,首页渲染时间明显下降。
风 风格技术团队 回答于 28 天前
7

Liquid 里最贵的是「循环内的关联查询」,比如循环商品时读每个商品的 metafield。能提前批量取出来就批量取。

陈 陈工 · Shopify 认证开发者 · 27 天前

你的处理方式是什么?

写下你实际验证过的步骤,比「我也有这个问题」有用得多。当前版本为静态展示,提交后会由团队整理并回复。

描述你遇到的现象、店铺环境(主题 / 套餐 / 应用)、已经试过哪些操作……
我要单独提问 工作日 10 分钟内回复,可直接加微信 fenggejishu