什么是首次输入延迟 (FID) 和总阻塞时间 (TBT)

什么是 FID/TBT？

首次输入延迟 (FID) 测量用户在页面上的首次交互（单击按钮或链接）与浏览器响应并执行预期功能之间的时间。

简单来说，First Input Delay 告诉我们用户在第一次点击后必须等待界面响应的时间。

这个问题基本上是问页面的互动速度有多快？换句话说，当用户单击某物、按钮或JavaScript事件时，浏览器可以多快开始处理并产生结果？ 当你点击某物而什么都没发生或非常缓慢才发生时，这便不是一次好的体验。

Web.dev告诉我们，输入延迟的主要原因是浏览器的主线程忙于做其他事情而无法立即响应用户。

通常，这是由于与 Javascript 相关的长时间任务需要花费大量时间来执行。

除了最大的内容绘制(LCP) 和累积布局偏移(CLS)，首次输入延迟是谷歌在 2021 年夏季推出的页面体验更新中强调的三个核心 Web 要素之一。

在这次更新中，谷歌确认三个核心网络生命体征将成为其排名算法的一部分。因此，您希望您的网页在衡量其核心网络生命周期时根据 Google 的评分在以下“良好”范围内。

由于 FID 是仅通过真实用户交互测量的统计数据，因此无法在实验室环境中复制。

然而，总阻塞时间 (TBT) 是一个衡量浏览器被阻塞时间的指标，因此可以近似地估计 FID。这就是为什么您会在 Semrush 的 Core Web Vitals 报告中看到 TBT 而不是 FID 的原因。

是什么导致 FID/TBT 不佳？

如上所述，任何需要很长时间才能完成的任务，因此会阻塞浏览器的主线程并阻止它立即执行新任务，将导致 FID 不佳。

大多数情况下，主线程的延迟和阻塞发生在加载页面的阶段，此时内容已经显示，但加载尚未完成。

如何修复较差的 FID/TBT

由于我们看到的大多数与 FID 相关的阻塞发生在页面加载阶段，因此您可以通过优化页面的主线程来降低 TBT 和 FID。

最好的方法是消除长时间的任务。

长任务是主线程被阻塞超过 50 毫秒的任何任务。

潜在地，如果用户在长时间的任务中单击浏览器中的可点击元素，他们将看到响应延迟。

幸运的是，在 Lighthouse 和 Semrush 的帮助下，可以很容易地深入到您的页面并识别长期任务。

首先，您应该了解哪些页面有问题。是模板问题还是只是像主页这样的特定页面？

然后，确定哪些长期任务导致的问题最多。

然后，您可以使用以下 Lighthouse 检查来找到如何改进 TBT 的想法。他们的建议将包括以下内容：

• 推迟屏幕外图像
• 减少第三方代码的影响
• 避免过大的 DOM 大小
• 减少 JavaScript 执行时间
• 最小化主线程工作

将这些建议与 Semrush 站点审核一起提交给您的开发人员，以帮助他们优先考虑将最小化 FID 并改善站点页面体验的任务。

如果您想深入了解并为自己准确定位长任务的位置，您可以打开 Lighthouse 并在主线程中检查长任务。

检查主线程中的长任务

要优化您的 FID，您需要了解导致交互性差的原因。正如我们上面讨论的，您需要了解主线程中何时发生长任务。

有两种方法可以实际查看长任务：

• 在 Lighthouse 的性能审计中使用名为“避免长时间的主线程任务”的特别建议
• 查看原始轨迹

在这两种变体中，如果您通过 Lighthouse 启动性能审计会很容易。

要打开 Lighthouse，请右键单击页面上的任意位置并选择“检查”。

然后，在顶部找到 Lighthouse 报告并点击 Generate report 按钮。

生成报告后，您可以向下滚动以深入了解 Lighthouse 的建议，这些建议将标记为机会和诊断。

使用“避免长时间的主线程任务”建议

找到并打开建议避免长时间的主线程任务。如果至少有一项任务耗时超过 50 毫秒，则它可以在审计中使用。

这列出了 Lighthouse 看到一个很长的任务的所有实例，可能会阻止和延迟用户的交互。

查看原始跟踪

再看一眼，您可以单击 Lighthouse 报告中的查看原始跟踪以查看页面加载的时间线。

确保您已检查 Web Vitals 设置，以查看“长任务”何时花费超过 50 毫秒。

请记住，Lighthouse 告诉我们，任何快于 50 毫秒的都被认为是好的，而任何慢于 50 毫秒的都被认为是差的。

使用此步骤来磨练您页面上可以改进 FID 的特定实例。