图片加载与解码 loading=lazy 与 decoding=async 实践

图片加载与解码 loading=lazy 与 decoding=async 实践概述原生图片懒加载与异步解码降低主线程阻塞与首屏压力，结合尺寸声明与优先级控制，提升 Core Web Vitals。核心概念与参数懒加载：`<img loading="lazy">` 延后非关键图片加载，减少网络竞争。异步解码：`decoding="async"` 在空闲时解码，避免渲染阻塞。尺寸声明：明确 `width/height` 或 `aspect-ratio`，避免布局抖动（CLS）。实践示例<img src="/hero.jpg" width="1600" height="900" decoding="async" alt="hero" /> <img src="/gallery-1.jpg" loading="lazy" width="800" height="600" alt="gallery" /> 验证方法支持矩阵：`loading=lazy` Chrome 76+/Firefox 75+/Safari 16.4+；`decoding=async` Chrome 71+/Firefox 71+/Safari 15+。指标对比：使用 Lighthouse 与 RUM 监测 LCP/INP/CLS 前后差异。弱网测试：在 3G/高延迟环境观察关键资源调度与解码时序。注意事项首屏主图通常不使用 `loading=lazy`，并搭配 `fetchpriority="high"`。所有图片声明尺寸或占位，避免 CLS。与缓存/格式（AVIF/WebP）协作，进一步优化体积与解码性能。参考MDN：`loading` 与 `decoding`；Web.dev 图片优化