首次输入延迟 (FID)

浏览器支持

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 89.
  • Safari: not supported.

来源

我们都知道留下良好第一印象的重要性。在结识新朋友时如此,在 Web 上构建体验时也是如此。

在 Web 上,良好的第一印象可以决定用户成为忠实用户,还是直接离开并且永不回头。问题是,什么能构成良好的印象?以及如何衡量您可能给用户留下的印象类型?

在 Web 上,第一印象可以采取多种不同的形式——我们对网站的设计和视觉吸引力有第一印象,也对其速度和响应能力有第一印象。

虽然使用 Web API 很难衡量用户对网站设计的喜爱程度,但衡量其速度和响应能力却并非难事!

用户对您的网站加载速度的第一印象可以通过首次内容绘制 (FCP)来衡量。但是,您的网站将像素绘制到屏幕的速度只是故事的一部分。同样重要的是,当用户尝试与这些像素互动时,您的网站的响应速度有多快!

首次输入延迟 (FID) 指标有助于衡量用户对您的网站互动性和响应能力的第一印象。

什么是 FID?

FID 衡量的是从用户首次与页面互动(即,当他们点击链接、点击按钮或使用自定义的、由 JavaScript 驱动的控件时)到浏览器实际能够开始处理事件处理程序以响应此互动的时间。

良好的 FID 分数是多少?

为了提供良好的用户体验,网站应力求首次输入延迟为 100 毫秒 或更短。为了确保您为大多数用户达到此目标,一个好的衡量阈值是跨移动设备和桌面设备细分的页面加载的 第 75 百分位数

Good FID values are 2.5 seconds or less, poor values are greater than 4.0 seconds, and anything in between needs improvement

FID 详细信息

作为编写代码来响应事件的开发者,我们常常假设我们的代码会立即运行——事件一发生就立即运行。但作为用户,我们都经常遇到相反的情况——我们在手机上加载了一个网页,尝试与之互动,然后当什么都没发生时感到沮丧。

通常,输入延迟(也称为输入延迟时间)的发生是因为浏览器的主线程正忙于做其他事情,因此它无法(尚未)响应用户。可能发生这种情况的一个常见原因是浏览器正忙于解析和执行您的应用加载的大型 JavaScript 文件。当它这样做时,它无法运行任何事件侦听器,因为正在加载的 JavaScript 可能会告诉它做其他事情。

考虑以下典型网页加载的时间线

Example page load trace

上面的可视化效果显示了一个页面,该页面正在为资源(最可能是 CSS 和 JS 文件)发出几个网络请求,并且——在这些资源下载完成后——它们将在主线程上进行处理。

这导致主线程短暂繁忙的时期,这由米色的 任务 块指示。

较长的首次输入延迟通常发生在首次内容绘制 (FCP)可交互时间 (TTI) 之间,因为页面已呈现其部分内容,但尚不稳定地可交互。为了说明这种情况如何发生,FCP 和 TTI 已添加到时间线中

Example page load trace with FCP and TTI

您可能已经注意到,在 FCP 和 TTI 之间有相当长的时间(包括三个 长任务),如果用户在此期间尝试与页面互动(例如,通过点击链接),则在收到点击和主线程能够响应之间会存在延迟。

考虑一下,如果用户尝试在最长任务开始附近与页面互动,会发生什么情况

Example page load trace with FCP, TTI, and FID

由于输入发生在浏览器正在运行任务的过程中,因此它必须等到任务完成才能响应输入。它必须等待的时间是此用户在此页面上的 FID 值。

如果互动没有事件侦听器怎么办?

FID 衡量的是接收到输入事件的时间与主线程下次空闲的时间之间的差值。这意味着即使在 未注册事件侦听器的情况下 也会测量 FID。原因是许多用户互动不需要事件侦听器,但确实需要主线程空闲才能运行。

例如,以下所有 HTML 元素都需要等待主线程上正在进行的任务完成,然后才能响应用户互动

  • 文本字段、复选框和单选按钮 (<input>, <textarea>)
  • 选择下拉列表 (<select>)
  • 链接 (<a>)

为什么只考虑首次输入?

虽然任何输入的延迟都可能导致糟糕的用户体验,但我们主要建议衡量首次输入延迟,原因如下:

  • 首次输入延迟将是用户对您的网站响应速度的第一印象,而第一印象对于塑造我们对网站质量和可靠性的整体印象至关重要。
  • 我们今天在 Web 上看到的最大互动性问题发生在页面加载期间。因此,我们认为最初专注于改进网站的首次用户互动将对提高 Web 的整体互动性产生最大影响。
  • 针对网站应如何修复高首次输入延迟的推荐解决方案(代码拆分、预先加载更少的 JavaScript 等)不一定是修复页面加载后输入延迟缓慢的相同解决方案。通过分离这些指标,我们将能够为 Web 开发者提供更具体的性能指南。

什么算作首次输入?

FID 是一种衡量页面在加载期间响应速度的指标。因此,它仅关注来自离散操作(如点击、点击和按键)的输入事件。

其他互动,如滚动和缩放,是连续操作,并且具有完全不同的性能约束(此外,浏览器通常能够通过在单独的线程上运行它们来隐藏其延迟)。

换句话说,FID 关注 RAIL 性能模型 中的 R(响应速度),而滚动和缩放更与 A(动画)相关,它们的性能质量应单独评估。

如果用户从不与您的网站互动怎么办?

并非所有用户每次访问您的网站都会进行互动。并非所有互动都与 FID 相关(如上一节所述)。此外,某些用户的首次互动会发生在糟糕的时间(当主线程长时间繁忙时),而某些用户的首次互动会发生在良好的时间(当主线程完全空闲时)。

这意味着某些用户将没有 FID 值,某些用户将具有较低的 FID 值,而某些用户可能会具有较高的 FID 值。

您跟踪、报告和分析 FID 的方式可能与您可能习惯的其他指标大不相同。下一节将解释如何最好地做到这一点。

为什么只考虑输入延迟?

如上所述,FID 仅衡量事件处理中的“延迟”。它不衡量事件处理的总持续时间本身,也不衡量浏览器在运行事件处理程序后更新 UI 所需的时间。

即使此时间对用户很重要并且确实会影响体验,但它未包含在此指标中,因为这样做可能会激励开发者添加实际上使体验更糟的解决方法——也就是说,他们可以将事件处理程序逻辑包装在异步回调中(通过 setTimeout()requestAnimationFrame())以便将其与与事件关联的任务分离。结果将是指标得分的提高,但用户感知的响应速度会变慢。

但是,虽然 FID 仅衡量事件延迟的“延迟”部分,但想要跟踪更多事件生命周期的开发者可以使用 Event Timing API。有关更多详细信息,请参阅 自定义指标 指南。

如何衡量 FID

FID 是一种只能 在现场 测量的指标,因为它需要真实用户与您的页面互动。您可以使用以下工具衡量 FID。

现场工具

在 JavaScript 中衡量 FID

要在 JavaScript 中衡量 FID,您可以使用 Event Timing API。以下示例演示了如何创建 PerformanceObserver,该观察器侦听 first-input 条目并将它们记录到控制台

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    const delay = entry.processingStart - entry.startTime;
    console.log('FID candidate:', delay, entry);
  }
}).observe({type: 'first-input', buffered: true});

在上面的示例中,first-input 条目的延迟值是通过取条目的 startTimeprocessingStart 时间戳之间的差值来衡量的。在大多数情况下,这将是 FID 值;但是,并非所有 first-input 条目都适用于衡量 FID。

以下部分列出了 API 报告的内容与指标计算方式之间的差异。

指标和 API 之间的差异

  • API 将为在后台选项卡中加载的页面分派 first-input 条目,但在计算 FID 时应忽略这些页面。
  • 如果页面在首次输入发生之前被置于后台,API 也会分派 first-input 条目,但在计算 FID 时也应忽略这些页面(只有当页面在整个过程中都处于前台时,输入才会被考虑)。
  • 当页面从后退/前进缓存恢复时,API 不会报告 first-input 条目,但应在这些情况下衡量 FID,因为用户将其体验为不同的页面访问。
  • API 不会报告在 iframe 中发生的输入,但指标会报告,因为它们是页面用户体验的一部分。这可以显示为 CrUX 和 RUM 之间的差异。为了正确衡量 FID,您应该考虑它们。子帧可以使用 API 将它们的 first-input 条目报告给父帧以进行聚合。

分析和报告 FID 数据

由于 FID 值的预期差异,因此在报告 FID 时,至关重要的是要查看值的分布并关注较高的百分位数。

虽然所有核心 Web 指标阈值的百分位数的选择是第 75 百分位数,但对于 FID 而言,我们仍然强烈建议查看第 95-99 百分位数,因为这些百分位数将对应于用户在您的网站上遇到的特别糟糕的首次体验。并且它将向您展示最需要改进的领域。

即使您按设备类别或类型细分报告,也是如此。例如,如果您为桌面设备和移动设备运行单独的报告,那么您最关心的桌面设备上的 FID 值应该是桌面用户的第 95-99 百分位数,而您最关心的移动设备上的 FID 值应该是移动用户的第 95-99 百分位数。

如何改进 FID

关于优化 FID 的完整指南可帮助您了解改进此指标的技术。

更新日志

有时,在用于衡量指标的 API 中会发现错误,有时在指标本身的定义中也会发现错误。因此,有时必须进行更改,并且这些更改可能会在您的内部报告和仪表板中显示为改进或回归。

为了帮助您管理这一点,对此类指标的实现或定义的所有更改都将在此更新日志中公开。

如果您对这些指标有反馈,您可以在 web-vitals-feedback Google 网上论坛中提供。