寻找机会，利用 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。
Lighthouse 报告的“指标”部分包含这些指标的实验版本。您可以将其用作摘要视图，了解用户体验的哪些方面需要您注意。
实测指标（例如 Chrome 用户体验报告或 RUM 中的指标）没有此限制，是实验室数据的重要补充，因为它们反映的是真实用户的体验。实测数据无法提供您在实验中获得的各种诊断信息，因此两者是相辅相成的。
确定在网页指标方面有待改进的方面
确定 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 背景定义的，审核是否还会突出显示预加载机会？有。
无论是通过 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 Element 屏幕截图功能，我们既可以直观地预览审核中记录的关键元素，也可以点击进行缩放以获得更清晰的视图：
对于加载后 CLS，通过矩形持续直观呈现哪些元素对 CLS 的影响最大是有价值的。SpeedCurve 的 Core Web Vitals 信息中心等第三方工具中都有此功能，我喜欢使用 Defaced 的 Layout Shift GIF 生成器来使用该功能：
我可以从 Search Console 的“核心网页指标”报告中了解整个网站的布局偏移问题。这样，我就可以查看网站上具有高 CLS 的网页的类型（在本例中，有助于自行确定我需要花费时间的模板部分）：
从没有维度的图片中识别 CLS
如需限制由无尺寸图片导致的 Cumulative Layout Shift，请在图片和视频元素中添加宽度和高度尺寸属性。此方法可确保浏览器在加载图片时可以在文档中分配适当的空间量。
请参阅再次设置图片的高度和宽度至关重要，了解考虑图片尺寸和宽高比的重要性。
从广告中识别 CLS
借助 Lighthouse 发布商广告，您可以找到改善网页上广告加载体验的机会，包括对布局偏移的贡献，以及可能会延迟多久才可供用户使用您的网页的耗时较长任务。在 Lighthouse 中，您可以通过社区插件启用此功能。
请注意，广告是导致网页布局偏移的最大因素之一。请务必：
- 在视口顶部附近放置非粘性广告时请务必小心
- 通过尽可能为广告位预留最大尺寸，来消除移位
避免使用非合成动画
如果繁重的 JavaScript 任务导致主线程忙碌，非合成的动画在低端设备上可能会出现卡顿。此类动画可能会引入布局偏移。
如果 Chrome 发现某个动画无法合成，就会向开发者工具跟踪 Lighthouse 读取该动画，以便其列出哪些带动画的元素没有合成以及相关原因。您可以在避免非合成动画审核中找到这些内容。
调试首次输入延迟 / 总阻塞时间 / 耗时较长的任务
首次输入衡量的是从用户首次与页面互动（例如，点击链接、点按按钮或使用由 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)。
使用 Facade 取代昂贵的第三方嵌入
通常使用第三方资源将视频、社交媒体帖子或微件嵌入到网页中。默认情况下，大多数嵌入都会立即加载，并且可能会提供昂贵的载荷，从而对用户体验产生负面影响。如果第三方并不重要（例如，如果用户需要滚动屏幕才能看到该第三方），就会造成浪费。
提高此类 widget 性能的一种模式是在用户互动时延迟加载它们。这可以通过渲染 widget 的轻量级预览（立面）来实现，并且仅在用户与其交互时加载完整版本。Lighthouse 具有一项审核功能，旨在推荐可通过 Facade 延迟加载的第三方资源，例如 YouTube 视频嵌入。
谨此提醒，Lighthouse 会突出显示会阻塞主线程超过 250 毫秒的第三方代码。这可能会公开各种类型的第三方脚本（包括由 Google 编写的脚本），如果它们呈现的内容需要滚动才能查看，那么它们可能值得更好地延迟或延迟加载。
超越 Core Web Vitals
除了突出显示核心网页指标之外，最新版本的 Lighthouse 和 PageSpeed Insights 还尝试提供具体指南，帮助您在启用源代码映射的情况下提高包含大量 JavaScript 内容的 Web 应用的加载速度。
这包括越来越多的审核来降低网页中 JavaScript 的成本，例如降低对提供用户体验并不需要的 polyfill 和重复项的依赖。
如需详细了解 Core Web Vitals 工具，请关注 Lighthouse 团队的 Twitter 账号和 DevTools 的新变化。
主打图片，由 Mercedes Mehling 在 Unshot 提供。