如何提高 WordPress 网站的首次输入延迟 (FID)分数

首次输入延迟是多少？对 UX 和 SEO 性能有何影响？在此页面上，您将了解什么是 FID、如何测试它以及影响其等级的因素。您还将了解如何修复移动和桌面上的不良分数（FID 超过 100 或 300 毫秒）并提高 WordPress 性能。

目录

• 什么是首次输入延迟 (FID) 及其为何重要？
• 什么是好的 FID 分数
• 最大潜在的首次输入延迟是多少
• 如何测量第一个输入延迟
• 哪些因素会影响 FID 并导致 WordPress 评分低
• 如何减少移动设备和桌面设备上超过 100 毫秒或 300 毫秒的首次输入延迟

---

右键点我复制链接地址，分享页面有积分。

---

---

什么是首次输入延迟 (FID) 又为何重要？

首次输入延迟是一个 Core Web Vitals 指标，用于衡量浏览器响应第一个用户与页面的交互（即单击链接、点击按钮或与另一个元素交互）所需的时间。

假设您登陆一个网站并单击一个链接。当然，您希望页面尽快回复，对吗？不幸的是，情况并非总是如此。例如，您可能单击一个链接，但有一段时间没有任何反应 – 这是因为浏览器无法立即处理用户的请求。

用更专业的话说，这是因为浏览器的主线程正在处理另一个请求，无法响应用户的请求。通常，使浏览器忙碌的请求与处理 JavaScript 文件有关。我们将在下一节中查看 JS 文件并解释如何解决主要问题。

那么，回到你身上：你点击一个链接，然后一直等待页面上发生一些事情……很烦人，不是吗？

这就是为什么 FID 是 Core Web Vitals 指标的一部分，并有助于衡量页面的用户体验。

与其他两个 Core Web Vitals 指标不同，FID 只能在现场测量 – 毕竟，这一切都与用户的交互有关。

因此，某些工具（例如 Lighthouse）无法测量首次输入延迟并使用总阻塞时间作为代理。TBT 是一种实验室指标，还可以衡量交互性和响应性（无需用户交互）。只要TBT成绩好，FID成绩也应该没问题。

TBT 占PageSpeed Insights 总体得分的30% 。它是重量最高的，只有LCP具有相同的重量。通过提高 TBT 性能，您可能会提高页面速度等级和 FID 性能。

---

什么是好的 FID 分数

至于其他 Core Web Vitals，分数分为三个部分：良好、需要改进和较差。

良好的 FID 分数需要具有小于或等于 100 毫秒的首次输入延迟。

如果分数在 100 到 300 毫秒之间，则“需要改进”。

另一方面，“差”的分数是超过 300 毫秒。

什么是好的总阻塞时间分数

您可能想知道相同的分数桶是否适用于总阻塞时间。TBT 分数略有不同——正如指标本身一样。主要区别在于 TBT 无需用户输入即可衡量交互性。这就是为什么它可以作为实验室数据进行计算。

总阻塞时间衡量的是在响应用户输入（例如键盘按下、屏幕点击或鼠标单击）之前页面被“阻塞”的时间 – 没有用户交互，您明白吗？所有“出块时间”的总和决定了 TBT 分数。

更技术一点地说，TBT 测量首次内容绘制（当您可以与页面上的第一个内容交互时）和交互时间（页面获得完全交互所需的时间）之间的所有时间段的总和。

与往常一样，总阻塞时间包括三个部分：

好– 小于或等于 300 毫秒

需要改进– 300-600 毫秒之间

差——超过 600 毫秒。

简而言之：FID 和 TBT 都捕获页面的交互性和响应性 – 尽管 FID 考虑了用户交互，而 TBT 依赖于用户输入。因此，这两个指标在所需改进方面是相似的。

---

最大潜在的首次输入延迟是多少

您可能遇到过最大潜在首次输入延迟，并想知道它与 FID 有何关系。

最大潜在首次输入延迟测量用户交互和浏览器响应之间的最大延迟。

根据第一次内容绘制之后最长任务的持续时间，这是最坏的情况 – 即内容页面的第一部分显示在屏幕上，您可以开始与页面交互。

一旦您可以单击链接或点击按钮（首次内容绘制完成），您就可以测量在最长的任务运行时页面响应您的请求所需的时间。最长任务的长度是最大潜在第一输入延迟。

通过测量最大潜在首次输入延迟，您将了解用户在看到第一个内容后与页面交互时将等待多长时间。

---

如何测量第一个输入延迟

作为一个现场指标，首次输入延迟只能通过几种工具来测量：

• Chrome User Experience Report(CrUX)
• PageSpeed Insights (Field Data)
• Search Console – Core Web Vitals report.

您还可以使用事件计时 API在 JavaScript 中测量FID 。

您可以在以下其他工具上测量代理指标“总阻塞时间”：

• Lighthouse
• PageSpeed Insights (Fied Data)
• Chrome DevTools
• WebPageTest.

使用 PageSpeed Insights 测量 FID 和 TBT

PageSpeed Insights 为您提供了最简单的机会来测量基于页面的首次输入延迟分数以及总阻塞时间：

使用 Search Console 衡量 FID

如果您想评估网站的全站 FID 性能，您应该查看 Search Console 中的 Core Web Vitals 报告。该报告基于 Chrome 用户体验报告。

通过选择移动或桌面报告，您可以识别 FID 性能的潜在问题，并深入研究受同一问题影响的 URL — 例如，FID 问题：超过 100 毫秒。

---

哪些因素会影响 FID 并导致 WordPress 评分低

此时，您可以猜测FID 主要受到 JavaScript 执行的影响。当浏览器忙于处理繁重的 JavaScript 文件时，它无法处理其他请求，包括用户的请求。

其结果是交互性较差；JavaScript 执行时间更长；主线程正忙并被阻塞。简而言之，页面无法响应用户输入或交互。

我们将看到解决这些问题的不同方法。

由于 JavaScript 是提高 FID 的关键，因此您应该意识到拥有许多插件（尤其是基于 JavaScript 的插件）也可能会影响首次输入延迟等级。您应该避免在不需要插件的页面上执行任何不必要的 JavaScript。删除任何不必要的插件也很重要。

沉重的 WordPress 主题也会影响首次输入延迟等级。它们有更多的 JS 文件、复杂的布局和低效的样式，这些都会影响主线程 – 因此会影响 FID 性能。

这就是为什么主题的复杂性越低越好。这也是为什么现在的趋势是简化一切：布局、动画、更多原生 JS 使用而不是依赖复杂的库。

---

如何减少移动设备和桌面设备上超过 100 毫秒或 300 毫秒的首次输入延迟

改进浏览器处理 JavaScript 执行的方式可减少 WordPress 上的首次输入延迟并提高 FID 分数。

目标是使流程更快、更顺畅，从而提高交互性和响应能力。

如果您的 FID 成绩有任何问题，在 Search Console 的 Core Web Vitals 报告中，您会看到“ FID 问题：长于 100 毫秒”或“ FID 问题：长于 300 毫秒”。该问题可能来自移动设备和/或桌面设备。

有多种方法可以优化 WordPress 上的首次输入延迟等级：

• 减少 JavaScript 执行时间
• 优化您的页面以做好交互准备
• 分解长任务。

让我们详细了解您应该采取哪些操作以及对性能有何影响。

1. 延迟 JavaScript

性能影响：高

至于优化 JavaScript 执行，您应该推迟 Javascript 文件。

通过推迟 JavaScript 文件，这些渲染阻塞资源将在浏览器渲染最相关的内容（即让用户与页面交互所需的内容）后加载。

因此，加载时间以及 FID 等级都会得到改善。

一旦确定了要延迟的 JS 资源，就应该将 defer 属性添加到 JavaScript 文件中。然后，浏览器将知道要推迟哪些文件，直到页面渲染完成。

以下是 defer 属性的示例：

[pastacode lang=”markup” manual=”%3Cscript%20defer%20src%3D%22%2Fexample-js-script%22%3E%3C%2Fscript%3E” message=”” highlight=”” provider=”manual”/]

您将解决“消除渲染阻塞资源”和“减少第三方代码的影响”PageSpeed 建议 – 尽管 JS 渲染阻塞资源问题并不止于此。

2. 删除未使用的 JavaScript

性能影响：中

您还可以通过删除未使用的 JavaScript 文件来解决 JS 问题，这些文件会减慢下载时间并使交互性变差。

未使用的 JS 文件是渲染页面不需要或根本没有用的 JavaScript 资源。然而，这些文件位于代码中，因此您应该管理它们。未使用的 JS 文件的示例是第三方 JavaScript 文件，例如分析和广告跟踪代码。

PageSpeed Insights 报告向您显示应处理的未使用 JS 文件的列表：

您有两种选择来处理未使用的 Javascript 文件：

A. 仅在需要时加载 JavaScript 文件。
您可以使用 Perfmatters 和 Assets Cleanup 等插件仅在需要时加载这些文件。在任何其他情况下都应禁用 JavaScript 文件的执行。作为附加提示，您可以要求主题和插件开发人员确保在使用各自的功能时仅加载所需的资源。

B. 延迟JavaScript 文件。
延迟 JavaScript 资源意味着在第一次用户交互（例如，滚动、单击按钮）之前不会加载 JavaScript 文件。换句话说，除非有用户交互，否则不会加载 JS 文件。请务必记住，并非 PageSpeed 推荐列表中的所有脚本（如上面包含的脚本）都可以安全地延迟。延迟 JavaScript 的另一个优点是 Lighthouse 不会检测任何 JS 文件。因此，该工具不会在“删除未使用的 Javascript 文件”建议中包含任何这些 JS 资源。

需要明确的是：您不应该延迟 JS 文件来解决此 PSI 建议。您将在下一点中找到有关应延迟 JS 主要原因的更多信息。但是，了解它对于提高 PSI 分数来说是很有用的。

那么，如何延迟 JavaScript 文件呢？您可以使用免费插件，例如Flying Scripts。

下面列出了一些其他插件，可以帮助您最大限度地减少未使用的 JS。我们建议谨慎使用它们：

• Plugin Organizer
• Asset CleanUp
• Gonzales

删除未使用的 Javascript 文件将解决报告中列出的特定 PageSpeed 建议。您还将提出“消除渲染阻塞资源”和“减少 javascript 执行时间”建议。

3.延迟JS执行时间直到用户交互

性能影响：非常高

您可以通过延迟 JS 文件及其执行直到用户交互来优化 JavaScript 资源并优先考虑交互所需的脚本。

换句话说，在用户交互（例如单击按钮或滚动内容）之前，不会加载任何 JavaScript 文件。

如上所述，您应该延迟所有无故影响加载时间和交互的 JavaScript 文件，例如上一节中包含的未使用的 JS 文件。

如您所知，您有不同的选项来延迟 JavaScript 文件。您可以使用免费插件（例如 Flying Scripts）或利用 WP Rocket 提供的延迟 JavaScript 执行功能选项 – 上面有更多详细信息。

这就是您解决“减少 javascript 执行时间”PSI 建议的方法。

4. 缩小 JS

性能影响：低

管理 JavaScript 执行时间的另一种有效方法是缩小 JavaScript 文件。

通过缩小 JS 文件，您将删除代码中包含的所有注释、换行符和空格。目标是使文件更小、速度更快。

您将解决以下 PageSpeed Insights 建议：

• 缩小 JS
• 避免巨大的网络负载。

5. 删除（或减少）未使用的 CSS

性能影响：中

正如 LCP 部分中所解释的，删除或减少未使用的 CSS 有助于缩短加载时间 – 因此，它可以提高交互性和 FID 指标。

6. 异步或延迟 CSS

性能影响：中

主线程工作会对交互性和 FID 性能产生重大影响。这就是为什么 PSI 建议之一是“最小化主线程工作”。要解决该问题并缩短 FID 时间，您应该推迟或异步 CSS 文件。

在延迟 JavaScript 部分中，您将了解为什么延迟对于允许浏览器仅关注页面渲染所必需的资源至关重要。对于渲染阻塞资源的 CSS 文件也是如此。

一个选项是将 Defer 属性包含到所有 CSS 文件中：

[pastacode lang=”markup” manual=”%3Cscript%20defer%20src%3D%22%2Fexample-css-script%22%3E%3C%2Fscript%3E” message=”” highlight=”” provider=”manual”/]

下面是另一个使 CSS 渲染阻塞资源异步加载的两步过程：

1. 使用像这样的可用生成器工具提取并内联关键路径 CSS (CPCSS) 。
2. 通过应用以下模式异步加载其余类。

如果您正在寻找更详细的信息，我们建议您阅读专用的 Google 资源。

需要记住的一个额外提示是避免将大量非关键 CSS 代码放在代码的 <head> 中。

通过实施这些操作，您将再次注意“消除渲染阻塞资源”PageSpeed Insights 建议。您还将解决“避免链接关键请求”建议。

7. 压缩文本文件

性能影响：高

您现在可以猜到，压缩是您需要注意的事情。不用说，“启用文本压缩”是适用于 FID 时间的 PSI 建议之一。

通过压缩和减小文件大小，浏览器和服务器将更快地发送文件。浏览器将更快地加载这些资源。

最常见的压缩格式是 Gzip 和 Brotli。Brotli 是目前最推荐的格式。您可以在我们的专门文章中阅读有关 Brotli 和 GZIP 的更多信息。

在 WordPress 上启用 Gzip 压缩的最简单方法是使用插件。您可以选择不同的选项，从启用 Gzip 压缩插件到 WP Rocket，默认情况下包括 GZIP 压缩。请记住，某些主机会自动启用 GZIP 压缩。

8.分解长任务

性能影响：高

正如我们在文章开头所解释的，当主线程繁忙并被阻塞时，FID 等级会受到负面影响，页面无法响应用户输入或交互。

主线程被阻塞是因为浏览器无法中断长任务——即所有运行时间超过 50 毫秒的任务。这就是为什么当主线程被阻塞时，页面无法响应用户输入，并且响应能力会受到影响。

为了解决这个问题，您应该将长时间运行的脚本分割成可以在 50 毫秒以内运行的较小块。

content-visibility 是一个新的强大的 CSS 属性，它可以让用户代理跳过元素的渲染工作直到需要它，从而帮助提高渲染性能。

您可以通过应用 content-visibility: auto; 来提高加载性能。包含内在尺寸：1px 5000px；到您想要延迟绘制的元素。不要忘记第二部分：解决一些可用性问题很重要。

目前，此 CSS 属性仅适用于 Chrome 和大多数基于它的浏览器。

最后，我们建议阅读有关该主题的两篇资源，分别是关于长任务和密集 JavaScript 的内容。