速度工具的发展:2019 年 Chrome 开发者峰会的精彩瞬间

新增了性能指标,更新了 PageSpeed Insights 和 Chrome 用户体验报告 (CrUX),等等。

Elizabeth Sweeny
Elizabeth Sweeny

在 Chrome 开发者峰会上,Paul Irish 和我宣布了 Lighthouse 的更新,包括 Lighthouse CI、新的效果得分公式等。除了 Lighthouse 的重要新闻外,我们还介绍了令人振奋的性能工具开发成果,包括新的性能指标、PageSpeed Insights 和 Chrome 用户体验报告 (CrUX) 的更新,以及 Web Almanac 对网络生态系统的分析带来的洞见。

新的效果指标

衡量用户体验的细微差异是量化其对业务利润的影响以及跟踪改进和回归情况的关键。随着时间的推移,我们开发了一些新指标来捕获这些细微差别,并填补衡量用户体验方面的空白。指标故事中最新推出的两个现场指标Largest Contentful Paint [LCP]Cumulative Layout Shift [CLS])正在 W3C Web 性能工作组中孵化,还有一个新的实验室指标 - Total Blocking Time (TBT)

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) 会报告最大内容元素在视口中变得可见的时间。

在 Largest Contentful Paint 之前,First Meaningful Paint (FMP)Speed Index (SI) 用于捕获初始绘制后的加载体验,但这些指标很复杂,通常无法确定页面的主要内容何时加载完毕。研究表明,仅查看网页上最大的元素何时呈现,就能更好地反映网页的主要内容何时加载。

新的 Largest Contentful Paint 指标很快就会在 Lighthouse 报告中推出,与此同时,您可以在 JavaScript 中衡量 LCP

Total Blocking Time (TBT)

总阻塞时间 (TBT) 指标用于衡量从首次内容绘制 (FCP)可交互时间 (TTI) 之间的总时长,在该时间段内,主线程被阻塞的时间足够长,足以阻止输入响应。

如果任务在主线程上运行的时间超过 50 毫秒,则会被视为耗时较长。超过该时间的任何毫秒数都计入该任务的阻塞时间。

一张图表,表示一个 150 毫秒的任务,其中有 100 毫秒的阻塞时间。

网页的总屏蔽时间是指从 FCP 到 TTI 之间发生的所有长任务的屏蔽时间的总和。

一张图表,表示五项任务在 270 毫秒的主线程时间内总共阻塞了 60 毫秒。

虽然“Interactive 所需时间”非常适合确定主线程在加载后何时会平稳运行,但“总阻塞时间”旨在量化主线程在整个加载过程中的繁忙程度。这样,TTI 和 TBT 便可互为补充,实现平衡。

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) 用于衡量网页的视觉稳定性,并量化用户遇到意外布局偏移的频率。内容意外移动可能会令人非常沮丧,而这项新指标可帮助您衡量用户遇到此问题的频率,以便您解决此问题。

说明布局不稳定如何对用户产生负面影响的抓屏。

如需了解 Cumulative Layout Shift 的计算方式和测量方式,请参阅 Cumulative Layout Shift 的详细指南

新的 Lighthouse 性能得分公式很快就会不再强调 FMP 和 FCI,而是纳入三个新指标:LCP、TBT 和 CLS,因为它们能更好地捕获网页何时可用。

在 Lighthouse v6 中,First Contentful Paint、Speed Index 和 Largest Contentful Paint 是主要的加载性能指标;可交互时间、首次输入延迟、首次输入延迟最长预估值和总屏蔽时间是主要的交互性指标;累积布局偏移是主要的可预测性指标。

如需了解详情,请参阅 Lighthouse 性能评分和新的 web.dev 指标集合

PageSpeed Insights 中调整了现场数据 (CrUX) 阈值

在过去一年中,我们一直在通过 Chrome 用户体验 (CrUX) 数据分析实际网站性能。通过这些数据获得的分析洞见,我们重新评估了用于在现场性能方面将网站标记为“慢速”“中速”或“快速”的阈值。

两个条形图,显示了 FCP 和 FID 的缓慢、快速和中速分布情况。

为了对网站进行全面评估,PageSpeed Insights (PSI) 会将现场数据总分布的特定百分位数用作该网站的黄金数字;之前使用的阈值分别为首次内容绘制时间的 90 百分位数和首次输入延迟 (FID) 的 95 百分位数。

例如,如果某个网站的 FCP 分布为 50% 快、30% 中等、20% 慢,则第 90 百分位数 FCP 属于慢速部分,因此该网站的整体领域得分为慢速。

我们对此进行了调整,以便在各个网站上实现更好的总体分布,新的细分维度如下所示:

指标 总体百分位数 快速(毫秒) 中(毫秒) 慢(毫秒)
首次内容渲染 (FCP) 第 75 百分位 1000 1000-3000 3000+
FID 第 95 百分位 100 100-300 300+

例如,现在,如果某个网站的 FCP 分布为 50%“快”、30%“中等”和 20%“慢”,则第 75 百分位数 FCP 属于“中等”部分,因此该网站的整体领域得分为“中等”。

PageSpeed Insights 中的规范网址重定向

为了让您能够尽可能准确地衡量用户体验,PageSpeed Insights 团队在 PSI 中添加了重新分析提示。对于重定向到新网址的网站,系统会提示您针对着陆页网址重新运行报告,以便更全面地了解实际效果。

显示网址重定向和“重新分析”按钮的 PSI 界面

新版 Search Console 速度报告中的 CrUX

在 Chrome 开发者大会召开前一周,Search Console 推出了新的速度报告。该报告使用 Chrome 用户体验报告中的数据,帮助网站所有者发现潜在的用户体验问题。速度报告会自动将速度相似的网址分组,归入“快”“中等”和“慢”三个类别,并帮助您确定针对具体问题的优先级,从而有条不紊地着手提升网页性能。

Search Console 速度报告。

Web Almanac

Dion Almaer 在 2019 年 CDS 大会上演讲 Web Almanac。

在开场主旨演讲中,我们宣布推出网络年鉴,这是一个年度项目,将网络状况的统计信息和趋势与网络社区的专业知识相结合。85 位贡献者(包括 Chrome 开发者和 Web 社区成员)已自愿参与该项目,该项目分析了 Web 的 20 个核心方面,涵盖了网站的构建、交付和体验方式。开始探索 Web 年鉴,详细了解 Web 上的性能JavaScript第三方代码的状态。

了解详情

如需详细了解 Chrome 开发者峰会上的性能工具更新,请观看“速度工具演变”演讲: