使用 Lighthouse 优化网页指标

利用 Chrome 的 Web 工具寻找改善用户体验的机会。

Addy Osmani

发布时间：2021 年 5 月 11 日

今天，我们将介绍 Lighthouse、PageSpeed 和 DevTools 中推出的新工具功能，帮助您确定如何改进网站的网页指标。

温馨提示：Lighthouse 是一款自动化的开源工具，旨在提升网页的质量。您可以在 Chrome 开发者工具的调试工具套件中找到该工具，并可对任何网页（无论是公共网页还是需要身份验证的网页）运行该工具。您还可以在 PageSpeed Insights、CI 和 WebPageTest 中找到 Lighthouse。

Lighthouse 7.x 包含元素屏幕截图等新功能，可让您更轻松地直观检查影响用户体验指标的界面部分（例如，哪些节点会导致布局偏移）。

我们还在 PageSpeed Insights 提供了对元素屏幕截图的支持，让您能够更轻松地发现一次性网页性能运行问题。

衡量 Core Web Vitals

Lighthouse 可以合成衡量核心 Web 指标，包括 Largest Contentful Paint、Cumulative Layout Shift 和 Total Blocking Time（First Input Delay 的实验室代理）。这些指标反映了加载、布局稳定性和交互准备情况。Core Web Vitals 的未来中重点介绍的其他指标（例如 First Contentful Paint）也包含在内。

Lighthouse 报告的“指标”部分包含这些指标的实验室版本。您可以将其用作摘要视图，了解用户体验的哪些方面需要您关注。

注意： Lighthouse 侧重于在实验室环境中衡量初始网页加载期间的用户体验，模拟运行缓慢的手机或桌面设备。如果您的网页上存在可能会导致布局偏移或网页加载后出现长时间 JavaScript 任务的行为，实验室指标不会反映这一点。尝试使用开发者工具的“Performance”面板、Search Console 或 RUM，查看加载后的指标数据。

DevTools 性能面板中的新版“网页指标”选项会显示一个轨道，其中突出显示了指标时间点，例如上图所示的布局偏移 (LS)。

现场指标（例如 Chrome 用户体验报告或 RUM 中提供的指标）不存在此限制，并且是对实验室数据的有价值补充，因为它们反映了真实用户的体验。实测数据无法提供您在实验中获得的各种诊断信息，因此两者是相辅相成的。

找出网页指标有待改进的地方

确定 Largest Contentful Paint 元素

LCP 衡量的是感知加载体验。它标记了网页加载期间主要内容（或“最大”内容）已加载并可供用户看到的时间点。

Lighthouse 具有“Largest Contentful Paint 元素”审核机制，该审核机制可以确定哪个元素是最大的内容绘制模式。将鼠标悬停在相应元素上，该元素就会在主浏览器窗口中突出显示。

如果此元素是图片，则此信息是一个有用的提示，表明您可能需要优化此图片的加载。Lighthouse 包含多项图片优化审核，可帮助您了解自己的图片是否可以更好地压缩、调整大小或以更理想的现代图片格式提供。

您还可以发现 Annie Sullivan 编写的 LCP 小书签，只需点击一下，就能使用红色矩形快速识别 LCP 元素。

预加载较晚发现的图片以缩短 LCP 用时

如需改进 Largest Contentful Paint，请预加载关键主打图片（如果浏览器较晚发现这些图片）。如果需要在图片可检测到之前加载 JavaScript bundle，则可能会出现延迟检测。

注意 ：应尽量少用预加载。早期网络带宽是一种稀缺资源，使用预加载可能会导致其他资源的使用量增加。为了有效使用预加载功能，请确保资源的排序正确无误，以免在网页中的其他资源也被视为重要资源（例如关键 CSS、JS、字体）时，其他指标出现回归。预加载的成本对此进行了更详细的介绍。

我们经常会收到一些关于预加载 LCP 图片的常见问题，也许值得简要介绍一下。

您能预加载自适应图片吗？是。 假设我们使用 srcset 和 sizes 指定了一个自适应主推图像，如下所示：

<img src="lighthouse.jpg"
          srcset="lighthouse_400px.jpg 400w,
                  lighthouse_800px.jpg 800w,
                  lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">

由于向 link 属性添加了 imagesrcset 和 imagesizes 属性，我们可以使用 srcset 和 sizes 使用的相同图片选择逻辑预加载响应式图片：

<link rel="preload" as="image" href="lighthouse.jpg"
           imagesrcset="lighthouse_400px.jpg 400w,
                        lighthouse_800px.jpg 800w,
                        lighthouse_1600px.jpg 1600w"
imagesizes="50vw">

如果 LCP 图片是通过 CSS 背景定义的，审核还会突出显示预加载机会吗？是。

无论是通过 CSS 背景还是 <img> 标记为 LCP 图片的任何图片，只要在瀑布深度为 3 或更高时被发现，就会成为候选图片。

延迟加载屏幕外图片，并避免为 LCP 执行此操作

对初始用户体验不至关重要的屏幕外图片可以延迟加载。这种技术会延迟下载图片，直到用户滚动到该图片附近，这可以减少对关键资源的网络争用，在某些情况下还可以缩短 LCP 时间。通过“推迟屏幕外图片”审核有助于：

首屏上的重要图片（例如 Largest Contentful Paint 图片）不应延迟加载。这样做可能会延迟 LCP 图片加载。Lighthouse 会突出显示是否通过“Largest Contentful Paint image was lazily loaded”审核错误地延迟加载了 LCP 图片：

确定 CLS 贡献

Cumulative Layout Shift 是对视觉稳定性的衡量。该指标用于量化网页内容在视觉上发生的偏移量。Lighthouse 有一个用于调试 CLS 的审核，名为“避免出现较大的布局偏移”。

此审核会突出显示对网页偏移影响最大的 DOM 元素。在左侧的“元素”列中，您会看到这些 DOM 元素的列表，并在右侧看到它们的总体 CLS 贡献。

借助新的 Lighthouse 元素屏幕截图功能，我们可以直观地预览审核中指出的关键元素，还可以点击以放大，以获得更清晰的视图：

对于加载后 CLS，持续使用矩形可视化哪些元素对 CLS 的贡献最大，这可能很有价值。您可以在 SpeedCurve 的“Core Web Vitals”信息中心等第三方工具中找到此功能，我喜欢使用 Defaced 的布局偏移 GIF 生成器来：

如需全面了解布局偏移问题，我会经常使用 Search Console 的“核心网页指标”报告。这样，我就可以查看自己网站上 CLS 较高的网页类型（在本例中，有助于我自行确定需要花时间改进哪些模板部分）：

注意 ：为减少由 Web Fonts 导致的布局偏移，请留意 @font-face 的新 size-adjust 描述符。这样可以调整后备字体的大小，以降低 CLS。

从没有尺寸的图片中识别 CLS

如需限制由没有尺寸的图片导致的累积布局偏移，请为图片和视频元素添加宽度和高度尺寸属性。这种方法可确保浏览器在图片加载时能够在文档中分配正确数量的空间。

请参阅再次设置图片的高度和宽度至关重要，了解考虑图片尺寸和宽高比的重要性。

从广告中识别 CLS

借助 Lighthouse 发布商广告，您可以找到改善网页上广告加载体验的机会，包括对布局偏移的贡献，以及可能会造成用户很快就能使用您的网页的耗时较长的任务。在 Lighthouse 中，您可以通过社区插件启用此功能。

请注意，广告是导致网页布局偏移的主要原因之一。请务必：

• 在视口顶部附近放置非粘性广告时请务必小心
• 通过尽可能为广告位预留最大尺寸，来消除移位

避免使用未合成的动画

如果繁重的 JavaScript 任务占用主线程，未合成的动画可能会在低端设备上出现卡顿。此类动画可能会导致布局偏移。

如果 Chrome 发现无法合成动画，则会将其报告给 Lighthouse 读取的 DevTools 轨迹，以便列出哪些带动画的元素未合成以及原因。您可以在避免使用非合成动画审核中找到这些问题。

调试 First Input Delay / Total Blocking Time / Long Tasks

首次输入衡量的是从用户首次与网页互动（例如点击链接、点按按钮或使用由 JavaScript 提供支持的自定义控件）到浏览器实际能够开始处理事件处理脚本以响应该互动的时间。长时间的 JavaScript 任务可能会影响此指标以及此指标的替代指标，即总阻塞时间。

Lighthouse 包含一个避免长时间运行的主线程任务审核，其中列出了主线程上耗时最长的任务。这有助于识别导致输入延迟的最主要原因。在左侧列中，我们可以看到负责执行长时间主线程任务的脚本的网址。

在右侧，我们可以看到这些任务的持续时间。提醒一下，长任务是指执行时间超过 50 毫秒的任务。这被视为阻塞主线程的时间足够长，会影响帧速率或输入延迟时间。

如果考虑使用第三方服务进行监控，我也非常喜欢主线程执行时间轴可视化 Calibre 的可视化这些开销，它会突出显示导致影响互动的长任务的父任务和子任务。

屏蔽网络请求，以便在 Lighthouse 中查看影响

Chrome 开发者工具支持屏蔽网络请求，以查看移除或无法访问个别资源的影响。这有助于了解各个脚本（例如第三方嵌入或跟踪器）在总阻塞时间 (TBT) 和可交互时间等指标方面的费用。

网络请求屏蔽功能也适用于 Lighthouse！我们来快速了解一下某个网站的 Lighthouse 报告性能得分为 63/100，TBT 为 400 毫秒。深入研究代码后，我们发现该网站在 Chrome 中加载了 Intersection Observer polyfill，但这并非必需的。我们来屏蔽它吧！

我们可以右键点击开发者工具 Network 面板中的脚本，然后点击 Block Request URL 将其屏蔽。在这里，我们将为 Intersection Observer polyfill 执行此操作。

接下来，我们可以重新运行 Lighthouse。这一次，我们可以看到，与总阻塞时间（400 毫秒 => 300 毫秒）一样，性能得分也提高了 (70/100)。

将成本高昂的第三方嵌入替换为外观

通常使用第三方资源将视频、社交媒体帖子或微件嵌入到网页中。默认情况下，大多数嵌入内容会立即提前加载，并且可能附带会对用户体验产生负面影响的高成本载荷。如果第三方并不重要（例如，如果用户需要滚动屏幕才能看到该第三方），就会造成浪费。

提高此类 widget 性能的一种模式是在用户互动时延迟加载它们。为此，您可以渲染该 widget 的轻量级预览（一个外观），并仅在用户与其互动时加载完整版本。Lighthouse 具有一项审核功能，旨在推荐可通过 Facade 延迟加载的第三方资源，例如 YouTube 视频嵌入。

谨此提醒，Lighthouse 会突出显示会阻塞主线程超过 250 毫秒的第三方代码。这可能会公开各种类型的第三方脚本（包括由 Google 编写的脚本），如果它们所呈现的内容需要滚动才能查看，那么它们可能更值得延迟或延迟加载。

核心 Web 指标以外

除了突出显示 Core Web Vitals 之外，最新版 Lighthouse 和 PageSpeed Insights 还会尝试提供具体的指导，以便您在启用源映射的情况下，加快包含大量 JavaScript 的 Web 应用的加载速度。

这包括越来越多的审核来降低网页中 JavaScript 的成本，例如降低对提供用户体验并不需要的 polyfill 和重复项的依赖。

如需详细了解 Core Web Vitals 工具，请关注 Lighthouse 团队的 Twitter 账号和 DevTools 中的新功能。

主打图片：Unsplash 用户 Mercedes Mehling 提供。