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