loading="lazy" 属性告诉浏览器延迟加载图像或 iframe，直到它即将进入视口——节省带宽、加快初始加载，无需任何 JavaScript。
html
<img = = = = = />
lazy — 仅在滚动将其带入视口附近时加载。eager（默认）— 立即加载，不论位置。浏览器使用一个余量（在元素进入视图前稍早加载），因此到用户看到图像时，它通常已准备好。
<img src="x.jpg" loading="lazy" width="800" height="600" />
没有尺寸（或 aspect-ratio），延迟加载的图像没有预留空间，所以当它加载时页面会跳跃——损害累积布局偏移（CLS）。始终预留空间。
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
延迟加载**最大内容绘制（LCP）**图像实际上会损害性能——它延迟了最重要的像素。仅对屏外媒体进行延迟加载。
// the old manual approach native lazy-loading replaced
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) e.target.src = e.target.dataset.src; });
});
原生 loading="lazy" 在大多数情况下消除了对此的需求（尽管 IntersectionObserver 对自定义逻辑仍然有用）。
原生延迟加载可减少包含许多图像的长页面的初始字节和请求——对移动设备来说是一大胜利——完全免费。
细节很重要：预留尺寸以保护 CLS，并保持首屏/LCP 图像为 eager（甚至 fetchpriority="high"），以便重要内容仍能快速加载。