发布时间：2025 年 4 月 2 日
Chrome DevTools 中的性能面板功能强大，其中包含有关网站运行时行为中几乎所有可能问题的数据。不过，如此丰富的数据可能会让人应接不暇：许多开发者可能很难知道从何入手，即使是专家也可能难以在复杂的网页加载过程中找出具体问题。
Lighthouse 等工具就是为了解决此问题而开发的，它们可以分析性能轨迹，并简要报告潜在问题以及解决方法。但这也有弊端：由于无法查看详细信息，因此很难看出问题在时间轴上相对于彼此的出现时间。如果您想了解完整轨迹中的上下文，则必须在“性能”面板中从头开始。
新的数据分析边栏可将 Lighthouse 数据分析直接纳入性能面板，从而弥合这方面的差距。现在，查看轨迹时，面板中会直接显示建议，但更重要的是，通过这项集成，数据分析可以直接在性能时间轴中突出显示事件并叠加说明。将光标悬停在某条数据洞见上，即可放大并突出显示轨迹的相关部分、直观呈现关键路径，或在完整上下文中标记性能瓶颈。
使用“数据分析”边栏
您可能已经注意到新的边栏。该边栏在 Chrome 131 中添加，并提供了一些初始数据洞见，之后在每次新版 Chrome 发布时都会获得更多数据洞见。
如需查看该报告，请点击“性能”面板中的 Record（录制），加载网址或与网页互动，然后停止录制。如果您之前关闭了边栏，则该边栏可能会收起到“效果”面板的左侧。如需显示该面板，请点击 按钮，您会看到一个数据分析列表，可作为调查性能问题的入口点。
与 Lighthouse 报告类似，边栏会列出您刚刚录制的视频的一组数据分析，以便识别性能或用户体验问题，或提供数据来帮助您自行过滤和诊断问题。底部是收起的通过的数据分析部分，其中包含未被识别为此录制内容存在问题的数据分析，这可能是由于未发生特定性能问题，也可能是数据分析根本不适用（例如，如果您跟踪的是与网页的互动，而未进行导航）。
最后，如果您记录的轨迹包含对多个网页的导航，则每个网页都会获得自己的一组数据分析，您可以翻阅这些数据分析，分别调查每个导航。点击相应网址旁边的 图标，时间轴视图将缩放到在该网页上发生的轨迹部分。
网页加载数据分析
为了提供良好的用户体验，网页加载速度至关重要，而 Largest Contentful Paint (LCP) 是专注于衡量网页加载速度的 Core Web Vitals 指标。“数据分析”边栏提供有关如何缩短 LCP 用时的专用数据分析，以及有关 LCP 以外的网页加载方面数据分析。
LCP 数据分析
如需了解和改进 LCP，不妨先从 LCP 阶段入手。这种方法可将 LCP 用时细分为四个子部分，并分别对其进行处理。
点击左侧“数据分析”标签页中的按阶段计算的 LCP，系统会在“数据分析”标签页中显示每个子部分所花时间的细分数据。将鼠标悬停在“数据分析”标签页中的每个子部分上或点击相应子部分，即可突出显示或放大效果时间轴中的每个子部分，以便调查相应时间段内的事件。如果您已启用现场数据，并且您的网站有图片 LCP 加载数据，则该数据分析中还会包含子部分的第 75 百分位数值。
发现 LCP 请求功能会就如何加载 LCP 资源提出改进建议，这是影响网页 LCP 的最常见问题之一。它会在时间轴上叠加注释，标记图片本应加载的时间以及可以节省的估算加载时间。
进一步的数据分析有助于发现 LCP 子部分中存在的问题。文档请求延迟会突出显示对服务器的导航请求中的潜在优化。渲染阻塞请求会指出哪些请求会阻止网页的初始渲染，直到这些请求完成为止，即使内容（例如 LCP）已准备好显示也是如此。
除了 LCP 之外的网页加载数据洞见
除了 LCP 之外，其他数据分析有助于发现影响整体网页加载性能的潜在问题。
其中一个最大的挑战是第三方资源的性能。这些脚本通常出于业务原因而必不可少，但 Web 开发者对其性能几乎无法直接控制。“第三方”数据分析会按第一方和第三方实体对资源和 CPU 活动进行分类，显示哪些实体消耗了最多的时间和资源。将鼠标悬停在每个实体上，系统会在效果和广告联盟时间轴中突出显示其活动。此数据洞见可与“淡化第三方”复选框和“摘要”标签页中的新第一方/第三方条目搭配使用。
字体显示将列出可能使用了 font-display: swap 或 optional 以防止在字体加载期间显示文本的字体。
网络依赖项树用于确定网页加载过程中的长依赖项链，其中资源 A 加载资源 B 加载资源 C，而 C 对网页的外观或功能至关重要。每个依赖项请求都可能会导致加载整个链条的延迟时间显著增加，对于网络连接较差的用户而言，这种情况尤为明显。
最后，对于图片资源，改进图片传送功能会识别出可以显著优化的图片，这些图片可能会在提取不必要的额外字节时浪费大量下载时间。
有关响应能力的数据分析
Interaction to Next Paint (INP) 可以细分为子部分，与 LCP 类似。按阶段的 INP 数据分析将向性能时间轴添加叠加层，以突出显示这些子部分，帮助您了解它们与主线程活动的直接关系。
用于更新页面的互动通常会花费大量时间重新计算样式和布局。预测样式和布局所需时间的最佳指标之一是 DOM 的大小，包括节点总数和树的深度。优化 DOM 大小会报告网页的 DOM 大小，并突出显示 DOM 大小过大可能导致性能下降的事件。
强制重新流式传输提醒您注意响应能力的常见威胁：对 DOM 进行交错读写，这需要浏览器执行布局，例如向 DOM 添加新元素，然后调用用于读取屏幕上某个元素大小的 DOM 函数。即使您知道 DOM 的两个部分不会相互影响布局，但如果没有明确的内容容器，浏览器可能仍会因这两个部分之间存在未知依赖项而被迫重新布局整个网页。
现在，网络上的大多数网页都会设置显式的移动视口，但如果不设置，则可能会导致每次点击需要额外花费数百毫秒的时间，因为浏览器需要等待可能的其他输入。如果视口未正确设置，系统会发出针对移动设备优化视口数据分析提醒。
最后，如果选择了启用 CSS 选择器统计信息（较慢）选项，系统会显示 CSS 选择器成本数据分析，以概要介绍样式重新计算性能。请注意，若要获取此数据分析，您需要启用启用 CSS 选择器统计信息（较慢）选项，但这会显著降低网页性能。
布局稳定性分析
累积布局偏移 (CLS) 在时间轴中会获得自己的布局偏移轨道，显示分组为最长五秒的窗口（集群）的各个偏移，这些偏移用于计算 CLS 得分。
导致布局偏移的原因数据分析会突出显示 CLS 最差的集群，并列出其中的各个布局偏移。将鼠标悬停在列表或轨道中的每个班次上，系统会显示该页面的屏幕截图，并通过动画叠加层直观呈现班次。
总结
分析旨在将 Lighthouse 的强大功能融入效果面板的整个上下文中，让轨迹更易于理解，并将分析与其来源数据相关联。
我们正在积极改进当前的数据分析，并将推出更多数据分析。试用“数据分析”边栏，并告诉我们可以改进哪些方面，或者您希望看到哪些其他数据分析。