Shopify 性能优化

Shopify TTFB 偏高怎么读 Lighthouse 报告

现象#

Lighthouse 里 TTFB 显示 1.2 秒以上、标红,但服务器是 Shopify 托管,没有自己的后端可优化。

原因#

  • TTFB 包含 DNS、连接、TLS 与边缘节点回源,Lighthouse 的实验室环境受测试位置影响很大
  • 重定向链(http→https、裸域→www)会叠加多次往返,直接抬高首字节时间
  • 主题里同步调用了外部接口或应用代理,首屏 HTML 需要等这些请求返回
  • 受众与测试节点跨洲,边缘节点未命中缓存

处理步骤#

  1. 先用 curl -w '%{time_starttransfer}' -o /dev/null -s https://你的域名/ 在目标地区实测,排除 Lighthouse 节点误差
  2. 用 curl -I 检查是否有 301/302 链,把裸域与 www 收敛成一次跳转
  3. 在主题里搜索 fetch(、XMLHttpRequest 与 app proxy 调用,确认没有在服务端渲染路径上同步请求外部接口
  4. 检查应用是否在 theme.liquid 头部注入阻塞脚本,能延后的移到 body 末尾
  5. 用 WebPageTest 选目标城市复测,取多次运行的中位数而不是单次 Lighthouse 分数

验收标准#

目标地区实测 TTFB 稳定在 0.6 秒以内;Network 面板中首文档请求没有前置重定向,且不依赖第三方接口返回。

本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。