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

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

Elizabeth Sweeny
Elizabeth Sweeny

在 Chrome 开发者峰会上,我和 Paul Irish 宣布了对 Lighthouse 的更新:Lighthouse CI、新的性能得分公式等。除了 Lighthouse 的重大新闻外,我们还展示了激动人心的性能工具开发,包括新的性能指标、PageSpeed Insights 和 Chrome 用户体验报告 (CrUX) 的更新,以及《Web 年历》对 Web 生态系统的分析得出的数据洞见。

新的效果指标

衡量用户体验的细微差别是量化它对利润的影响并跟踪改进和衰退情况的关键。随着时间的推移,新的指标不断发展,可以捕捉这些细微差别,并填补衡量用户体验的不足。指标案例中最新增加的是两个字段指标 - Largest Contentful Paint (LCP)Cumulative Layout Shift (CLS),这两个指标正在 W3C Web Performance 工作小组中孵化,此外还有一个新的实验指标 - Total Blocking Time (TBT)

Largest Contentful Paint (LCP)

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

在 Largest Contentful Paint 之前,我们会提供首次有效渲染时间 (FMP)速度指数 (SI),以在初始渲染之后捕获加载体验,但这些指标较为复杂,通常无法确定页面主要内容的加载时间。研究表明,仅关注页面上最大元素的呈现时间就能更好地表示页面主要内容的加载时间。

Lighthouse 报告中即将推出新的 Largest Contentful Paint 指标,在此期间,您可以在 JavaScript 中衡量 LCP

Total Blocking Time (TBT)

总阻塞时间 (TBT) 指标用于测量从首次内容绘制 (FCP)可交互时间 (TTI) 之间所用的总时间,其中主线程处于阻塞状态的时间足够长,防止输入响应速度。

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

表示一项 150 毫秒的任务(阻塞时间为 100 毫秒)的图表。

一个页面的总阻塞时间是指在 FCP 和 TTI 之间发生的所有长任务的阻塞时间总和。

一个示意图,表示 5 个任务,总阻塞时间为 60 毫秒,主线程总时间是 270 毫秒。

虽然“可交互时间”可以很好地识别主线程在加载后期平静时的时间,但“总阻塞时间”旨在量化主线程在整个加载过程中的紧张程度。这样,TTI 和 TBT 就能相互补充并取得平衡。

Cumulative Layout Shift (CLS)

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

一个抓屏,说明了布局不稳定会如何对用户产生负面影响。

请参阅 Cumulative Layout Shift 的详细指南,了解它的计算方式和衡量方法。

新的 Lighthouse 性能得分公式即将不再强调 FMP 和 FCI,并纳入 LCP、TBT 和 CLS 这三个新指标,因为它们能够更好地捕获网页何时方便使用的时间。

在 Lighthouse v6 中,First Contentful Paint、速度指数和 Largest Contentful Paint 是主要的加载性能指标;可交互时间、First Input Delay、Max Potential First Input Delay 和 Total Blocking Time 是主要的互动指标;Cumulative Layout Shift 是主要的可预测性指标。

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

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

在过去的一年里,我们一直在通过 Chrome 用户体验 (CrUX) 数据分析现场的 Web 性能。根据从这些数据中得出的见解,我们重新评估了我们用来将网站实际性能标记为“慢”、“中等”或“快”的阈值。

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

为了对网站进行总体评估,PageSpeed Insights (PSI) 会使用字段数据总分布的某个百分位作为该网站的黄金数;之前使用的阈值是 First Contentful Paint 的第 90 百分位,First Contentful Paint (FID) 的第 95 百分位。

例如,如果某个网站的 FCP 分布为 50% 快、30% 和慢 20%,则第 90 百分位的 FCP 位于“慢速”部分,因此该网站的总体字段得分也比较慢。

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

指标 总体百分位 快速(毫秒) 适中(毫秒) 慢(毫秒)
FCP 第 75 个百分位 1000 1000-3000 3000+
FID 第 95 百分位 100 100-300 300+

例如,现在,如果某个网站的 FCP 分布速度为 50% 快、30% 中、慢,则第 75 百分位的 FCP 位于“中等”部分中,因此该网站的总体字段得分为中等。

PageSpeed Insights 中的规范网址重定向

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

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

全新 Search Console 速度报告中的 CrUX

Search Console 在 Chrome 开发者峰会前一周发布了新的速度报告。它使用 Chrome 用户体验报告中的数据来帮助网站所有者发现潜在的用户体验问题。速度报告会自动将包含类似网址组的类似网址分入“快速”“中等”和“慢速”分桶,并有助于确定特定问题的性能改进的优先级。

Search Console 速度报告。

网络年鉴

Dion Almaer 在 CDS 2019 上演示《网络年鉴》。

在开场主旨演讲中,我们宣布推出网络年鉴,这是一个年度项目,旨在将与网络状况相关的统计数据和趋势与网络社区的专业知识相结合。85 名贡献者,由 Chrome 开发者和网络社区组成,自愿参与开展该项目。该项目分析了有关网络的 20 个核心方面,该方面分析了网站的构建、交付和体验方式。开始浏览网页年鉴,详细了解网络上的性能JavaScript第三方代码的状态。

了解详情

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