图片懒加载实践：loading="lazy" 之外注意什么

<img loading="lazy"> 让浏览器自动处理：图片距视口一定距离（Chrome 约 1250-2500px，随网络状况调整）时才开始加载，无需任何 JS、无需监听滚动。所有现代浏览器均已支持，老浏览器会忽略该属性正常加载——零风险的渐进增强。

• 正确：<img src="photo.jpg" loading="lazy" width="800" height="600" alt="...">
• width/height 必须写——它让浏览器提前占位，防止图片加载后页面跳动（CLS）
• 懒加载对 img 与 iframe 都有效，video 用 preload="none" 实现类似效果

页面顶部的主视觉图（Hero、Banner、文章头图）几乎总是 LCP 元素——Lighthouse 性能评分中权重最高的指标。给它加 loading="lazy" 等于告诉浏览器「这个不急」，加载会延后，LCP 直接变差。

首屏图的正确姿势恰好相反：loading="eager"（或不写，默认即 eager）+ fetchpriority="high" 提示浏览器优先下载，必要时再加 <link rel="preload">。

• 首屏内可见（任何设备）：loading="eager" + fetchpriority="high"
• 首屏下方 1-2 屏：可以 eager，也可以 lazy，差别不大
• 长列表、瀑布流、评论区配图：一律 lazy
• 轮播图：当前帧 eager，后续帧 lazy

懒加载推迟了加载时机，但没有减少任何流量——用户滚到那里，3MB 的图还是要下载 3MB。正确顺序永远是先压缩优化体积，再用懒加载优化加载时机，两者叠加才是完整的图片性能方案。