为访问者提供Chrome用户体验报告中包含的重要指标。此外，它还是FID分数低于100ms。
100毫秒或更少的分数被认为是好的，而100到300毫秒之间的分数有改进的空间。超过300ms 的FID分数很差。
要衡量您的FID，您可以使用Google PageSpeed Insights：
这是Google提供的免费工具，可通过多种方式测试您网站的性能。有了它，您可以观察各种关键指标，包括FID。
请注意，FID有时可能难以衡量。那是因为它需要用户输入。但是，只要您最近在您的网站上有用户互动，您就应该能够通过PageSpeed Insights找到此指标。
首先，在文本字段中输入您站点的URL，然后单击“Analyze（分析）”按钮。该工具完成对您的页面的分析后，它将为您提供结果并为您的网站提供总体评分：
您可以在Field Data（实测数据）部分下找到First Input Delay (FID)指标。在稍低的“Opportunities（优化建议）”部分下，您可以找到优化页面和分数的建议。
我们还想指出，Google将这些分数表示为实测数据。这意味着信息基于实际用户交互，而不是模拟测试（称为实验室数据或通过实验室工具找到）。FID是非常主观的，并且与用户的真实交互密切相关，因此确保您使用的是实测数据很重要。模拟只能说明这么多。
如何优化您的FID分数
现在您已了解FID分数是什么以及如何衡量它，是时候看看如何实际改进它了。以下是一些可用于降低首次输入延迟时间的提示和策略。
优化、极简化CSS和JavaScript代码
优化FID分数的最佳方法之一是压缩和优化CSS和JavaScript代码。这样做可以减小文件大小，进而提高响应能力。通过去除不必要的字符、空格和换行符，您可以减小文件大小，从而提高页面速度并减少浏览器必须处理的进程数量。因此，您的FID较低。
你可以借助工具帮助你Minify Code（Autooptimize或W3 Total Cache。
如果您没有代码经验并希望在您的网站上自动实施此修改，这对于WordPress用户来说可能是一个可行的解决方案。此外，这些插件都提供了各种以优化为重点的功能，例如图像和内容缓存。
将较长的JavaScript任务分解为较小的任务
长任务往往会阻塞主线程，并可能导致JavaScript体积膨胀，从而损害站点的响应能力。为了防止这种情况发生并在此过程中提高FID分数，您可以尝试将这些任务分解为更小的异步任务。
解决此问题的最有效方法之一是代码拆分。简而言之，这是一种用于仅分解和加载较小且必要的代码片段的技术，而不是一次加载一个大文件。您可以使用诸如Webpack之类的工具来执行此操作。
WordPress主题往往带有自己的JS库，用户可能没有专业知识或权限来拆分代码并自行优化。
减少第三方代码和非关键脚本的影响
如果您有太多的第三方脚本，可能会延迟您网站自身数据的执行。因此，为了优化您的FID分数，减少第三方代码的影响并删除任何非关键的第三方脚本也是一个明智的想法。并推迟那些您无法删除的内容。
在决定哪些脚本最重要时，问问自己哪些脚本在网站的UX中扮演着重要角色。例如，也许您可以删除或延迟一些不是很必要的广告或弹出窗口。您的用户 是否需要首先看到电子邮件选择，或者您可以将其推迟到他们以某种方式与网站交互之后？
您还可以查看PageSpeed Insights报告的“优化建议”部分，了解有关减少未使用的JavaScript和CSS的更多信息：
如果您单击以展开这些部分中的任何一个，它将列出可能阻塞主线程的特定文件和任务。您还可以使用Chrome DevTools查找未使用的JavaScript和CSS。
在许多情况下，这些“阻塞渲染”的资源会阻止页面快速加载，这也会影响您的FID。删除和/或推迟它们不仅可以提高站点的交互性，还可以提高感知的响应能力和速度。
推荐阅读：Chrome用户体验报告、Google Search Console的Core Web Vitals报告和Web Vitals JavaScript库。您可能还会发现GT Metrix和Pingdom等速度测试工具很有用。
如何提高我的网站FID分数？
改进您的FID有助于提高您网站的用户体验和SEO排名。通常，较差的FID分数可归因于多种因素，包括：
- 臃肿的JavaScript
- 未使用的脚本
- 长JavaScript任务
- 长脚本文件
为了提高您的分数，您可以采取几个步骤。其中包括缩小您网站的代码、删除或延迟未使用的第三方脚本，以及将长JavaScript（和CSS文件）任务分解为较小的任务。
小结
您只有一次机会给您网站的访问者留下积极的第一印象。这就是为什么确保抓住一切机会优化FID分数很重要的原因。必须确保访问者的第一次互动是快速的。
请记住，理想的FID分数是100毫秒或更小。如果您需要改进并缩短时间，我们上面讨论的几种策略（例如推迟未使用的JavaScript、优化您的CSS和JavaScript代码，以及推迟/删除渲染阻塞资源），无疑会缩短他们需要加载的时间。
