Shopify 集合页一次渲染 250 个商品太慢

现象#

集合页 HTML 1.8MB，paginate by 250 后 TTFB 900ms，DOM 节点 4200 个，滚动时明显掉帧。

原因#

• paginate 的 by 参数上限是 50，写 250 会被截断，却仍要多做一次集合查询
• 每张商品卡都输出变体 JSON、完整 srcset 与评价应用占位，节点数随商品数线性增长
• 筛选与排序由 Liquid 在服务端重算，商品越多单次渲染耗时越长
• 首屏一次性输出全部卡片，浏览器要为整棵 DOM 做样式计算与布局

处理步骤#

1. 把 {% paginate collection.products by 250 %} 改成 by 24 或 by 36
2. 删掉卡片里未使用的变体 JSON，只留 selected_or_first_available_variant.id
3. 需要长列表时用 Section Rendering API 分页追加，不要在首屏渲染全部
4. 给卡片图片固定 width、height 与 aspect-ratio，减少布局计算
5. 用 Lighthouse 的 DOM size 审计与滚动时的 Performance 录制复测

验收标准#

集合页 DOM 节点低于 1500，HTML 体积低于 500KB，连续滚动 10 秒无整段掉帧。