利用 Chrome 的 Web 工具查找改进用户体验的机会。
发布时间：2021 年 5 月 11 日
今天，我们将介绍 Lighthouse、PageSpeed 和 DevTools 中的新工具功能，以帮助您确定您的网站如何在 Web Vitals 上进行改进。
作为工具的简要回顾，Lighthouse 是一款开源的自动化工具，用于提高网页质量。您可以在 Chrome DevTools 调试工具套件中找到它，并针对任何网页（公共或需要身份验证）运行它。您还可以在 PageSpeed Insights、CI 和 WebPageTest 中找到 Lighthouse。
Lighthouse 7.x 包含元素屏幕截图等新功能，以便更轻松地直观检查 UI 中影响用户体验指标的部分（例如，哪些节点导致布局偏移）。
我们还在 PageSpeed Insights 上发布了对元素屏幕截图的支持，从而可以更轻松地发现页面一次性性能运行的问题。
衡量 Core Web Vitals
Lighthouse 可以综合衡量 Core Web Vitals 指标，包括 最大内容ful Paint (LCP)、累积布局偏移 (CLS) 和 总阻塞时间 (TBT)（首次输入延迟 (FID) 的实验室代理）。这些指标反映了加载、布局稳定性和交互就绪性。在 Core Web Vitals 的未来中强调的其他指标（如 首次内容ful Paint (FCP)）也包含在内。
Lighthouse 报告的“指标”部分包含这些指标的实验室版本。您可以将其用作摘要视图，了解用户体验的哪些方面需要您关注。
现场指标（例如在 Chrome UX 报告或 RUM 中找到的指标）没有此限制，并且是对实验室数据的宝贵补充，因为它们反映了真实用户的体验。现场数据无法提供您在实验室中获得的诊断信息类型，因此两者相辅相成。
确定可以在 Web Vitals 方面进行改进的地方
识别最大内容ful Paint (LCP) 元素
LCP 是对感知加载体验的衡量。它标记页面加载期间主要内容（或“最大”内容）已加载并对用户可见的点。
Lighthouse 具有“最大内容ful Paint 元素”审核，可识别哪个元素是最大内容ful Paint。将鼠标悬停在该元素上将在主浏览器窗口中突出显示它。
如果此元素是图像，则此信息是一个有用的提示，表明您可能需要优化此图像的加载。Lighthouse 包含许多图像优化审核，以帮助您了解您的图像是否可以更好地压缩、调整大小或以更优化的现代图像格式交付。
您可能还会发现 Annie Sullivan 的 LCP Bookmarklet 非常有用，只需单击一下即可用红色矩形快速识别 LCP 元素。
预加载延迟发现的图像以改进 LCP
为了改进最大内容ful Paint，如果关键的首屏主打图片被浏览器延迟发现，请预加载它们。如果需要在图像可被发现之前加载 JavaScript 包，则可能会发生延迟发现。
关于预加载 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 背景定义的，审核是否也会突出显示预加载机会？ 是的。
任何标记为 LCP 图像的图像（无论是通过 CSS 背景还是 <img>）如果在瀑布深度为三层或更多层时被发现，则都是候选对象。
延迟加载屏幕外图像并避免对 LCP 执行此操作
对于初始用户体验不重要的屏幕外图像可以延迟加载。这是一种延迟下载图像的技术，直到用户滚动到图像附近，这可以减少关键资产的网络争用，并且在某些情况下可以改进 LCP。“延迟加载屏幕外图像”审核可以帮助您。
关键的首屏上方图像（例如最大内容ful Paint 图像）不应延迟加载。这样做可能会延迟 LCP 图像加载。如果 LCP 图像被错误地延迟加载，Lighthouse 将通过“最大内容ful Paint 图像被延迟加载”审核突出显示。
识别 CLS 贡献
累积布局偏移是对视觉稳定性的衡量。它量化页面的内容在视觉上移动了多少。Lighthouse 有一个用于调试 CLS 的审核，称为“避免大型布局偏移”。
此审核突出显示对页面偏移贡献最大的 DOM 元素。在左侧的“元素”列中，您将看到这些 DOM 元素的列表，在右侧，您将看到它们的总体 CLS 贡献。
借助新的 Lighthouse 元素屏幕截图功能，我们既可以查看审核中注释的关键元素的视觉预览，也可以单击缩放以获得更清晰的视图
对于加载后 CLS，持久地使用矩形可视化哪些元素对 CLS 的贡献最大可能很有价值。这是您将在 SpeedCurve 的 Core Web Vitals 仪表板等第三方工具中找到的功能，我喜欢使用 Defaced 的布局偏移 GIF 生成器来实现此目的
对于布局偏移问题的全站视图，我从 Search Console 的 Core Web Vitals 报告中获得了很大的帮助。这让我可以看到我网站上哪些类型的页面具有较高的 CLS（在这种情况下，帮助我自我识别我需要花时间处理哪些模板局部）
从没有尺寸的图像中识别 CLS
为了限制由没有尺寸的图像引起的累积布局偏移，请在您的图像和视频元素中包含宽度和高度尺寸属性。这种方法确保浏览器可以在图像加载时在文档中分配正确的空间量。
有关考虑图像尺寸和宽高比的重要性的精彩文章，请参阅 再次强调设置图像的高度和宽度很重要。
从广告中识别 CLS
Lighthouse 的 Publisher Ads 允许您查找改进页面上广告加载体验的机会，包括对布局偏移和长时间任务的贡献，这些任务可能会延迟您的页面可供用户使用的时间。在 Lighthouse 中，您可以通过社区插件启用此功能。
请记住，广告是 Web 上布局偏移的最大贡献者之一。务必
- 在视口顶部附近放置非粘性广告时要小心
- 通过为广告位保留尽可能大的尺寸来消除偏移
避免非合成动画
如果繁重的 JavaScript 任务使主线程繁忙，则非合成动画在低端设备上可能会显得卡顿。此类动画可能会导致布局偏移。
如果 Chrome 发现动画无法合成，它会将其报告给 Lighthouse 读取的 DevTools 跟踪，从而可以列出哪些具有动画的元素未被合成以及原因。您可以在避免非合成动画审核中找到这些内容。
调试首次输入延迟/总阻塞时间/长任务
首次输入衡量从用户首次与页面交互（例如，当他们单击链接、点击按钮或使用自定义的、JavaScript 驱动的控件时）到浏览器实际能够开始处理事件处理程序以响应交互的时间。长时间 JavaScript 任务会影响此指标以及此指标的代理总阻塞时间。
Lighthouse 包含一个避免长时间主线程任务审核，其中列出了主线程上最长的任务。这有助于识别输入延迟的最坏贡献者。在左侧列中，我们可以看到负责长时间主线程任务的脚本的 URL。
在右侧，我们可以看到这些任务的持续时间。提醒一下，长时间任务是执行时间超过 50 毫秒的任务。这被认为会阻塞主线程足够长的时间以影响帧速率或输入延迟。
如果考虑使用第三方服务进行监控，我也很喜欢 Calibre 用于可视化这些成本的主线程执行时间线视觉效果，该效果突出显示了父任务和子任务，这些任务都导致了影响交互性的长时间任务。
阻止网络请求以查看 Lighthouse 中的前后影响
Chrome DevTools 支持阻止网络请求，以查看删除或不可用的单个资源的影响。这有助于了解单个脚本（例如第三方嵌入或跟踪器）对总阻塞时间 (TBT) 和可交互时间等指标的影响。
网络请求阻止也适用于 Lighthouse！让我们快速看一下某个网站的 Lighthouse 报告。性能得分是 63/100，TBT 是 400 毫秒。深入研究代码后，我们发现该网站在 Chrome 中加载了一个不必要的 Intersection Observer polyfill。让我们阻止它！
我们可以右键单击 DevTools Network 面板中的脚本，然后单击 阻止请求 URL 以阻止它。在这里，我们将对 Intersection Observer polyfill 执行此操作。
接下来，我们可以重新运行 Lighthouse。这次我们可以看到我们的性能得分有所提高 (70/100)，总阻塞时间也有所提高 (400 毫秒 => 300 毫秒)。
用外观模式替换成本高昂的第三方嵌入
使用第三方资源将视频、社交媒体帖子或小部件嵌入到页面中是很常见的。默认情况下，大多数嵌入会立即急切加载，并且可能带有成本高昂的有效负载，这对用户体验产生负面影响。如果第三方不重要（例如，如果用户需要滚动才能看到它），则这是浪费。
改进此类小部件性能的一种模式是在用户交互时延迟加载它们。这可以通过渲染小部件的轻量级预览（外观模式），并且仅在用户与之交互时才加载完整版本来完成。Lighthouse 有一项审核，它将推荐可以使用外观模式延迟加载的第三方资源，例如 YouTube 视频嵌入。
提醒一下，Lighthouse 将突出显示阻塞主线程超过 250 毫秒的第三方代码。这可能会暴露各种第三方脚本（包括 Google 编写的脚本），如果它们呈现的内容需要滚动才能查看，则可能值得更好地延迟或延迟加载。
超越 Core Web Vitals
除了突出显示 Core Web Vitals 之外，最新版本的 Lighthouse 和 PageSpeed Insights 还尝试为您提供具体的指导，如果您启用了源映射，您可以按照这些指导来改进 JavaScript 繁重的 Web 应用程序的加载速度。
这些包括越来越多的审核集合，用于降低页面中 JavaScript 的成本，例如减少对用户体验可能不需要的 polyfill 和重复项的依赖。
有关 Core Web Vitals 工具的更多信息，请关注 Lighthouse 团队 Twitter 帐户和 DevTools 中的新增功能。
首屏主打图片，由 Mercedes Mehling 在 Unsplash 上拍摄。