寻找机会，利用 Chrome 的网络工具改善用户体验。
今天，我们将介绍 Lighthouse、PageSpeed 和 DevTools 中的新工具功能，以帮助您识别 了解您的网站可以如何改进网页指标。
回顾一下这些工具，Lighthouse 用于改善网页质量的开源自动化工具。您可以在Chrome DevTools 一套调试工具并运行 任何网页、公共网站或要求进行身份验证的网页。您还可以在 PageSpeed 数据洞见， CI 和 WebPageTest。
Lighthouse 7.x 添加了元素屏幕截图等新功能，以便您更轻松地直观地检查 影响用户体验指标的部分（例如，哪些节点影响到布局） shift）。
我们还支持 PageSpeed Insights 中的元素屏幕截图， 轻松发现一次性网页性能运行问题。
衡量核心网页指标
灯塔可以 综合衡量 Core Web Vitals 指标，包括 Largest Contentful Paint、Cumulative 布局偏移和总阻塞时间（First Input Delay 的实验室代理）。 这些指标反映了加载、布局稳定性和互动就绪情况。其他指标包括 First Contentful Paint（首次内容绘制）将在未来 核心网页指标也在所难免。
“指标”部分包含这些指标的实验版本。您可以使用 以摘要视图的形式显示用户体验的哪些方面需要您注意。
<ph type="x-smartling-placeholder">
实测指标，例如 Chrome 用户体验中的指标 举报或 RUM，不具备此条件 是实验室数据的宝贵补充，因为它们反映的是真实用户的体验 都有哪些好处。实测数据无法提供您在实验中获得的各种诊断信息，因此两者 。
确定在网页指标方面有待改进的方面
确定 Largest Contentful Paint 元素
LCP 衡量的是感知加载体验。它标记了在网页加载期间 主要或“最大”：内容已加载并对用户可见。
Lighthouse 具有“Largest Contentful Paint 元素”此审核可确定 最大内容渲染。将鼠标悬停在元素上，系统会在主浏览器窗口中突出显示该元素。
如果此元素是图片，则此信息会是一个有用的提示，可帮助您优化加载 这张图片的内容。Lighthouse 包含多项图片优化审核，可帮助您了解 是否能够更好地压缩、调整大小或以更优化的现代图片传送图片 格式。
您可能还会发现LCP 小书签，作者：Annie Sullivan 有助于一键快速识别带有红色矩形的 LCP 元素。
预加载延迟发现的映像以改进 LCP
如需改进 Largest Contentful Paint，请预加载关键英雄 如果浏览器较晚才发现某些图片，则会出现这种情况。如果存在以下情况，可能会发生延迟发现： 必须先加载 JavaScript 软件包，然后才能找到图片。
<ph type="x-smartling-placeholder">
我们会收到几个关于预加载 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 图片加载。Lighthouse 会突出显示是否通过“Largest Contentful Paint image was lazily loaded”错误延迟加载 LCP 图片审核：
确定 CLS 贡献
Cumulative Layout Shift 用于衡量视觉稳定性。它量化了网页的 内容在视觉上转移。Lighthouse 提供一项名为“避免大型 CLS 调试”的审核， 布局偏移”。
此项评估会突出显示对网页偏移影响最大的 DOM 元素。在元素中 左侧显示的是这些 DOM 元素的列表，右侧显示的是其总体 CLS 贡献的内容。
得益于新的 Lighthouse Element 屏幕截图功能，我们既可以直观地预览 以及点击放大功能获得更清晰的认识：
对于加载后 CLS，使用矩形持续直观呈现数据可能具有一定价值 哪些元素对 CLS 影响最大。您可以在第三方工具（例如 SpeedCurve 的核心网页指标信息中心 我喜欢使用 Defaced 的 Layout Shift GIF 生成器，用于：
对于整个网站的布局偏移问题，我从 Search Console 的“核心”报告获得了很多帮助。 “网页指标”报告。这样我就可以了解 我网站上 CLS 较高的网页类型（在本例中，有助于自行识别哪些模板 需要花时间处理的部分）：
<ph type="x-smartling-placeholder">
从没有维度的图片中识别 CLS
限制由图片引起的 Cumulative Layout Shift 没有尺寸，请在图片和视频元素中添加宽度和高度尺寸属性。 这种方法可确保浏览器在文档中分配适当的空间量 。
请参阅设置图片的高度和宽度至关重要 同样， 说明考虑图片尺寸和宽高比的重要性。
从广告中识别 CLS
通过 Lighthouse 发布商广告，您可以 寻找机会改善网页上广告加载体验，包括贡献内容 布局偏移和耗时较长的任务，这可能会迫使用户需要多久才能看到您的网页。在 Lighthouse，您可以通过社区插件启用此功能。
请注意，广告是 影响布局偏移的最大因素 。请务必：
- 在视口顶部附近放置非粘性广告时请务必小心
- 通过尽可能为广告位预留最大尺寸，来消除移位
避免使用非合成动画
非合成的动画在低端设备上可能会呈现卡顿（如果严重的话） JavaScript 任务使主线程处于忙碌状态。此类动画可能会引入布局偏移。
如果 Chrome 发现无法合成动画，则会向开发者工具跟踪记录报告该动画 Lighthouse 读取，以便其列出未合成的动画元素以及 什么原因。您可以在避免非合成 动画审核。
调试首次输入延迟 / 总阻塞时间 / 耗时较长的任务
首次输入衡量从用户首次与页面互动（例如，点击 链接、点按按钮或使用由 JavaScript 提供支持的自定义控件） 开始处理事件处理脚本来响应该互动。长 JavaScript 任务可能会影响此指标以及此指标的代理，即“总阻塞时间”。
Lighthouse 包含一个避免长时间的主线程任务审核，其中会列出 用时最长的任务这有助于确定导致问题最严重的 输入延迟。在左列中，我们可以看到负责长主线程的脚本的网址 任务。
在右侧，我们可以看到这些任务的时长。提醒一下，长任务是指 超过 50 毫秒。这被认为会阻塞主线程足够长的时间 影响帧速率或输入延迟。
如果考虑使用第三方服务进行监控，我也非常喜欢主线程执行 时间轴 用于直观呈现这些费用，突出显示导致耗时较长的父任务和子任务 影响互动的任务。
屏蔽网络请求，以在 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 性能的一种模式是在用户上延迟加载 互动。这可以通过渲染 微件（立面）的轻量级预览，并且仅在用户与之互动时加载完整版本 。Lighthouse 有一项审核功能，该审核结果将推荐可 通过 Facade 延迟加载，例如 YouTube 视频嵌入。
谨此提醒，Lighthouse 会突出显示会阻塞主线程超过 250 毫秒的第三方代码。这可能会公开各种类型的第三方脚本（包括由 Google 编写的脚本），如果它们呈现的内容需要滚动才能查看，那么它们可能值得更好地延迟或延迟加载。
超越 Core Web Vitals
除了突出显示核心网页指标之外，最新版本的 Lighthouse 和 PageSpeed Insights 尝试提供您可以遵循的具体指导，以提升大量 JavaScript 的网页的速度 。
其中包括越来越多的审查来降低网页中 JavaScript 的成本， 减少对用户体验的可能并不需要的 polyfill 和重复项的依赖。
如需详细了解 Core Web Vitals 工具，请关注 Lighthouse 小组 Twitter 账号和新功能 开发者工具。