HTML懒加载与首屏速度关系及提升方法速查

首屏图片上添加 loading="lazy" 实际上不会生效，浏览器会强制立即加载这些图片——这并非程序缺陷，而是规范设计的初衷。该属性仅对用户滚动后才进入视口的非首屏图片起作用，错误使用反而会拖慢首屏性能。

loading="lazy" 对首屏图片完全无效

浏览器规范的逻辑非常明确：所有位于首屏视口内的 标签，无论是否添加 loading="lazy"，都会被强制立即加载。这不是设计缺陷，而是有意为之。因此，不要指望通过添加该属性来压缩首屏资源体积或减少初始请求数。

常见错误现象包括：页面首屏卡顿、FCP（First Contentful Paint）毫无改善、Lighthouse 报告中“延迟加载首屏图片”依然标红——实际上并非漏写了 lazy，而是它本来就不应在此处使用。

• 首屏判定由浏览器运行时完成，依赖设备 DPR、viewport 宽高、滚动位置等，并非按 HTML 顺序数前 N 张图
• 在服务端渲染（SSR）或静态生成（SSG）页面中，若首屏图片被服务端注入了 loading="lazy"，同样会被忽略
• 在 Chrome DevTools 的 Network 面板中可以清晰看到：首屏 请求发起时间早于 DOMContentLoaded，且没有任何延迟

懒加载真正起效的场景和条件

该属性仅对用户需要滚动后才进入视口的图片生效，其核心价值是避免非关键资源抢占带宽和解码线程，从而间接让首屏渲染更顺畅。

典型适用场景：

• 长图文流（如新闻列表、博客正文中的插图）
• 底部轮播图、相关推荐模块
• 折叠区域（details / accordion）内默认隐藏的图片
• 分页加载的无限滚动列表（后续页图片）

但必须满足两个前提，才会实际推迟请求：

• 图片不在初始视口内（即 getBoundingClientRect().top > window.innerHeight 或类似判断成立）
• 浏览器支持 loading="lazy"（Chrome 76+、Firefox 75+、Edge 79+；Safari 15.4+ 开始有限支持；IE 全系不支持）

用错 lazy 反而拖慢首屏速度

当 loading="lazy" 被错误地应用于首屏图片，或与 混用时，可能引发资源竞争，导致关键图片加载被延后。

具体问题：

• 浏览器内部资源调度器会将 preload 和 lazy 视为冲突策略处理，部分版本 Chrome 会出现 preload 被降级或丢弃
• 如果首屏图同时带有 loading="lazy" 和 fetchpriority="high"，后者会被忽略，失去优先级提升效果
• 使用 IntersectionObserver 手写懒加载时，若初始化晚于 DOMContentLoaded，首屏已滚过，部分图片会“闪现加载”，破坏用户体验

正确做法：首屏图片显式声明 loading="eager"，或干脆不写该属性（默认行为就是 eager）。

兼容旧浏览器时 IntersectionObserver 的初始化时机很关键

手写 JS 懒加载必须在 DOM 构建完成前就注册监听，否则首屏滚动就会错过第一批触发点。

实操建议：

• 脚本放在 内并加 defer，确保在 DOMContentLoaded 前执行初始化逻辑
• 不要等 window.onload 再调用 new IntersectionObserver()，此时图片可能已完成加载或已滚动出视口
• 对 data-src 图片，需在 observer callback 中检查 isIntersecting === true 后再赋值 img.src，并移除 data-src 防止重复触发

示例关键片段：

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
}, { threshold: 0.1 });

threshold 设为 0.1 表示元素 10% 进入视口即触发，比默认 0 更早响应，避免用户刚看到图片边缘才开始加载。

首屏性能优化是一项系统工程，懒加载只是其中一环；它不解决首屏资源下载本身，只管理非关键资源的加载节奏。最容易被忽略的是：首屏图片永远不该添加 loading="lazy"，而应依靠压缩格式、CDN、响应式 sizes/srcset 和内联关键 CSS 来提速。