每日整理真实提问 356 个问题 · 726 个回答 需要系统性的技术文档?看 Shopify 技术百科 1000 篇 → 400-873-8117
已解决 提问于 29 天前

Headless 站图片怎么优化

2 个回答 2,728 次浏览 Headless 与 Hydrogen 最后活跃 25 天前
37

自建前端直接用了商品图的原始 URL,移动端加载很慢。

陈
陈工提问者
Shopify 认证开发者 · 专注主题与 Liquid
29 天前提问 · 已收到 2 个回答

2 个回答

已采纳 · 提问者确认解决
31

先把判断放在前面:Storefront API 返回的图片支持 URL 参数变换,但需要手动拼。

1处理顺序

  1. 用 image.url 配合 Image 组件的 widths 生成 srcset。
  2. 或直接拼 CDN 参数 ?width=800&format=webp。
  3. 首屏图加 fetchpriority=high。
  4. 用固定宽高比容器避免 CLS。
  5. 对比优化前后的 LCP。
验收:图片按需加载正确尺寸,LCP 明显改善。
风 风格技术团队 回答于 28 天前
13

不要在前端动态计算尺寸,容易出错。用组件库封装的 Image 组件,传入 widths 数组最省心。

泽 阿泽 · 前端工程师 · 27 天前

你的处理方式是什么?

写下你实际验证过的步骤,比「我也有这个问题」有用得多。当前版本为静态展示,提交后会由团队整理并回复。

描述你遇到的现象、店铺环境(主题 / 套餐 / 应用)、已经试过哪些操作……
我要单独提问 工作日 10 分钟内回复,可直接加微信 fenggejishu