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

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

Rick Viscomi

优化型 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。