如何利用低分辨率底图优化首页背景图片，降低 Lighthouse 耗时？

优化背景图片，减少 Lighthouse 耗时

本文档重点讨论在 Vue 项目中优化包含背景图片的首页，以降低 Lighthouse 中的耗时。

当页面加载时，浏览器开始下载页面资源，包括图像。因此，巨大的背景图像可能会对首次内容绘制 (FCP) 产生负面影响。

虽然图像压缩、转换为 WebP 等方法可以提高性能，但在本例中，它们的效果并不理想。本文档提供了一个不同的解决方案：

先加载低分辨率的底图，再上原图

先将低分辨率的缩略图加载到背景中，然后在后台加载高分辨率原图。这可以实现以下目的：

• 初始加载时间更短：缩略图的加载速度比原图快，因为它较小。
• 逐步增强：当原图加载完成后，浏览器会自动更新背景，实现平滑过渡。
• 用户体验改善：用户可以在原图加载完毕之前看到页面的基本内容。

下面是实现这一技术的步骤：

1. 创建一个低分辨率的底图（例如，使用原始图像的 1/4 分辨率）。
2. 将底图分配给背景元素的 background-image CSS 属性。
3. 在组件中使用 mounted 生命周期钩子来异步加载原图。
4. 当原图加载完成后，使用 JavaScript 将 background-image 替换为原图的 URL。

通过采用这种方法，您可以大幅度降低 Vue 项目中背景图片的加载时间，从而提高整体性能和用户体验。