什么是首次输入延迟 (FID)？ 如何在 WordPress 中减少它

当您第一次尝试与页面交互并且它需要一段时间才能响应时，那个尴尬时刻有一个名称。这称为首次输入延迟(FID)，它是一个指标，可让您了解网站的用户体验(UX)有多好。

低FID表明网站已正确优化。这意味着即使在页面看起来已经完成渲染之后，您的访问者的浏览器也不会卡住加载元素和脚本。如果您可以让FID分数尽可能低，则会让用户的访问更加愉快。

在本文中，我们将讨论首次输入延迟的含义以及它为何如此重要的指标。然后我们将介绍四种降低WordPress中FID分数的方法。让我们开始吧！

?目录：

• 什么是首次输入延迟？
• 如何衡量您网站的首次输入延迟
• 减少WordPress中首次输入延迟分数的方法

以下是一些经过验证的方法，可以改善#WordPress网站上的首次输入延迟?

点击推文

什么是首次输入延迟（以及为什么它是一个重要指标）

每次访问网站时，后台都会发生很多事情。在您看到页面之前，您的浏览器需要查询其服务器、发送和处理请求、加载元素等。对于现代网站，在您看到可以与之交互的完全呈现的页面之前，您的浏览器可能需要满足数十个请求。

在某些情况下，页面看起来已经准备就绪，但您的浏览器仍在后台处理请求和加载脚本。当您尝试与该页面交互时，您可能会发现执行操作和接收响应之间存在轻微延迟。

例如，如果您单击一个链接，您的浏览器可能不会立即处理该请求。如果你按下一个按钮，乍一看它可能不会做任何事情。这可能发生在您网站上的任何交互式元素上。您的目标是尽可能减少第一次输入延迟。

理想情况下，您站点的首次输入延迟应低于100毫秒。这是Google认为网站可接受的标准：

来源：网络开发

我们特别提到Google，因为FID是它用来衡量网站上正面或负面用户体验的三个指标之一。这三个指标被称为核心网络生命体征它们还包括以下两个指标：

1. 最大内容绘制(LCP)：该指标衡量加载页面上最大元素所需的时间。
2. CumulativeLayoutShift(CLS)：这衡量页面在加载时视觉上“移动”的程度。如果元素在加载时移动太多，您的CLS分数就会很差。我们有一个指南修复WordPress的累积布局偏移.

CoreWebVitals之所以重要，有两个关键原因。首先，它们提供了衡量您的网站优化程度的衡量标准。如果您的网站得分很高，则意味着它加载速度快，视觉效果稳定，用户无需等待太长时间即可与之交互。

CoreWebVitals重要的第二个原因是它们会影响您网站的搜索引擎优化(SEO)。谷歌在确定排名时使用这些指标作为一个小信号。事实上，这家搜索引擎巨头已经明确表示，CoreWebVitals在SEO方面很重要，尽管与内容和反向链接的程度不同。

如何衡量您网站的首次输入延迟

首次输入延迟可能难以衡量，因为您需要根据网站的真实访问者收集数据，这与其他性能指标不同，您只能使用计算机运行模拟测试。

衡量网站首次输入延迟的最简单方法是使用PageSpeed洞察力.但是，如果您的网站有足够的流量可以包含在Chrome用户体验报告中，PageSpeedInsights只会显示首次输入延迟时间。

让我们先谈谈PageSpeedInsights的工作原理，然后我们将分享一些替代方案，如果PageSpeedInsights没有为您的网站提供首次输入延迟指标，您可以尝试：

要使用PageSpeedInsights，请继续输入要测试的页面的URL。PageSpeedInsights将花费一些时间对其进行分析，然后它将返回如下所示的报告：

总的来说，该网站没有最好的CoreWebVital分数。但是，您可以看到它在首次输入延迟指标方面表现非常好，平均时间低于100毫秒。

但是，正如我们上面提到的，并非所有站点都会看到此指标。如果您有一个流量较低的网站，您可能会看到如下内容：

在这种情况下，您有两种选择：

1. 简单：您可以使用实验室数据部分中的总阻塞时间指标作为首次输入延迟时间的粗略代理。这不是一个完美的表示，但总阻塞时间指标与首次输入延迟非常相似。通常，如果您改善总阻塞时间，您也会看到首次输入延迟时间的类似改善。
2. 高级：您可以使用真实的用户性能监控工具，例如请求指标.使用这些工具，您需要向站点添加跟踪脚本以收集真实的用户数据。

在下面，您可以看到在PageSpeedInsights中哪里可以找到总阻塞时间指标：

既然您知道如何衡量FID和其他CoreWebVitals，让我们来谈谈如何改进它们。

减少WordPress中首次输入延迟分数的方法

在本节中，我们将专注于WordPress优化，以提高您的首次输入延迟分数。其中一些优化也会对其他CoreWebVitals产生积极影响，从而使它们变得更加有用。

1.从您的网站中删除不必要的脚本

WordPress网站加载时间过长的主要原因之一是它需要执行大量脚本。通过脚本，我们指的是JavaScript和CSS，以及其他可能的选项。如果您使用“复杂”的WordPress主题或大量插件，则您可能在后台运行了太多脚本。

弄清楚哪些脚本有用，哪些没用可能是一个挑战，但这就是PageSpeedInsights的用武之地。如果您对网站的任何页面进行测试，PageSpeedInsights报告还将包括一个机会部分：

该部分将指出您的站点未使用哪些JavaScript和CSS文件。删除这些脚本应该会相应地降低您的FID分数。

在许多情况下，这些脚本来自插件。这意味着您需要仔细查看您的插件列表并找出您真正不需要的工具。剔除您的插件是让您的网站尽可能快地加载的好方法。

2.在加载期间推迟非关键代码

遇到加载时间过长的特定脚本或代码是很常见的。问题是，在某些情况下，您的浏览器在处理这些脚本之前将无法完成加载页面的其余元素。

如果这些脚本不是“关键”的，你可以简单地告诉你的浏览器把它们留到最后，这样它们就不会减慢其他人的速度。这就是我们所说的“推迟非关键代码”。

在弄清楚可以推迟哪些脚本时，您的第一站应该是PageSpeedInsights。为页面生成报告后，PageSpeedInsights将包含有关如何提高其分数的建议。

在这些建议中，您会找到一个选项，内容为“消除渲染阻塞资源”。如果您单击它，它将显示您可以推迟的脚本列表：

有两种方法可以处理WordPress中的渲染阻止脚本。第一种方法涉及使用异步.这使浏览器能够在解析您指定的脚本时继续加载您的网站。或者，您可以推迟代码，使其在浏览器呈现HTML文档的其余部分后加载。

要在WordPress上进行设置，您可以使用免费的异步JavaScript插件.或者，许多WordPress性能插件包含延迟代码的功能。如果您愿意为高级插件付费，WP火箭具有自动推迟非关键CSS和JavaScript的功能。

3.使用CSS和JavaScript缩小工具

尽管我们都赞成删除未使用的CSS和JavaScript，但仍有一些脚本您不想删除。例如，除非您想要一个感觉像是从上个世纪被撕掉的网站，否则您不会想要取消任何页面的CSS样式表。

对于那些无法删除的脚本，最好的办法是缩小它们。这意味着从代码中删除空格和不必要的字符以减少每个脚本的大小。有几种工具可以自动为您在WordPress中缩小脚本，例如自动优化和快速速度缩小：

一般来说，大多数WordPress优化和缓存插件还包括脚本缩小工具。但是，其中一些需要大量配置工作，因此我们建议在缩小时坚持使用诸如Autooptimize之类的选项。

4.使用内容分发网络(CDN)

使用CDN是提高网站性能的好方法。使用CDN，您可以访问世界各地的数据中心网络，该网络可以缓存您网站的内容。当访问者尝试访问您的网站时，CDN将处理该请求并提供它的缓存版本。

在大多数情况下，使用CDN会改善您网站的加载时间和FID分数。将WordPress与CDN集成很简单，最大的挑战可能在于决定使用哪种服务。

如果你正在寻找免费CDN选项，我们建议选择以下选项之一：

1. Cloudflare：这是市场上最受欢迎的CDN之一。它是易于与WordPress集成并提供免费计划。
2. Jetpack：Jetpack插件提供了一项名为SiteAccelerator的功能，它使用WordPress.com服务器来缓存您网站中的静态元素。尽管Jetpack需要一个WordPress.com帐户，但您也可以在自托管的WordPress站点上使用它。

但是，为了获得最佳性能，您可能需要考虑使用优质CDN例如KeyCDN、StackPath或BunnyCDN。

立即减少您网站的首次输入延迟

FID是三个之一核心网络生命体征旨在衡量您网站上的用户体验的指标。

在#WordPress网站上提高首次输入延迟分数的完整指南?

点击推文

衡量如此抽象的事物可能会很复杂，这就是为什么每个核心要素都专注于一种可能对游客体验产生负面影响的特定情况。所有CoreWebVitals都是必不可少的，但特别是FID，如果延迟太高，可能会导致很大的挫败感。

如果您正在寻找提高WordPress中FID分数的方法，您需要执行以下操作：

1. 从您的网站中删除不必要的脚本。
2. 在加载期间推迟非关键CSS和JavaScript。
3. 使用CSS和JavaScript最小化工具，例如Autooptimize和FastVelocityMinify。
4. 使用CDN，例如Cloudflare或Jetpack。

您对如何在WordPress中降低FID分数有任何疑问吗？让我们在下面的评论部分中讨论它们！