谷歌衡量网页核心指标的工具

您最喜欢的开发人员工具现在可以衡量Core Web Vitals。

最近宣布的Web Vitals计划提供了有关质量信号的统一指导,这对于所有站点在网络上提供出色的用户体验至关重要。我们很高兴地宣布,所有面向Web开发人员的Google流行工具现在都支持测量Core Web Vitals,从而帮助您更轻松地诊断和修复用户体验问题。其中包括Lighthouse,PageSpeed Insights,Chrome DevTools,Search Console,web.dev的度量工具,Web Vitals Chrome扩展和一个新的(!)Chrome UX Report API。

现在,随着Google搜索将Core Web Vitals作为评估页面体验的基础,这些指标应尽可能可用且可操作,这一点很重要。

关键术语:实验室工具可洞悉潜在用户将如何体验您的网站,并提供可再现的调试结果。现场工具可以洞悉您的真实用户如何访问您的网站;这种类型的测量通常称为真实用户监视(RUM)。每个实验室或现场工具都为优化用户体验提供了独特的价值。

要开始使用Core Web Vitals优化用户体验的旅程,请尝试以下工作流程:

  • 使用Search Console的新“核心网络生命力”报告来识别需要关注的页面组(基于字段数据)。
  • 确定了需要处理的页面后,请使用PageSpeed Insights(由Lighthouse和Chrome UX Report提供支持)来诊断页面上的实验室和现场问题。您可以通过Search Console获得PageSpeed Insights(PSI),也可以直接在PSI上输入网址。
  • 准备好在实验室中本地优化您的网站了吗?使用Lighthouse和Chrome DevTools测量核心网络生命,并获得切实可行的指导以解决问题。Web Vitals Chrome扩展程序可以为您提供台式机指标的实时视图。
  • 是否需要Core Web Vitals的自定义仪表板?使用更新的CrUX仪表板或新的Chrome UX报告API来获取字段数据,或使用PageSpeed Insights API来获取实验室数据。
  • 寻找指导?web.dev/measure可以衡量您的页面,并使用PSI数据为您显示优先级优化的一组指南和代码实验室。
  • 最后,在将更改部署到生产之前,对请求请求使用Lighthouse CI,以确保Core Web Vitals中没有任何回归。

通过该介绍,让我们深入了解每种工具的特定更新!

Lighthouse

Lighthouse是一个自动的网站审核工具,可以帮助开发人员诊断问题并确定机会,以改善其网站的用户体验。它测量了实验室环境中用户体验质量的多个维度,包括性能和可访问性。Lighthouse的最新版本(2020年5月中旬发布的6.0版)包括其他审核,新指标和新组成的性能评分。

Lighthouse 6.0向该报告引入了三个新指标。这些新指标中的两个- 最大内容绘画(LCP)和累积版式移位(CLS)-是Core Web Vital的实验室实现,可为优化用户体验提供重要的诊断信息。考虑到它们对评估用户体验的重要性,新指标不仅会进行测量并包含在报告中,而且还会在计算性能得分时考虑这些因素。

Lighthouse中包含的第三个新指标- 总阻止时间(TBT)-与另一个“核心网络生命力”指标字段“ 第一输入延迟(FID)” 指标紧密相关。遵循Lighthouse报告中提供的建议并根据您的分数进行优化,可以为您的用户提供最佳体验。

Lighthouse强大的所有产品都进行了更新以反映最新版本,包括Lighthouse CI,它使您能够在合并和部署拉取请求之前轻松评估您的核心Web Vital。

PageSpeed Insights 

PageSpeed Insights(PSI)报告移动和台式设备上页面的实验室和现场性能。该工具概述了现实世界中用户如何体验页面(由Chrome UX报告提供支持),并提供了一系列有关网站所有者如何改善页面体验的可行建议(由Lighthouse提供)。

PageSpeed Insights和PageSpeed Insights API也已升级,可以在后台使用Lighthouse 6.0,并且现在支持在报告的实验室部分和现场部分中测量Core Web Vital!如下所示,Core Web Vitals用蓝丝带注释。

虽然搜索控制台提供的网站所有者的需要注意的版面组了很好的概述,PSI可以帮助识别每页的机会,以提高网页的体验。在PSI中,您可以在报告顶部清楚地查看您的页面是否满足所有核心Web Vital良好体验的阈值,以通过Core Web Vitals评估或未通过Core Web Vitals评估表示

CrUX

该铬UX报告(症结)是真实的用户体验数据的数以百万计的网站上公开的数据集。它测量所有核心网络生命的现场版本。与实验室数据不同,CrUX数据来自现场的选定用户。利用这些数据,开发人员能够了解自己或什至竞争对手网站上的实际用户体验分布。即使您的站点上没有RUM,CrUX也可以提供一种快速简便的方法来评估您的核心网络生命。BigQuery上的CrUX数据集包含所有Core Web Vital的细粒度性能数据,并且在原始级别的每月快照中可用。

真正了解您的网站为用户带来的效果的唯一方法是,在这些用户正在加载并与之交互时,实际评估其在现场的性能。这种类型的度量通常称为“真实用户监视”,或简称为RUM。即使您的站点上没有RUM,CrUX也可以提供一种快速简便的方法来评估您的核心网络生命。

CrUX API简介

今天,我们很高兴地宣布CrUX API,这是一种快速,免费的方式,可以轻松地将您的开发工作流程与原始和URL级别的质量度量集成到以下字段指标中:

  • 最大的满意涂料
  • 累积版式移位
  • 第一次输入延迟
  • 首次满意涂料

开发人员可以查询来源或URL,并按不同的形式将结果细分。该API每天更新一次,并汇总前28天的数据价值(不同于BigQuery数据集(每月汇总))。该API还具有与其他API PageSpeed Insights API相同的宽松公共API配额(每天25,000个请求)。

以下是使用CrUX API 的演示,以可视化的形式展示了Core Web Vitals指标,包括良好需要改进较差的分布

在将来的版本中,我们计划扩展API以允许访问其他CrUX数据集的维度和指标。

改进的CrUX仪表板

新近重新设计的CrUX仪表板使您可以轻松跟踪随时间变化的源性能,现在,您可以使用它来监视所有Core Web Vitals指标的分布。要开始使用仪表板,请查看我们关于web.dev 的教程。

Chrome DevTools性能面板

体验部分中的调试版式转变事件

Chrome DevTools的“ 性能”面板上有一个新的“ 体验”部分,可以帮助您检测到意外的布局偏移。这有助于查找和修复页面上的视觉不稳定问题,这些问题会导致累积布局转移。

选择一个版式移位以在“ 摘要”选项卡中查看其详细信息。要可视化本身发生移位的位置,请将鼠标悬停在“ 从… 移至”和“ 移至”字段上。

在页脚中使用总阻止时间调试交互准备情况

可以在实验室工具中测量总阻塞时间(TBT)指标,它是“首次输入延迟”的出色替代。TBT测量主内容被阻塞足够长的时间以防止输入响应时,在第一个内容油漆(FCP)和交互时间(TTI)之间的总时间。在实验室中改善TBT的性能优化应改善现场的FID。

在衡量页面性能时,“ TBT”现在显示在“ Chrome DevTools 性能”面板的页脚中:

  1. Control+Shift+J(或Command+Option+J在Mac上)按打开DevTools。
  2. 单击性能选项卡。
  3. 点击记录
  4. 手动重新加载页面。
  5. 等待页面加载,然后停止记录。

Search Console

Search Console中新的Core Web Vitals报告可帮助您基于CrUX的真实(现场)数据,确定网站上需要关注的页面组。URL性能按状态,指标类型和URL组(相似网页的组)分组。

该报告基于三个核心Web Vitals指标:LCP,FID和CLS。如果网址没有针对这些指标的最少报告数据,则会在报告中将其省略。尝试使用新报告以全面了解您的来源绩效。

一旦确定了与Core Web Vitals相关的问题的页面类型,就可以使用PageSpeed Insights了解有关代表性页面的特定优化建议。

web.dev

web.dev/measure允许您评估一段时间内页面的性能,并提供有关如何改进的优先指南和代码实验室列表。它的测量由PageSpeed Insights支持。该度量工具现在还支持Core Web Vitals度量标准,如下所示:

Web Vitals extension

Web Vitals扩展实时测量(台式)Google Chrome的三个Core Web Vitals指标。这有助于在开发流程中及早发现问题,并作为诊断工具在您浏览Web时评估Core Web Vitals的性能。

现在可以从Chrome网上应用店安装该扩展程序!我们希望您觉得它有用。我们欢迎为改进它而做出的任何贡献,以及对项目GitHub存储库的反馈。

接下来您可以做什么:

  • 在DevTools中使用Lighthouse可以优化您的用户体验,并确保您可以在现场成功使用Core Web Vitals。
  • 使用PageSpeed Insights可以比较您的实验室和现场核心Web Vitals的性能。
  • 试用新的Chrome用户体验报告API,以轻松访问您的来源和URL在过去28天内针对Core Web Vital的表现。
  • 使用“ DevTools 性能”面板中的“ 体验”部分和页脚可以深入研究并针对特定的Core Web Vital 进行调试。
  • 使用Search Console的“核心网络生命力”报告可汇总您的血统在现场的表现。
  • 使用Web Vitals Extension可以实时跟踪核心Web Vitals的页面性能。