东莞营销型网站建站中国十大猎头公司
在 Web 性能优化中，图片资源的管理是一个关键环节。Google 的 Lighthouse 工具在性能审计中特别关注“延迟加载屏幕外图片”（Defer Offscreen Images），旨在减少不必要的图片加载，从而提升页面加载速度和用户体验。本文将基于 Chrome 开发者文档，深入探讨屏幕外图片的定义、影响及优化方法，助你在2025年的 Web 项目中打造更高效的前端应用。
1. 什么是屏幕外图片？
1.1 定义
屏幕外图片（Offscreen Images）是指在页面初始加载时位于用户视口之外、不立即可见的图片。这些图片通常位于页面底部或需要滚动才能看到的区域。
1.2 为什么需要关注？
默认情况下，浏览器会立即加载页面中的所有 <img> 标签引用的图片，即使它们不在首屏范围内。这会导致：
- 带宽浪费：下载用户暂时看不到的资源。
- 加载延迟：延长“首次内容绘制”（FCP）和“最大内容绘制”（LCP）。
1.3 Lighthouse 的检测
Lighthouse 分析页面加载时哪些图片不在视口中，并计算延迟加载它们可以节省的字节数和时间。
2. 屏幕外图片的影响
2.1 性能瓶颈
加载大量屏幕外图片会增加初始页面加载的网络请求数和数据量，尤其在移动设备或低速网络下，影响尤为明显。
2.2 用户体验
- 用户需要等待更长时间才能看到首屏内容。
- 不必要的资源加载可能耗尽移动数据流量。
2.3 Lighthouse 得分
报告中的“延迟加载屏幕外图片”项会列出潜在节省的资源大小，直接影响性能得分。
3. 如何识别屏幕外图片？
3.1 使用 Lighthouse
- 打开 Chrome 开发者工具（F12）。
- 切换到“Lighthouse”选项卡。
- 选择“性能”类别，生成报告。
- 查看“机会”（Opportunities）下的“延迟加载屏幕外图片”，列出具体图片及其节省字节量。
3.2 手动检查
- 使用开发者工具的“元素”面板，滚动页面检查
<img>标签。 - 在“网络”面板中观察图片加载时间和位置。
4. 优化屏幕外图片的策略
4.1 使用原生延迟加载
HTML5 提供了 loading="lazy" 属性，让浏览器自动延迟加载屏幕外图片：
<img src="image.jpg" loading="lazy" alt="延迟加载图片">
- 工作原理：浏览器仅在图片接近视口时才加载。
- 兼容性：Chrome、Firefox 等现代浏览器广泛支持（2025年已全面普及）。
4.2 自定义延迟加载（Intersection Observer）
对于需要更精细控制或兼容旧浏览器的场景，使用 Intersection Observer API：
<img data-src="image.jpg" alt="延迟加载图片" class="lazy">
<script>const images = document.querySelectorAll('.lazy');const observer = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {const img = entry.target;img.src = img.dataset.src;observer.unobserve(img);}});});images.forEach(img => observer.observe(img));
</script>
- 优点：灵活性高，可结合其他逻辑（如预加载）。
- 回退：为不支持的浏览器提供 polyfill。
4.3 占位符技术
在图片加载前使用低质量占位符（LQIP）或纯色背景：
<img src="placeholder.jpg" data-src="image.jpg" loading="lazy" alt="带占位符的图片">
- 提升感知性能，用户不会看到空白。
4.4 结合响应式图片
确保延迟加载的图片也适配设备：
<img src="small.jpg"srcset="small.jpg 320w, large.jpg 1280w"sizes="(max-width: 600px) 100vw, 50vw"loading="lazy"alt="响应式延迟加载图片">
4.5 构建工具优化
使用现代构建工具（如 Webpack、Vite）自动处理：
- Webpack：结合
lazyload插件。 - Vite：使用
vite-plugin-image-optimizer添加loading="lazy"。
5. 示例：优化前后对比
优化前
<html>
<body><h1>首屏内容</h1><!-- 以下图片在屏幕外 --><img src="large-image1.jpg" alt="图片1"><img src="large-image2.jpg" alt="图片2">
</body>
</html>
- 页面加载时立即下载所有图片，总计 2MB。
优化后
<html>
<body><h1>首屏内容</h1><img src="large-image1.jpg" loading="lazy" alt="图片1"><img src="large-image2.jpg" loading="lazy" alt="图片2">
</body>
</html>
- 首屏仅加载文本，图片延迟加载，总计初始下载量降至 10KB。
效果
- FCP 从 3 秒降至 1 秒。
- 节省带宽 1.99MB。
- Lighthouse 性能得分提升 10-20 分。
6. 注意事项
- 关键图片例外：首屏可见图片避免使用
loading="lazy"，确保快速显示。 - SEO 影响：延迟加载不影响搜索引擎抓取，但需确保
alt属性完善。 - 测试：在不同网络条件和设备上验证效果。
7. 总结
屏幕外图片的优化是提升 Web 性能的低成本高回报策略。通过原生的 loading="lazy" 或 Intersection Observer，可以轻松实现延迟加载，减少初始加载负担。Lighthouse 的审计为我们指明了优化方向，而本文提供的方案则是实践指南。