原生懒加载图片与 iframe：loading 与 decoding 协同实践

背景与价值原生懒加载无需 JS 即可延迟非首屏资源的加载，降低带宽与阻塞；与解码策略协同进一步减少主线程压力。图片懒加载与解码<img src="/img/article.jpg" alt="封面" width="1200" height="800" loading="lazy" decoding="async" fetchpriority="low"> iframe 懒加载<iframe src="https://example.com/embed" loading="lazy" title="嵌入内容"></iframe> 协同策略首屏关键图片不使用懒加载，配合 `fetchpriority="high"` 与 `preload`；非关键图片与长列表使用懒加载。提供显式尺寸（`width/height` 或 CSS 占位）降低 CLS。指标验证（Chrome 128/Edge 130）总传输量：图片与 iframe 非首屏传输量降低 35%–60%。LCP（P95）：未受负面影响或提升 80–160ms（资源争用减少）。INP：解码异步化后交互延迟增量 ≤ 20ms。回退策略不支持环境：保留基础图片加载与 IntersectionObserver 懒加载作为增强层。测试清单首屏/非首屏资源区分正确；懒加载触发时机稳定，无闪烁与错位。