首次输入延迟 (FID) 是从用户首次与页面交互到页面响应的时间。它衡量响应能力，是 Google 用于衡量页面体验的三个核心 Web Vitals 指标之一。

交互示例包括：

l单击链接或按钮。

l在空白字段中输入文本。

l选择下拉菜单。

l单击复选框。

l某些事件（例如滚动或缩放）不计算在内。

让我们看看您的 FID 应该有多快以及如何改进它。

什么是好的 FID 值？  

良好的 FID 值应小于 100 毫秒，并且应基于 Chrome 用户体验报告 (CrUX) 数据。这是来自您网站上并选择共享此信息的 Chrome 实际用户的数据。您需要 75% 的交互在 100 毫秒内做出响应。

您的页面可能会被归类为以下类别之一：

良好：<=100 毫秒

需要改进：>100 毫秒且 <=300 毫秒

较差：>300 毫秒

FID数据

截至 2023 年 4 月，95.3% 的网站处于良好的 FID 范围内。这是整个网站的平均值。正如我们提到的，您需要 75% 的交互在 100 毫秒内做出响应才能在此处显示良好。

大多数网站上的大部分页面都通过了 FID 的 CWV 检查。我不认为这确实是衡量响应能力的最佳方法，Google 将于 2024 年 3 月用 Interaction to Next Paint (INP) 取代 FID。INP 不是只查看第一个输入，而是查看所有输入的延迟。用户进行的交互。

当我们对 Core Web Vitals 进行一项研究时，我们发现几乎没有人需要担心桌面连接上的 FID，也很少有人需要担心移动设备上的 FID。

很少有站点需要担心 FID。

我们的研究中的页面数据也一样。FID 似乎并不是大多数页面所关心的问题。

如何测量 FID  

唯一重要的 FID 数字来自Chrome 用户体验报告 (CrUX)，该数据来自选择共享其数据的 Chrome 真实用户。 

这称为现场数据，可以让您更好地了解不同网络条件、设备、缓存等情况下的真实 FID 性能。这也是 Google 实际衡量Core Web Vitals的依据。 

为了获得一致、可重复的测试，还可以使用在相同条件下进行测试的实验室数据。FID 在实验室测试中不可用，因为测试工具不会单击任何内容。但是，您可以使用总阻塞时间 (TBT) 作为替代指标。通过改进被阻止的流程，您也将改进您的 FID。 

测量单个 URL 的 FID  

Pagespeed Insights会提取您无法在 CrUX 数据集中查询的页面级字段数据。它还为您提供原始数据，以便您可以将页面性能与整个站点进行比较，并基于 Google Lighthouse运行实验室测试，为您提供 TBT。

测量多个 URL 或整个网站的 FID  

您可以在 Google Search Console 中获取 CrUX 数据，这些数据分为良好、需要改进和较差的类别。

单击其中一个问题即可查看受影响的页面组的详细信息。这些组是具有相似值且可能使用相同模板的页面。您在模板中进行一次更改，该更改将在组中的各个页面上得到修复。

如果您想要大规模的实验室数据和现场数据，获得这些数据的唯一方法是通过 PageSpeed Insights API。您可以通过 Ahrefs 的站点审核轻松连接到它，并获取详细说明您的绩效的报告。对于拥有Ahrefs 网站管理员工具(AWT) 帐户的经过验证的网站来说，这是免费的。

请注意，显示的 Core Web Vitals 数据将由您在设置期间为爬网选择的用户代理确定。如果您从移动设备抓取，您将从 API 获取移动 CWV 值。

是什么原因导致延迟？  

JavaScript 争夺主线程。只有一个主线程，JavaScript 竞争在其上运行任务。

JavaScript 必须轮流在主线程上运行。这就像一个单眼炉子，您必须一次烹饪一项食物，但您要烹饪多种菜肴。

当任务运行时，页面无法响应用户输入。这就是感受到的延迟。任务越长，用户经历的延迟就越长。 

来源：web.dev。

任务之间的休息是页面必须切换到用户输入任务并响应他们想要执行的操作的机会。这在速度较慢的设备上会更糟，因为 JavaScript 可能需要更长的时间来处理并导致更长的延迟。

如何改进FID

在 PageSpeed Insights 中，您将看到一个 TBT 选项卡，其中存在与主线程被阻止相关的问题。为了改进 FID，您需要解决这些问题。 

大多数页面都通过 FID 检查。但是，如果您需要处理 FID，您可以处理以下几项内容： 

1.减少JavaScript的数量  

如果您可以减少 JavaScript 的运行量，请先这样做。在页面加载的早期关注 JavaScript。如果没有进行大量优化，加载过程的早期部分可能会充满大量 JavaScript，所有这些 JavaScript 都试图在单个主线程上运行。

2. 如果可能的话稍后加载 JavaScript  

任何不需要立即使用的 JavaScript 都应该稍后加载。有两种主要方法可以做到这一点——延迟和异步属性。这些属性可以添加到您的脚本标签中。

通常，正在下载的脚本在下载和执行时会阻塞解析器。异步将使解析和下载同时发生，但在脚本执行期间仍然阻止解析。Defer 在下载过程中不会阻止解析，只会在 HTML 解析完成后执行。

你应该使用哪个？对于任何你想要的早点或有依赖关系的东西，我倾向于异步。 

例如，我倾向于在分析标签上使用异步，以便记录更多用户。您需要将不需要的任何内容推迟到以后或没有依赖项。添加属性非常容易。 

查看这些示例：

普通的：

< src="https://www.domain.com/file.js">

异步：

< src="https://www.domain.com/file.js" async>

推迟：

< src="https://www.domain.com/file.js" defer>

3.分解长任务

另一种选择是分解 JavaScript，以减少其运行时间。您可以将那些延迟响应用户输入的长任务分解为阻塞时间较短的较小任务。这是通过代码分割来完成的，它将任务分成更小的块。

4. 使用Service Worker  

还可以选择将一些 JavaScript 移至Service Worker。我确实提到 JavaScript 会竞争浏览器中的一个主线程，但这是一种解决方法，可以为其提供另一个运行位置。

就缓存而言，存在一些权衡。并且 Service Worker 无法访问DOM，因此它无法进行任何更新或更改。如果您要将 JavaScript 移至 Service Worker，那么您确实需要一个开发人员。

5.使用预渲染或服务器端渲染（SSR）  

如果您使用的是 JavaScript 框架，则页面加载需要大量 JavaScript。JavaScript 可能需要一段时间才能在浏览器中处理，这可能会导致延迟。如果您使用预渲染或 SSR，则可以将此负担从浏览器转移到服务器。

最后的想法  

尽管 FID 将于 2024 年 3 月被 INP 取代，但改进 FID 仍然值得努力。您为改善 TBT 和 FID 所做的同样的事情也会改善 INP。

翻译作品，原作者：Patrick Stox

更多文章：

Core Web Vitals ：页面速度现在对 SEO 更为重要

Google SEO:如何优化Core Web Vitals提高您的网站排名