什么是首次输入延迟以及如何优化它

谷歌不断不断地改变算法和排名因素的要求，以确保用户获得最佳的用户体验和相关信息。 谷歌最近宣布了一个新的谷歌页面体验排名信号，核心 Web Vitals 指标之一是首次输入延迟 (FID)。

如果您还不知道 Google Page Experience Update 和 Core Web Vitals 是什么，请阅读我们之前的博客。

如果您对新算法的其他指标感兴趣，那么您可以在这里阅读它们：

• 最大的内容涂料
• 累积版面偏移

如今，Wishdesk 网站开发机构专注于首次输入延迟（简称 FID）的重要性，以及如何对其进行优化以提高网站的交互性。

什么是第一个输入延迟？

首次输入延迟 (FID) 是第三个 Core Web Vitals 真实用户指标之一，用于衡量处理用户与页面的第一次交互所需的时间。 需要测量页面的交互性。 这些是从用户的第一次点击、轻敲、按键到站点响应交互的时间之间的毫秒数。

• 谷歌批准了这一指标，并于 2018 年开始使用它。
• FID 分数不包括滚动和缩放。
• FID 以毫秒为单位。

让我们模拟一下情况。

您已进入该站点，并且您上传的页面似乎已加载，但该站点没有响应您执行的任何其他操作。 最有可能的是，您将离开该站点，而该站点所有者将失去一位客户。

最重要的是，该指标无法建模。 这完全取决于用户行为以及完成操作需要多长时间。 为什么 FID 如此重要？

因为这是用户对您网站的第一印象和互动。 第一印象很重要。

什么是 SEO 中的 FID？

FID 优化是为访问者改善网站并提高 SEO 排名的另一种方法。 如果你的网站长时间不回复，不允许互动，那么用户就会离开。 这会对您的排名产生负面影响。 任何可点击的元素都应该被浏览器快速处理。

搜索引擎使用 FID 来衡量用户的第一印象和网站浏览体验。 因此，如果您担心自己的 SEO，可以使用我们的页面优化清单。

什么导致第一个输入延迟？

出现输入延迟是因为主浏览器线程正忙于做其他事情，所以它没有响应用户。 由于站点正在等待 JavaScript 和/或 CSS 元素加载，因此通常会出现缓慢的 FID。 一切似乎都在工作，内容已加载，但页面还不能响应用户的请求。

让我们来看看 FID 分数不佳的前 3 个原因。

原因 #1. 繁重的 JavaScript

大型 JavaScript 包通常是页面响应时间变慢的主要原因。 用户必须等待页面加载所有 JavaScript。

原因 #2. JavaScript 中长时间运行的任务

如果您的站点的代码优化不佳或编码错误，那么这可能会延迟客户的请求并增加 FID 分数。

原因 #3. 未使用的 JavaScript

使用不必要的 JavaScript 会增加首次输入延迟，因此加载需要时间。 摆脱未使用的 JavaScript 包。

什么是好的 FID 分数？

良好的首次输入延迟分数：

理想情况下，FID 分数应低于 100 毫秒。 如果您的网站有这种分数，那么您的网站将立即为用户加载。

需要改进首次输入延迟分数：

平均时间在 100 毫秒到 300 毫秒之间。 按照这个速度，游客需要稍等片刻，但这不应该激怒他们。

较差的首次输入延迟分数：

如果您的网站需要超过 300 毫秒，那么事情对您不利。 您应该立即采取行动来优化和改进您网站的 FID。 否则，您将失去网站访问者和 SEO 职位。

如何测量页面上的 FID？

测量 FID 与测量所有其他 Core Web Vitals 的过程有些不同。 主要区别在于建议使用现场工具对其进行跟踪。 这意味着为了获得真实数据，真实用户应该与您的网页进行交互。

谷歌推荐的测量首次输入延迟的最佳工具

1. Chrome 用户体验报告

Chrome 用户体验报告是一份帮助开发者提高网站可用性的报告。 它是一组基于用户数据的关键可用性指标。

2. Search Console 核心网络生命力报告

Google Search Console 中的 Core Web Vitals 报告总结了网站在过去 90 天内如何满足 Core Web Vitals 标准。

3. Web Vitals JavaScript 库

这是一个为前端监控而构建的简约库。 该工具是当今最有效的工具，因为它允许您在短时间内以非常高的准确度跟踪性能。

4. PageSpeed Insights

PageSpeed Insights 服务可以快速审核单个 URL 的性能。 它包括此页面的 Core Web Vitals 数据。

5. DevTools 中的 Lighthouse：总阻塞时间 (TBT) 功能

在 Lighthouse 的帮助下，您可以评估加载速度和交互性的重要性，并获得有关如何改善用户体验的建议。

现在您已经了解了 First Input Delay 音轨的原理，是时候学习如何优化它了。 继续阅读以了解提高首次输入延迟分数的所有秘诀。

如何改善首次输入延迟？

如果 FID 不好，那么您应该采取行动。 想知道如何增加第一个输入延迟？ 然后留在我们身边，找到您问题的答案。

• 优化第三方脚本

优化所有第三方脚本，例如社交媒体按钮、分析和广告，以免它们增加您的网站加载时间。 或者，您可以对所需的脚本使用延迟加载。

• 加速 JavaScript

另一个有用的技巧是将长时间运行的任务分解成更小的任务。 在处理这些短任务之间的间隔内，浏览器会定时优化用户的请求。

• 尽量减少不再使用的 polyfill

如果您有不在网站上使用的 polyfill，请移除它们。 polyfill 是网站在旧版浏览器上正常工作所需的一段代码。

只留下你想要的 polyfill。

• 优化 CSS 代码

简而言之，为了改进您的 FID，建议缩小、压缩和删除未使用的 CSS。

• 使用经过验证的 WP 主题和插件

如果您使用的是 WordPress 网站，那么对您来说最重要的建议是只使用高质量和安全的 WP 主题和插件。 删除不重要的插件。 这通常对 First Input Delay 分数有很大影响。

• 在主线程之外运行长任务

这是为了携带主线程空闲，因此增加了第一次输入延迟。 为此，您可以将数据传输到 Web Worker。

• 推迟未使用的 JavaScript

仅配置工作所需代码的下载。 不确定哪个 Java 代码重要？ 在 Chrome DevTools Coverage Tab 中，您可以找到不需要使用的 JavaScript 代码部分。

• 缓存

借助缓存，可以存储之前下载的内容，用户再次访问时不会再次下载。 从缓存加载可以最大限度地减少服务器负载并提高性能。

• 优化图像

图像本身不会影响页面的无响应方向。 但是，延迟加载的使用可以让您释放宝贵的带宽，可用于代码传输。 根据您的网站所在的 CMS，您还可以使用方便的箭袋。 Drupal 图像优化将加速您的 Drupal 站点，而 WordPress 图像优化器对 WordPress 站点所有者很有用。

为什么应该改进首次输入延迟 (FID)

首次输入延迟显示了客户的请求在到达您的站点后得到满足的速度。 FID 率越低，使用您的网站就越容易。

优化和提高您的 FID 分数以匹配 Core Web Vitals 并为您的访问者带来更好的用户体验。 从我们的 Web 开发专家那里获得有关 Core Web Vitals 的帮助。