图像延迟加载：loading=lazy

<img loading="lazy" src="...">会告诉浏览器，等图片即将进入视口时再下载。所有现代浏览器都原生支持这一功能，因此对于图片密集型页面来说，这是最简单的性能优化之一。

浏览器会使用一个较小的启发式边距（通常是首屏下沿以下几千像素）。图片会提前开始加载，因此用户滚动到图片时，它已经完成绘制——注重体验的用户几乎察觉不到延迟加载。

绝不要对首屏图片或 LCP（最大内容绘制）候选图片设置 loading="lazy"。延迟加载会推迟最重要的视觉元素，从而损害感知速度和核心网页指标。

要让延迟加载有效，请为 <img> 指定明确的 width 和 height（或使用 aspect-ratio CSS）。没有尺寸时，浏览器无法预留空间，滚动会导致布局重排，延迟加载的启发式判断也会失效。

相同的属性也适用于 <iframe>。<iframe loading="lazy"> 会延迟加载首屏以下的地图、视频和社交媒体嵌入内容——否则这些内容会在每次页面浏览时加载数 MB 的第三方 JavaScript。

默认值是 loading="eager"（立即加载），通常很少显式写出。在首屏图片上设置 eager 可以作为有用的文档说明，向审阅者表明选择立即加载是经过考虑的。

延迟加载与响应式图片配合得非常好。浏览器仍会从 srcset 中选择合适的候选图片，只是延后下载而已。loading="lazy" 与 srcset 之间无需额外协调。

请将延迟加载与 decoding="async" 配合使用，让浏览器在主线程之外解码图片。长时间快速滚动后同时到达多张图片时，这样可以避免在滚动期间阻塞输入处理。

CSS 的 background-image 无法原生实现延迟加载。对于首屏英雄图背景，这没有问题；对于首屏以下的背景，请使用 IntersectionObserver，在元素接近视口时再替换为该 URL。

打印页面时，无论是否设置了 loading="lazy"，浏览器都会立即加载每张图片，以确保打印内容完整。您不需要在打印样式表中为延迟加载的图片添加特殊处理。

Lighthouse 的“延迟加载屏外图片”审计会列出所有应设置 loading="lazy" 的图片。在网络面板中按“Img”筛选并查看“Waterfall”视图，可以看到延迟加载产生的分阶段请求——图片画廊的初始请求会大幅减少。

为什么不应对页面顶部的英雄图设置 loading="lazy"？

对屏外的 <img> 和 <iframe> 元素设置 loading="lazy"，只需一个属性就能获得性能收益。请将它与明确的宽度和高度（用于预留空间）、srcset（用于响应式适配）以及 decoding="async"（保持滚动流畅）结合使用。绝不要将它应用于 LCP 图片或初始视口中可见的任何内容。