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