PageSpeed Insights 的新变化

了解 PageSpeed Insights 的最新动态,以帮助您更好地衡量和优化网页和网站的质量。

Addy Osmani
Addy Osmani
Elizabeth Sweeny
Elizabeth Sweeny
Leena Sohoni
Leena Sohoni

多年来,PageSpeed Insights (PSI) 已经发展成为提供现场数据和实验室数据的一站式数据源。它集成了 Chrome 用户体验报告 (CrUX) 和 Lighthouse 诊断信息,可提供有助于改善网站性能的数据洞见。

今天,我们非常高兴地宣布 PSI 的新版本!虽然 PSI 代码库是我们速度工具套件中的关键元素,但该代码库已有十年历史,包含大量旧代码,需要进行重新设计。我们借此机会解决 PSI 中与接口相关的问题,这些问题有时会导致用户难以浏览报告。我们的主要目标是:

  • 明确区分源自合成环境的数据和从现场用户收集的数据,使界面更直观。
  • 在界面中清楚地说明核心网页指标评估的计算方式。
  • 利用 Material Design 对 PSI 的外观和风格进行现代化改造。

这篇博文介绍了 PSI 中的新功能,这些功能将于今年晚些时候发布。

最新动态

PSI 界面的重新设计旨在改进报告数据的呈现方式,并提高报告中可用数据的清晰度和精细度。新界面旨在更直观,并帮助开发者快速发现其页面的实验室和现场性能数据分析。界面的基本更改包括:

明确区分现场数据和实验室数据

我们更改了界面,将实测数据与实验室数据明确区分开来。“实地数据”和“实验室数据”的标签已替换为文本,指示数据的含义和帮助方式。我们还将“实测数据”部分放在顶部。传统的基于实验室的性能得分(目前显示在顶部)已下移至“实验室数据”部分,以避免得分来源产生歧义。

了解真实用户的体验
现场数据部分
诊断性能问题
实验室数据部分

核心网页指标评估

Core Web Vitals 评估结果以前在 Field Data 中显示为“通过”或“未通过”这个词,现在醒目地显示为一个单独的子部分,并带有独特的图标。

请注意,核心网页指标的评估流程没有变化。核心网页指标 FID、LCP 和 CLS 可以在网页一级或来源一级汇总。对于这三个指标中数据均充足的汇总,如果这三个指标中第 75 个百分位的值为“良好”,则此汇总会通过核心网页指标评估。否则,汇总将无法通过评估。 如果聚合的 FID 数据不足,则如果 LCP 和 CLS 的第 75 百分位均处于良好状态,则聚合将通过评估。如果 LCP 或 CLS 数据不足,则无法评估网页或源级汇总。

移动设备和桌面设备效果标签

我们更改了顶部的导航菜单,并在报告页面上集中添加了适用于移动设备和桌面设备的链接。这些链接现在可以轻松查看,并且能清楚地标明了数据的显示平台。这样做还有助于让导航栏更加简洁。

旧版(在撰写本文时)的 PageSpeed Insights 版本
之后的 PSI 移动设备和桌面设备标签
新版导航栏
之后的 PSI 移动设备和桌面设备标签

来源摘要

目前,只需点击复选框时,“Origin Summary”(来源摘要)就会提供来自相应来源的所有网页的汇总 CrUX 得分。我们已将此报告部分移至“字段数据”部分下的新标签页“Origin”。

新 PageSpeed Insights 刷新的来源摘要。

其他实用信息

现在,该报告在每个字段的底部添加了一个新的信息部分以及实验室卡片,提供了有关抽样数据的以下详细信息:

  • 数据收集周期
  • 访问持续时间
  • 设备
  • 网络连接数
  • 样本规模
  • Chrome 版本

这些信息应该能够增强实验室数据与现场数据之间的差异,并可帮助以前不确定两种数据源(实验室和现场)之间可能有何不同的用户。

完善了关于现场和实验室采样及配置数据共享数据的部分

展开视图

我们新增了“展开视图”功能,在字段数据部分添加了展开细目功能,让您可以查看核心网页指标的精细详细信息。

全新展开的视图,其中包含用于查看字段数据指标的展开细目。

页面图片

我们移除了已加载网页的图片,该图片显示在字段数据旁边。实验数据部分会提供显示加载序列的页面的图片和缩略图。

实验数据旁边的已加载页面图片。

如需查看最新的产品文档,请访问 https://developers.google.com/speed/docs/insights/.

web.dev/measure 更新

为了减少性能工具箱中不同工具之间的不一致,我们还更新了 web.dev/measure,使其直接由 PageSpeed Insights API 提供支持。

以前,开发者会同时通过 PSI 工具和 /measure 生成报告,然后会看到不同的 Lighthouse 数据。出现差异的一个主要原因是 /measure 的所有测试都来自美国(因为它之前具有位于美国的云后端)。

通过 /measure 直接调用与 PSI 界面相同的 API,开发者在使用 PSI 和 /measure 时将获得更加一致的体验。此外,我们还根据用户使用该工具的方式对 /measure 进行了一些调整。这意味着 /measure 的登录体验将停用,但最常用的功能(可看到多个类别)仍然可用。

旧版测量页面。
web.dev/measure 之前
更新后的衡量工具版本,侧重于提供网页质量衡量功能。
web.dev/measure after

PSI 今日股价

退一步来,我们来看看当前的 PageSpeed Insights 报告提供的内容。PSI 报告在单个标签页中包含移动设备和桌面设备的性能数据,并就如何改进网页提供建议。在每种情况下,报告的关键组成部分都相似,包括以下内容:

性能得分:性能得分显示在 PSI 报告的顶部,会总结网页的整体性能。此得分是通过运行 Lighthouse 来收集和分析有关页面的实验室数据来确定的。90 及以上的得分表示良好,50-90 的得分需要改进,低于 50 的得分表示欠佳。

实测数据:实测数据来自 CrUX 报告数据集,可让您深入了解实际用户体验。这些数据包括 First Contentful Paint (FCP) 等指标,并会衡量核心网页指标(First Input Delay (FID)、Largest Contentful Paint (LCP) 和 Cumulative Layout Shift (CLS))。除了指标值,您还可以查看特定指标值为“良好”“需要改进”或“欠佳”(分别以绿色、琥珀色和红色条形表示)的网页的分布情况。显示的分布情况和得分基于 CrUX 数据集中用户的网页加载次数。得分是根据过去 28 天的数据计算得出的,不适用于可能没有足够的真实用户数据的新网页。

当前 PageSpeed Insights 报告中不同数据部分的细分

来源摘要:用户可以点击“显示来源摘要”复选框,查看过去 28 天内从同一来源提供的所有网页的指标汇总得分。

实验室数据:实验室性能得分是使用 Lighthouse 计算得出的,有助于调试性能问题,因为这些数据是在受控环境中收集的。该报告使用 First Contentful PaintLargest Contentful PaintSpeed IndexCumulative Layout ShiftTime to InteractiveTotal Blocking Time 等指标显示性能。系统为每个指标打分,并标有一个表示“良好”“需要改进”或“欠佳”的图标。本部分可以很好地反映预发布的性能瓶颈,并且有助于诊断问题,但可能无法反映实际问题。

审核:此部分列出了 Lighthouse 运行的所有审核,并列出了已通过的审核以及改进机会和其他诊断信息。

当前 PSI 设计的挑战

如上面的屏幕截图所示,实验室数据和现场数据的不同数据点并未明确隔离,刚接触 PSI 的开发者可能无法轻松理解数据的上下文以及后续操作。这种混乱导致了许多关于解读 PSI 报告的“操作方法”博文。

通过重新设计,我们希望能够让开发者更轻松地解读该报告,以便他们能够更快地从生成 PSI 报告转向根据其中包含的数据洞见采取行动。

了解详情

如需详细了解性能工具更新,请观看 2021 年 Chrome 开发者峰会主旨演讲。我们会及时通知您 PSI 的发布日期,以及 web.dev/measure 的变化。

感谢 Milica Mihajlija、Philip Walton、Brendan Kenny 和 Ewa Gasperowicz 对本文章的反馈