Shopify 图片没写宽高导致布局抖动怎么修

现象#

页面加载时商品图先撑开再收缩，文字被推来推去，Lighthouse 的 CLS 分数在 0.2 以上。

原因#

• img 标签没有 width / height，浏览器在图片下载完成前不知道占位尺寸
• 用 CSS 强制 height: auto 但父容器没有固定比例
• 轮播、懒加载占位用了透明 div，加载完成后高度突变

处理步骤#

1. 给所有内容图补上真实的 width 与 height，由 image_url 输出原图尺寸
2. 用 aspect-ratio 或 padding-top 百分比固定容器比例，图片设 object-fit: cover
3. 首屏图片加 fetchpriority="high"，非首屏加 loading="lazy"，避免懒加载引起二次跳动
4. 用 DevTools 的 Performance 面板录制加载过程，确认没有剩余 layout shift 来源

验收标准#

Lighthouse 移动端 CLS 低于 0.1；刷新页面时商品卡片位置不再跳动。