Shopify 性能优化

Shopify Hydrogen 改价后 Oxygen 仍返回旧页

现象#

后台调价 10 分钟后 Hydrogen 商品页仍是旧价,响应头 cache-control: public, max-age=3600,强刷才更新。

原因#

  • loader 用了 CacheLong(),整页 HTML 在 Oxygen 缓存 1 小时,后台改价不会主动清
  • s-maxage 与 max-age 同时存在时边缘只看前者,本地调试容易误判
  • Oxygen 不支持 no-cache,写上去不会触发 304 校验,表现为设了没反应
  • 价格属于高频变化字段,却跟随商品详情一起进了长缓存对象

处理步骤#

  1. loader 返回的 headers 写 s-maxage=60, stale-while-revalidate=300
  2. 价格字段单独用 storefront.CacheNone() 查询,或改用 CacheShort()
  3. 需要每次校验时用 max-age=0, must-revalidate,不要依赖 no-cache
  4. 大促改价后触发一次部署或调用自定义 purge 清掉对应路径
  5. 用 curl -sI 读 age 与 cache-control,确认边缘 TTL 已生效

验收标准#

改价后 60 秒内 curl 到的新 HTML 含新价格,响应头 s-maxage=60 且 age 不超过 60。

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