利用 Chrome 的 Web 工具寻找改善用户体验的机会。
发布时间：2021 年 5 月 11 日
今天，我们将介绍 Lighthouse、PageSpeed 和 DevTools 中推出的新工具功能，帮助您确定如何改进网站的网页指标。
温馨提示：Lighthouse 是一款自动化的开源工具，旨在提升网页的质量。您可以在 Chrome DevTools 调试工具套件中找到它，并针对任何网页（公开网页或需要身份验证的网页）运行它。您还可以在 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 报告的“指标”部分包含这些指标的实验室版本。您可以将其用作摘要视图，了解用户体验的哪些方面需要您关注。
现场指标（例如 Chrome 用户体验报告或 RUM 中提供的指标）不存在此限制，并且是对实验室数据的有价值补充，因为它们反映了真实用户的体验。现场数据无法提供您在实验室中获得的诊断信息，因此这两者相辅相成。
找出网页指标有待改进的地方
确定 Largest Contentful Paint 元素
LCP 用于衡量用户感知的加载体验。它标记了网页加载过程中主要内容（或“最大”内容）已加载并可供用户看到的时间点。
Lighthouse 提供了“最大内容渲染时间元素”审核，用于确定哪个元素是最大内容渲染时间元素。将鼠标悬停在相应元素上，该元素就会在主浏览器窗口中突出显示。
如果此元素是图片，则此信息是一个有用的提示，表明您可能需要优化此图片的加载。Lighthouse 包含多项图片优化审核，可帮助您了解自己的图片是否可以更好地压缩、调整大小或以更理想的现代图片格式提供。
您可能还会发现 Annie Sullivan 的 LCP 书签栏非常有用，只需点击一下，即可快速用红色矩形标识 LCP 元素。
预加载较晚发现的图片以缩短 LCP 用时
如需缩短 Largest Contentful Paint 时间，请预加载重要的主打图片（如果浏览器发现这些图片的时间较晚）。如果需要在图片可检测到之前加载 JavaScript bundle，则可能会出现延迟检测。
我们经常会收到一些关于预加载 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 背景定义的，审核还会突出显示预加载机会吗？是。
如果在广告瀑布流深度达到 3 或更高时发现了被标记为 LCP 图片的图片（无论是通过 CSS 背景还是 <img>），则该图片就是候选图片。
延迟加载屏幕外图片，并避免为 LCP 执行此操作
对初始用户体验不至关重要的屏幕外图片可以延迟加载。这种技术会延迟下载图片，直到用户滚动到该图片附近，这可以减少对关键资源的网络争用，在某些情况下还可以缩短 LCP 时间。“推迟加载屏幕外图片”审核功能可以帮助您解决此问题：
首屏上的重要图片（例如 Largest Contentful Paint 图片）不应延迟加载。这样做可能会延迟 LCP 图片加载。如果 LCP 图片被错误地延迟加载，Lighthouse 会通过“Largest Contentful Paint 所对应的图片被延迟加载了”审核来突出显示这一问题：
确定对 CLS 的影响程度
Cumulative Layout Shift 用于衡量视觉稳定性。该指标用于量化网页内容在视觉上发生的偏移量。Lighthouse 有一个用于调试 CLS 的审核，名为“避免出现较大的布局偏移”。
此审核会突出显示对网页偏移影响最大的 DOM 元素。在左侧的“元素”列中，您会看到这些 DOM 元素的列表，在右侧则会看到它们对 CLS 的总体贡献。
借助新的 Lighthouse 元素屏幕截图功能，我们可以直观地预览审核中指出的关键元素，还可以点击以放大，以获得更清晰的视图：
对于加载后 CLS，持续使用矩形可视化哪些元素对 CLS 的贡献最大，这可能很有价值。您可以在 SpeedCurve 的“Core Web Vitals”信息中心等第三方工具中找到此功能，我喜欢使用 Defaced 的布局偏移 GIF 生成器来：
如需全面了解布局偏移问题，我会经常使用 Search Console 的“Core Web Vitals”报告。这样，我就可以查看自己网站上 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，但这并非必需的。我们来屏蔽它吧！
我们可以在 DevTools 的“Network”面板中右键点击脚本，然后点击 Block Request URL 将其屏蔽。在这里，我们将为 Intersection Observer polyfill 执行此操作。
接下来，我们可以重新运行 Lighthouse。这次，我们可以看到性能得分有所提高（70/100），总屏蔽时间也缩短了（400 毫秒> 300 毫秒）。
将成本高昂的第三方嵌入替换为外观
通常，您会使用第三方资源将视频、社交媒体帖子或 widget 嵌入到网页中。默认情况下，大多数嵌入内容会立即提前加载，并且可能附带会对用户体验产生负面影响的高成本载荷。如果第三方不是必需的（例如，用户需要滚动屏幕才能看到它），则这样做会浪费资源。
提高此类 widget 性能的一种模式是在用户互动时延迟加载它们。为此，您可以渲染 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 提供。