Shopify 性能优化

Shopify content_for_header 不能延迟怎么办

现象#

首屏 head 里有 trekkie、boomerang 与 Web Pixel 相关脚本同步加载,HTML 解析被卡住约 400ms,移动端 TTFB 后还有明显空白。

原因#

  • content_for_header 由平台注入,包含分析、Web Pixel 与应用代理脚本,主题改不了它们的属性
  • 这些脚本需要尽早拿到 window.Shopify 与 ShopifyAnalytics,平台按同步顺序输出
  • 把它挪到 body 末尾会让部分应用初始化失败,报 Shopify is not defined
  • App Embed 注入的脚本也走这条通路,主题侧只能控制自己的标签

处理步骤#

  1. 在源码里搜 content_for_header,确认它只出现一次且位于 <head> 内
  2. 不要删或移动它,改为 preconnect cdn.shopify.com 与 monorail-edge.shopifysvc.com
  3. 把主题自己的阻塞脚本从 head 移到 </body> 前并加 defer
  4. 统计启用的 Web Pixel 数量,关掉不再使用的营销像素以减少注入条目
  5. 用 Lighthouse 的 render-blocking 与 unused JS 审计对比前后字节

验收标准#

首屏阻塞脚本只剩平台注入的几条,render-blocking 审计估算节省低于 150ms,控制台无 undefined 报错。

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