试验 Chrome 用户体验报告中的 First Input Delay

<ph type="x-smartling-placeholder">

优化型 Chrome 用户体验报告 帮助网络社区理解真实世界的 。到目前为止,我们的重点一直是绘制和网页加载指标 例如 First Contentful Paint (FCP) 和 Onload (OL),它们都帮助我们 了解网站给用户带来的视觉效果。首先, 2018 年 6 月发布,我们正在试验一项以用户为中心的新指标, 侧重于网页的互动性First Input Delay (FID)。这项新指标有助于我们更好地了解 与用户输入内容的关系

FID 最近作为 源试用、 这意味着网站可以选择试用这一新的网络平台 功能。同样,FID 也会作为 实验指标,也就是说在实验期间 一个单独的“实验性版本”中的源试用命名空间。

如何衡量 FID

那么,FID 到底是什么呢?下面介绍了 First Input Delay 公告博文:

First Input Delay (FID) 用于衡量从用户首次互动开始的时间 (例如,当他们点击链接、点按按钮或使用自定义 JavaScript 支持的控件)的时间延长至浏览器能够 响应该互动。

。 <ph type="x-smartling-placeholder">
</ph>
动画演示:繁忙的主线程如何将响应延迟到 用户互动

这就好比测量从有人按门铃到他们接听电话所需的时间 。造成这种情况的原因有很多。例如: 或许此人离门口较远,也可能是他们行动不快。 同样,网页可能正忙于处理其他工作,或用户的设备 运行缓慢。

在 Chrome 用户体验报告中探索 FID

凭借来自数百万个原点一个月的 FID 数据,已经有大量 有待发现的有趣数据洞见我们来看几个查询 演示了如何从 BigQuery 上的 Chrome 用户体验报告中提取这些数据洞见。

首先,我们查询 developers.google.com 的快速 FID 体验所占的百分比。 我们可以将快速体验定义为 FID 低于 100 毫秒的体验。 根据 RAIL 建议, 如果延迟时间在 100 毫秒或更短时间内,用户应能感觉到是瞬时完成的。

SELECT
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid
WHERE
  origin = 'https://developers.google.com'

结果表明,此来源上 95% 的 FID 体验被视为 瞬间完成。听起来不错,但是与所有源站相比 ?

SELECT
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid

此查询的结果表明,84% 的 FID 体验都不到 100 毫秒。 所以 developers.google.com 的收入还是高于平均水平的。

接下来,我们试着细分一下这些数据,看看 桌面设备与移动设备上的快速 FID 比率。一项假设是 设备的 FID 值较慢,这可能是因为 台式机。如果 CPU 不太强大,使用时间可能会延长 并导致 FID 体验变慢。

SELECT
  form_factor.name AS form_factor,
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid
GROUP BY
  form_factor
form_factor fast_fid
桌面设备 96.02%
电话 79.90%
平板电脑 76.48%

结果证实了我们的假设。桌面设备的累计密度更高 的快速 FID 体验优于手机和平板电脑设备。了解原因 存在这些差异,例如,CPU 性能,则需要在外部进行 A/B 测试 Chrome 用户体验报告的适用范围。

现在,我们已经了解了如何确定源站是否具有快速 FID 体验, 我们来看几个表现非常出色的来源

示例 1:http://secretlycanadian.com

Secretlycanadian.com 的 WebPageTest 幻灯影片

此来源在 98% 的活跃度 100 毫秒以内的 FID 体验。他们是怎么做到的?分析其内置功能 WebPageTest、 可以看到,这是一个包含大量图片的 WordPress 网页 在我们的实验室机器上执行大约 500 毫秒的 JavaScript。这并不是 HTTP Archive 记录大量 JavaScript, 也就是将此页面放在第 28 百分位

Secretlycanadian.com 的 AWebPageTest 广告瀑布流

跨越 2.7 到 3.0 秒的粉色条是 Parse HTML 阶段。在此期间 网页无互动性并且显示不完整的时间(请参阅“3.0 秒” )。之后,任何需要处理的耗时较长的任务 以确保主线程处于静止状态粉色线条 第 11 行展示了 JavaScript 如何快速分散。

示例 2:https://www.wtfast.com

wtFast.com 的 WebPageTest 幻灯影片

此来源的即时 FID 为 96% 体验。它会加载 267 KB 的 JavaScript(HTTP 归档中的第 38 百分位)和 在实验室机器上处理 900 毫秒。幻灯影片显示 绘制背景大约需要 5 秒,绘制大约需要 2 秒 内容。

wtFast.com 的 WebPageTest 广告瀑布流

搜索结果最有趣的一点是什么 在主线程处于忙碌状态时,什么交互式元素甚至不可见 介于 3 到 5 秒之间。事实上,此网页的 FCP 速度缓慢 可以提高 FID。这个例子很好地说明了使用许多指标的重要性。 用于表示用户体验

开始浏览

您可以观看本周的一集网络现状,详细了解 FID:

在 Chrome 用户体验报告中提供 FID 有助于我们建立基准 互动体验利用以下基线,我们可以观察其在 或对各个来源进行基准测试。如果您想开始 在自己网站的现场测量中收集 FID,注册该源 请访问 bit.ly/event-timing-ot 进行试用。 然后选择“事件计时”功能当然了,不妨开始探索 数据集,获取有关网络互动状态的有趣数据洞见。 这仍是一个实验性指标,欢迎您向我们提供反馈意见并与我们分享 请在 Chrome 用户体验报告论坛中发表您的分析 或 Twitter 上的 @ChromeUXReport