为访问者提供快速体验对您网站的成功至关重要。但是，有多种方法可以衡量它的表现如何。其中之一是首次输入延迟 (FID)，它测量用户首次与您的网站交互到他们的浏览器响应该操作之间的时间量（以毫秒 (ms) 为单位）。

什么是首次输入延迟 (FID)？

正如我们提到的，FID（有时也称为“输入延迟”）是对访问者与您的网站交互和浏览器响应之间发生的时间的度量，以毫秒为单位。这是Chrome 用户体验报告 中包含的重要指标。此外，它还是Core Web Vitals 之一。这些是 Google 用来确定您网站的 UX 质量（进而确定其页面排名）的指标。

在这种情况下，输入或交互可以指范围广泛的动作。例如，它可能包括单击链接、按下按钮或选择复选框。但是，当用户滚动或放大页面时，FID 不适用，因为这些不需要在他们的浏览器和您的网站之间进行新的响应。

一些不同的因素会影响这个指标。用户设备的速度和处理能力可能会产生影响。你无法控制。但是，您可以控制网页的大小和复杂性。更具体地说，您可以控制您的网站使用了多少 JavaScript。例如，如果您有许多以随机顺序加载的图像或脚本，则可能会减慢整个过程并延迟用户的响应。

即使您的站点具有可靠的FCP和LCP，首次输入延迟也可能足够长以导致它们反弹。他们可能会觉得您的网站反应迟钝且速度缓慢。

简而言之，FID 用于确定页面加载时的响应程度。也许很明显，这个过程越快越好。因此，了解如何衡量您网站的 FID 以及如何提高分数非常重要。

如何测量 FID

在开始优化 FID 分数之前，了解它目前的情况至关重要。理想情况下，为了提供可靠的用户体验 (UX)，您需要FID 分数低于 100 ms。

100 毫秒或更少的分数被认为是好的，而 100 到 300 毫秒之间的分数有改进的空间。超过 300 ms 的 FID 分数很差。

要衡量您的 FID，您可以使用Google PageSpeed Insights：

这是 Google 提供的免费工具，可通过多种方式测试您网站的性能。有了它，您可以观察各种关键指标，包括 FID。

请注意，FID 有时可能难以衡量。那是因为它需要用户输入。但是，只要您最近在您的网站上有用户互动，您就应该能够通过 PageSpeed Insights 找到这个指标。

首先，在文本字段中输入您站点的 URL，然后单击“分析”按钮。该工具完成对您的页面的分析后，它将为您提供结果并为您的网站提供总体评分：

您可以在Field Data部分下找到First Input Delay (FID)指标。在稍低的“机会”部分下，您可以找到优化页面和分数的建议。

我们还想指出，Google 将这些分数表示为字段数据。这意味着信息基于实际用户交互，而不是模拟测试（称为 实验室数据或通过实验室工具找到）。FID 是非常主观的，并且与用户的真实交互密切相关，因此确保您使用的是现场数据很重要。模拟只能说明这么多。

如何优化您的 FID 分数

现在您已了解 FID 分数是什么以及如何衡量它，是时候看看如何实际改进它了。以下是一些可用于降低首次输入延迟时间的提示和策略。

优化和缩小您的 CSS 和 JavaScript 代码

优化 FID 分数的最佳方法之一是压缩和优化 CSS 和 JavaScript 代码。这样做可以减小文件大小，进而提高响应能力。通过去除不必要的字符、空格和换行符，您可以减小文件大小，从而提高页面速度并减少浏览器必须处理的进程数量。因此，您的 FID 较低。

一种快速而简单的方法是使用在线工具，例如Minify Code。复制完整大小的代码，将其粘贴到站点，站点将其缩小，然后将结果复制/粘贴回站点。

您还可以使用代码编辑器手动缩小代码，尽管这可能会更复杂一些。但是，如果您有使用代码的经验，则此方法可以为您提供更多控制权。

另一种策略是使用插件，例如Autooptimize或W3 Total Cache（或任何数量的其他插件）。

如果您没有代码经验并希望在您的网站上自动实施此修改，这对于 WordPress 用户来说可能是一个可行的解决方案。此外，这些插件都提供了各种以优化为重点的功能，例如图像和内容缓存。

将较长的 JavaScript 任务分解为较小的任务

长任务往往会阻塞主线程，并可能导致 JavaScript 膨胀，从而损害站点的响应能力。为了防止这种情况发生并在此过程中提高 FID 分数，您可以尝试将这些任务分解为更小的异步任务。

解决此问题的最有效方法之一是代码拆分。简而言之，这是一种用于仅分解和加载较小且必要的代码片段的技术，而不是一次加载一个大文件。您可以使用诸如Webpack 之类的工具来执行此操作。

减少第三方代码和非关键脚本的影响

如果您有太多的第三方脚本，可能会延迟您网站自身数据的执行。因此，为了优化您的 FID 分数，减少第三方代码的影响并删除任何非关键的第三方脚本也是一个明智的想法。并推迟那些您无法删除的内容。

在决定哪些脚本最重要时，问问自己哪些脚本在网站的 UX 中扮演着重要角色。例如，也许您可以删除或延迟一些不是很必要的广告或弹出窗口。您的用户 是否需要首先看到电子邮件选择，或者您可以将其推迟到他们以某种方式与网站交互之后？

您还可以查看PageSpeed Insights 报告的“机会”部分，了解有关减少未使用的 JavaScript 和 CSS 的更多信息：

如果您单击以展开这些部分中的任何一个，它将列出可能阻塞主线程的特定文件和任务。您还可以使用 Chrome DevTools查找未使用的 JavaScript 和 CSS。

在许多情况下，这些“阻止渲染”的资源会阻止页面快速加载，这也会影响您的 FID。删除和/或推迟它们不仅可以提高站点的交互性，还可以提高感知的响应能力和速度。

首次输入延迟 (FID) 常见问题

在这一点上，您可能对 FID 是什么、它在您网站的 UX 上的重要性以及如何改进它有了深入的了解。考虑到这一点，我们确实希望确保我们已经涵盖了所有关键点。因此，让我们回顾一些有关 FID 的常见问题。

FID 如何适应我网站的整体性能？

从本质上讲，FID 衡量访问者与您的网站的首次互动。它既是一个定量指标，也是一个感知指标，因为它会影响用户对您网站的第一印象。您可以客观地看到站点何时对用户输入做出响应，但基于用户与站点的交互，您也可以看到他们认为它何时响应。

FID 测量用户进行的第一次交互与浏览器响应该操作所需的时间之间的时间。换句话说，该指标评估您的网站在仍在加载时的响应程度。速度越快，访问者的体验就越好。

此外，作为核心 Web要素（与最大内容绘制 (LCP)和累积布局偏移 (CLS) 一起），FID 在 Google 如何对您的网站进行排名方面发挥着重要作用。因此，除了您的用户体验，它还会影响您网站的搜索引擎优化 (SEO)。许多改进 FID 的相同策略也会显着降低您网站的整体性能。

如何测量我的 FID？

有几种不同的方法可以衡量您的 FID 分数。最快和最简单的方法是通过 Google PageSpeed Insights 运行您的网站。该报告将详细介绍一系列重要指标，包括 FID。它还将提供一些有关如何提高分数的建议。

此外，您可以使用其他一些工具来访问您的 FID 分数。它们包括Chrome 用户体验报告、Google Search Console 的核心 Web Vitals 报告和Web Vitals JavaScript 库。您可能还会发现GT Metrix和Pingdom 的速度测试等工具很有用。

如何提高我的 FID 分数？

改进您的 FID 有助于提高您网站的用户体验和 SEO 排名。通常，较差的 FID 分数可归因于多种因素，包括：

重度 JavaScript

未使用的脚本

长 JavaScript 任务

长脚本文件

为了提高您的分数，您可以采取几个步骤。其中包括缩小您网站的代码、删除或延迟未使用的第三方脚本，以及将长 JavaScript 任务（和 CSS 文件）分解为较小的任务。

结论

您只有一次机会给您网站的访问者留下积极的第一印象。这就是为什么确保抓住一切机会优化 FID 分数很重要的原因。必须确保访问者的第一次互动是快速的。

请记住，理想的 FID 分数是 100 毫秒或更小。如果您需要改进并缩短时间，上面讨论的几种策略（例如推迟未使用的 JavaScript、优化您的 CSS 和 JavaScript 代码，以及推迟/删除渲染阻塞资源）无疑会缩短您的时间他们需要。