什么是第一输入延迟(First Input Delay)

我们都知道给人留下良好的第一印象是多么重要。这对于结识新朋友非常重要，而且在网络上构建体验时也很重要。

在网络上，良好的第一印象可以使某人成为忠实用户或他们离开并永不回头。问题是，是什么造成了良好的印象，以及如何衡量您可能对用户产生何种印象？

在网络上，第一印象可以采用许多不同的形式 - 我们对网站的设计和视觉吸引力有第一印象，以及对其速度和响应性的第一印象。

虽然使用Web API很难测量用户对网站设计的喜好程度，但测量其速度和响应能力并非如此！

用户可以使用 First Paint（FP）和 First Contentful Paint（FCP）等指标来衡量用户对网站加载速度的第一印象。但是，您的网站在屏幕上绘制像素的速度只是故事的一部分。同样重要的是当用户尝试与这些像素进行互动时，您网站的响应能力如何！

为了帮助衡量用户对网站交互性和响应能力的第一印象，我们引入了一个名为First Input Delay的新指标。

什么是第一次输入延迟？

第一输入延迟（FID）测量用户首次与您的站点交互时的时间（即，当他们单击链接，点击按钮或使用自定义的JavaScript驱动控件时）到浏览器实际能够的时间回应这种互动。

作为编写响应事件的代码的开发人员，我们经常假设我们的代码将在事件发生后立即运行。但作为用户，我们经常遇到相反的情况 - 我们在手机上加载了一个网页，试图与它进行交互，然后在没有任何反应时感到沮丧。

通常，输入延迟（或输入延迟）发生是因为浏览器的主线程忙于执行其他操作，因此它无法（尚未）响应用户。可能发生这种情况的一个常见原因是浏览器正忙于解析并执行应用程序加载的大型JavaScript文件。虽然它正在这样做，它不能运行任何事件监听器，因为它加载的JavaScript可能会告诉它做其他事情。

请考虑典型网页加载的以下时间表：

页面加载跟踪

上面的图表显示了一个页面，该页面正在对资源进行一些网络请求（很可能是CSS和JS文件），并且在这些资源完成下载后，它们将在主线程上进行处理。这导致主线程暂时忙碌的时间段（由图表上的红色表示）。

现在让我们添加另外两个指标：我在上面提到的 First Contentful Paint（FCP）和 Time to Interactive（TTI），你可能在 Lighthouse 或 WebPageTest 等工具中看到过：

使用FCP和TTI进行页面加载跟踪

如您所见，FCP测量从导航开始到浏览器将内容绘制到屏幕的时间（在这种情况下，直到下载和处理样式表之后）。并且TTI测量从导航开始到加载页面资源并且主线程空闲（至少5秒）的时间。

但是您可能已经注意到，内容首次绘制到屏幕之间以及浏览器的主线程始终处于空闲状态并因此能够快速响应用户输入之间存在相当长的时间。

如果用户在此期间尝试与页面交互（例如，单击链接），则在点击发生和主线程能够响应之间可能会有延迟。

让我们将FID添加到图表中，这样您就可以看到它的外观：

使用FCP，TTI和FID的页面加载跟踪

这里，浏览器在主线程忙时接收输入，因此它必须等到它不忙于响应输入。它必须等待的时间是此页面上此用户的FID值。

注意： 在此示例中，用户恰好在主线程最繁忙时段的开头与页面进行交互。如果用户刚刚（在闲置期间）与页面进行了交互，则浏览器可能立即做出响应。输入延迟的这种差异强调了在报告度量时查看FID值分布的重要性。您可以在下面关于分析和报告FID数据的部分中阅读更多相关信息。

为什么我们需要另一个交互性指标？

交互时间（TTI）是衡量应用加载所需时间并能够快速响应用户交互的指标，而第一输入延迟（FID）是衡量用户与用户交互时遇到的延迟的指标页面虽然尚未交互。

那么为什么我们需要两个衡量类似事物的指标呢？答案是两个指标都很重要，但它们在不同的背景下很重要。

TTI是一种可以在没有任何用户在场的情况下进行测量的度量标准，这意味着它非常适合像Lighthouse或WebPageTest这样的实验室环境。不幸的是，实验室指标本质上无法衡量真实的用户痛苦。

另一方面，FID直接表示用户痛苦 - 每个FID测量是用户必须等待浏览器响应事件的实例。当等待时间很长时，用户会感到沮丧并经常离开。

出于这些原因，我们建议使用这两个指标，但我们建议您在实验室中测量TTI，并使用分析工具在野外测量FID。

事实上，我们计划在Google上使用我们的性能工具。我们的实验室工具如Lighthouse和WebPageTest已经报告了TTI，我们正在探索将FID添加到我们的真实用户监控（RUM）工具，如 Chrome用户体验报告（CrUX）。

此外，虽然这些是不同的指标，但我们的研究发现它们彼此关联良好，这意味着您为提高TTI所做的任何工作都可能会改善您的FID。

注意： 虽然TTI和FID确实关联良好，但可能存在具有良好TTI分数的网站可能具有不良FID分数的情况（反之亦然）。例如，站点可能具有非常高的TTI，但如果大多数用户在完全加载之前不尝试与站点交互，则这些用户将不会遇到高TTI的痛苦。另一方面，站点可能具有相对较低的TTI，但如果站点很早就看起来是交互式的，则用户可能会尝试与其进行交互，但却发现没有任何反应。这就是为什么我们建议优化两个指标（以及使用实验室和RUM工具）。

为什么只考虑第一个输入？

虽然任何输入的延迟都可能导致糟糕的用户体验，但我们主要建议您测量第一个输入延迟，原因如下：

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

什么算作第一次输入？

第一输入延迟是衡量页面在加载期间的响应性的度量。因此，它仅关注来自点击，点按和按键等离散操作的输入事件。

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

换句话说，FID侧重于 RAIL性能模型中的R（响应性），而滚动和缩放与A（动画）更相关，并且应该分别评估它们的性能质量。

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

并非所有用户每次访问时都会与您的网站进行互动。并非所有交互都与FID相关（如上一节所述）。此外，一些用户的第一次交互将处于不良时期（当主线程忙于一段延长的时间时），并且一些用户的第一次交互将处于良好的时间（当主线程完全空闲时）。

这意味着一些用户将没有FID值，一些用户将具有低FID值，并且一些用户可能具有高FID值。

如何跟踪，报告和分析FID可能与您可能习惯的其他指标有很大不同。下一节将介绍如何做到最好。

在JavaScript中跟踪FID

今天所有浏览器都可以用JavaScript测量FID。为了方便起见，我们甚至创建了一个JavaScript库，可以为您跟踪和计算它： GoogleChromeLabs / first-input-delay 。

有关完整用法和安装说明，请参阅库的自述文件，但要点是：

在 <head> 文档中包含一个缩小的代码片段，用于添加相关的事件侦听器（必须尽早添加此代码，否则您可能会错过事件）。
在应用程序代码中，注册一个回调，一旦检测到第一个相关输入，就会使用FID值（以及事件本身）调用该回调。

获得FID值后，您可以将其发送到您使用的任何分析工具。例如，使用Google Analytics，您的代码可能如下所示：

// The perfMetrics object is created by the code that goes in <head>.
perfMetrics.onFirstInputDelay(function(delay, evt)  {
  ga('send',  'event',  {
    eventCategory:  'Perf Metrics',
    eventAction:  'first-input-delay',
    eventLabel: evt.type, // Event values must be an integer.
    eventValue:  Math.round(delay), // Exclude this event from bounce rate calculations.
    nonInteraction:  true, });
});

分析和报告FID数据

由于FID值的预期变化，在报告FID时，您需要查看值的分布并关注较高的百分位数，这一点至关重要。事实上，我们建议专注于第99个百分点，因为这将对应于用户对您网站的首次体验。它将向您展示需要最大改进的领域。

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

遗憾的是，许多分析工具不支持在没有自定义配置和手动数据处理/分析的情况下按特定分位数报告数据。

例如，可以在Google Analytics中报告特定的分位数，但需要一些额外的工作。在我的文章我在我构建的每个网站上使用的Google Analytics设置中，我有一个关于设置命中级维度的部分。当您执行此操作时，您可以解锁按个别事件值过滤和分段以及创建分布的功能，这样您就可以计算出第99个百分位数。如果您想使用Google Analytics跟踪FID，我肯定会推荐这种方法。

谁应该跟踪FID？

FID是任何网站都可以从跟踪中受益的指标，但我认为有几种类型的网站可以通过了解用户实际遇到的首次输入延迟类型而特别受益：

服务器端呈现（SSR）JavaScript应用程序

将页面的服务器呈现版本发送到客户端的站点以及在页面交互之前需要加载，解析和执行的大量JavaScript特别容易受到高FID值的影响。

原因是因为它们 看起来 互动的时间和它们实际上是交互式的时间往往很大，特别是在需要更长时间来解析和执行JavaScript的低端设备上。

为了清楚起见，构建一个服务器端呈现的应用程序也可以快速实现交互。 SSR本身并不是一个糟糕的模式; 当开发人员优化快速第一次绘制然后忽略交互性时，就会出现问题。这是跟踪FID特别令人大开眼界的地方！

包含大量第三方iframe的网站

第三方广告和社交窗口小部件的历史不是特别考虑其主页。他们倾向于在主机页面的主线程上运行昂贵的DOM操作，而不考虑它将如何影响用户。

此外，第三方iframe可以随时更改其代码，因此即使您的应用程序代码没有更改，也可能发生回归。在生产站点上跟踪FID可以提醒您在发布过程中可能无法捕获的此类问题。

未来

First Input Delay是我们在Chrome团队中尝试的全新指标。这对我来说特别令人兴奋，因为它是我们引入的第一个指标，直接对应于用户在网络上进行真实互动时的痛苦体验。

展望未来，我们希望在 W3C WebPerf工作组中标准化该指标，以便通过异步加载的JavaScript和第三方分析工具更轻松地访问它（因为它现在需要开发人员将同步代码添加到其页面的头部）。

如果您对指标或当前实施有反馈意见，我们很乐意听到！请在 GitHub上提交问题或提交拉取请求。

参考： https://www.sitepen.com/blog/reducing-first-input-delay-for-a-better-user-experience/

工具类

目录