图片懒加载将图片的获取推迟到接近视口时。正确实现可将图片密集型页面的初始页面重量减少 40–70%。错误实现——最常见的是对 LCP 图片使用懒加载——会给最重要的性能指标增加 500+ ms。以下是完整指南。

原生懒加载

最简单的实现是 loading="lazy" HTML 属性。浏览器支持率现已达 96%+。不支持的浏览器简单地忽略该属性并立即加载——不需要 JavaScript 回退。

LCP 陷阱：永远不要懒加载 Hero 图片

最常见的懒加载错误是在页面第一个可见图片（通常是 LCP 候选的 Hero 或横幅图片）上添加 loading="lazy"。这会给 LCP 增加 300–600 ms。修复方法：不要给首屏图片加懒加载，改用 fetchpriority="high"。

懒加载与 WebP 结合

懒加载减少初始加载时需要获取的图片数量。将图片转换为 WebP 减少每次获取的大小。在 Picovert 转换图片。

Next.js 中的懒加载

Next.js 的 next/image 默认对所有图片应用 loading="lazy"。对 LCP 图片添加 priority prop 以禁用懒加载。priority 会设置loading="eager"、添加预加载链接并设置 fetchpriority="high"。

常见错误检查清单

对首屏图片使用懒加载。
懒加载图片缺少 width 和 height。
将懒加载作为压缩的替代。 先压缩图片。
对立即可见的轮播图片使用懒加载。