Shopify 全站图片懒加载反而拖慢 LCP

现象#

为了省流量给所有图片加了 loading="lazy"，结果 LCP 变差，首屏图很晚才出现。

原因#

• 首屏图片也加了 lazy，浏览器推迟到接近视口才请求
• 懒加载库用 IntersectionObserver 但阈值过大
• 图片没有尺寸占位，加载前后布局跳动

处理步骤#

1. 只对首屏以下的图片使用 loading="lazy"
2. 首屏图加 fetchpriority="high" 并配合 preload
3. 所有图片写死 width/height 或容器 aspect-ratio
4. 用 decoding="async" 避免解码阻塞主线程

验收标准#

LCP 图片在首屏立即开始加载，滚动到下方时其余图片才请求，CLS 小于 0.1。