Shopify 称中位数店铺的 TTFB（首字节时间）在 p75 下降约 29%

已经符合 Shopify 条件的页面，不改代码就能更早开始加载。Shopify 的数据针对中位数店铺，反映的是典型提升幅度，无法说明某一家店铺具体能快多少。

• 改了什么： 根据 Shopify 性能博客和 @krzksz，Shopify 现在会把主题布局中 content_for_header 之前的全部内容尽早发出，不再等页面其余部分。模板渲染完成后，其余部分在同一个响应里送达。content_for_header 是每个 Shopify 主题都放在页面 head 里的标签，Shopify 通过它加载自己的脚本。

• Shopify 测到了什么： 中位数店铺的 TTFB（time to first byte，首字节时间，即等待服务器首次响应的时间）在 p75 下降约 29%，在 p90 下降 21%。p75 指 75%的页面浏览 TTFB 等于或低于这个值，p90 则对应 90%的页面浏览。FCP 和 LCP（首次内容绘制和最大内容绘制，即第一块内容和最大一块内容出现的时刻）改善了 2–6%，Shopify 认为这两项最接近顾客实际看到的体验。

• 适用哪些页面： 据 Shopify 原文，流式渲染适用于由 JSON 模板（基于版块的主题所用的模板格式）渲染、且 content_for_header 位置正确的页面。由 .liquid 模板渲染的页面、主题预览和主题编辑器目前还没有流式渲染。

• 为什么主题决定看得见的提升： Shopify 指出，如果主题的样式表放在 content_for_header 之后，浏览器就没法利用提前送达的开头部分开始加载样式表。这类主题仍然会流式渲染，但 FCP 和 LCP 的提升更小。

• 该查什么： 以下是我们根据 Shopify 的条件给出的建议：在主题代码编辑器里，看主要页面模板的后缀是 .json 还是 .liquid，再看布局文件里的样式表标签位于 {{ content_for_header }} 之前还是之后。检查结果只能说明页面是否符合条件，测不出提升幅度。调整布局文件里标签的顺序属于修改主题，改过的主题请先问负责维护的人。

商家需要修改主题才能更早开始加载吗？

已经符合条件的页面不需要。Shopify 原文说 .liquid 页面目前还没有流式渲染，所以以后能否在不改主题的情况下覆盖这些页面，原文没有说明。

为什么 FCP 和 LCP 的提升比 TTFB 小？

流式渲染让首字节更早到达，而 TTFB 测的正是这一刻。FCP 和 LCP 还要等首字节之后加载的样式表、图片和脚本。

流式渲染在主题编辑器里生效吗？

不生效。据 Shopify 原文，主题预览和主题编辑器目前还没有流式渲染，在编辑器里测速看不到这项改动。请在线上店面测速。