如何改善 WordPress 中的首次输入延迟 (FID)
已发表: 2022-07-05随着您的网站流量增加，您需要确保事情继续顺利进行。 如果访问者必须等待超过几秒钟才能加载您的页面，他们可能会离开您的网站并且可能永远不会回来。
幸运的是，有一些简单的测试可以评估您的性能，如果需要改进，有一些解决方案几乎可以立即改善您的加载时间。
在这篇文章中，我们将讨论站点性能的一个方面：首次输入延迟。 您将了解它是什么，为什么它很重要，以及如何衡量和提高 WordPress 网站上的 FID 分数。
首次输入延迟简介
首次输入延迟 (FID) 是访问者首次与您的网站交互后所经历的加载时间。 本质上，当有人点击链接或点击按钮时，他们必须等待浏览器响应。 如果您的网站具有较高的 FID 分数，则访问者会等待更长的时间。
FID 是 Core Web Vitals 的主要指标之一。 该报告由 Google 创建，用于衡量网页的性能。
以下是 Core Web Vitals 报告中包含的三个主要性能指标：
- Largest Contentful Paint (LCP) ：衡量用户请求 URL 后网站加载所需的时间。
- 首次输入延迟 (FID) ：这是访问者与页面交互后您的网站做出响应的时间。
- Cumulative Layout Shift (CLS) ：这会测量页面加载时发生的所有布局变化。
尽管所有这些指标都在评估您网站的用户体验，但您的 FID 分数是最重要的指标之一。 如果您的页面没有快速加载，则可能会给您留下糟糕的第一印象。 事实上，一秒钟的延迟会降低 16% 的访客满意度。
以下是提高 FID 分数的一些好处：
- 提高访问者的平均页面停留时间
- 降低跳出率
- 转化次数增加
FID 评分不佳的潜在原因
当您运行 Core Web Vitals 测试时，该报告将为您提供首次输入延迟分数。 可接受的 FID 为 100 毫秒或更短。
差的 FID 分数高于 300 毫秒。 这可能是由几个不同的因素造成的。
高首次输入延迟的最常见原因之一是大量的 JavaScript 代码。 如果浏览器必须执行一个大的 JavaScript 文件，它可能太忙而无法执行其他请求。
拥有太多基于 JavaScript 的插件会对加载时间产生负面影响。 同样，某些主题可能具有导致相同问题的复杂文件。
另一个因素可能是第三方脚本。 如果您的网站有许多第三方分析代码和标签，这可能会增加您页面的延迟。 有时，浏览器可以优先考虑这些脚本，从而延迟您网站上其他内容的加载。
如何衡量您网站的 FID 分数
现在您知道什么是首次输入延迟，是时候测试您的网站了。
您可以使用多种 Core Web Vitals 工具来检查您的 FID。 如果您从这些工具中的任何一个收到糟糕的报告，您可以采取措施改进您的网站。
1. PageSpeed Insights
您可以使用的一个著名工具是 PageSpeed Insights。 这使您能够根据各种因素评估您网站的性能。
输入您网站的 URL 后，PageSpeed Insights 将为您提供详细的性能分析。 在页面顶部，您可以查看您的网站是否通过了 Core Web Vitals 评估。
使用此报告，您可以查看您网站的 FID 分数，该分数将以毫秒为单位。 正如我们前面提到的，任何低于 100ms 的分数都将通过测试。
请注意，您需要检查您的网站在移动和桌面浏览器上的性能。 您可能会注意到这两款设备上的 FID 分数略有不同。
这是在您的网站上测量首次输入延迟的最快方法之一。 如果您需要快速了解 Web 性能，这可能是适合您的工具。
2.谷歌搜索控制台
与 PageSpeed Insights 类似，Google Search Console 是一个免费工具，可用于评估网站性能。 使用此服务，您可以查看站点的流量数据并解决特定问题，例如首次输入延迟。
要开始使用 Google Search Console，您必须验证您的网站所有权。 有几种方法可以做到这一点，但我们将概述 HTML 文件上传方法。 首先输入您的域或 URL 前缀。
然后，下载为您生成的 HTML 文件。 您需要先将此文件上传到您网站的根目录，然后才能使用 Google Search Console 的功能。
验证后，您将能够访问您的仪表板。 在这里，您可以导航到Core Web Vitals选项卡。
与 PageSpeed Insights 不同，如果您不熟悉此工具，可能需要一些时间才能访问您的报告。 此外，如果您的网站没有获得足够的访问者，您可能看不到报告。
Google Search Console 可以为您提供类似的 FID 分数指标。 您将收到基于实际使用数据的“差”、“需要改进”或“好”的评估。
3. 灯塔
Lighthouse 是一个 Web 开发工具，您可以使用它来审核任何网页的性能。 虽然它不直接测量首次输入延迟，但它会为您提供总阻塞时间 (TBT)。 您可以将其用作 FID 的代理。
简而言之，TBT 评估您的网站对用户输入的响应程度。 与 FID 一样，TBT 测量首次内容绘制 (FCP) 和交互时间 (TTI) 之间的延迟。 由于它们非常相似，您可以使用 TBT 来衡量您的 FID 分数。
要在您的网站上查看 Lighthouse 的报告，您需要右键单击您的网页。 然后，选择检查。
在生成的代码顶部，找到双箭头图标。 然后，单击它并选择Lighthouse 。
在下一页上，您将看到生成报告的选项。 当您单击此按钮时，Lighthouse 将审核您的网站。
审核完成后，您可以查看有关站点性能的详细分析。 您还将看到有关您的 SEO 和 Web 可访问性的报告。
然后，向下滚动直到看到Metrics 。 在本节中，您将看到您的Total Blocking Time 。
尽管 TBT 和 FID 相似，但需要注意的是 FID 是一个字段度量。 由于它是实时基于用户的，因此无法在实验室环境中进行测量。
Lighthouse 是一种实验室指标工具，因此其总阻塞时间指标不会评估实际交互性。 幸运的是，提高您的 TBT 分数也可以提高您的首次输入延迟。
如何减少 WordPress 中的首次输入延迟
当您使用上述工具之一测试您的网站时，您可能会收到较差的首次输入延迟分数。 幸运的是，您可以通过实施一些有效的策略来提高分数。
让我们看看如何减少 WordPress 中的首次输入延迟。
1.安装优化插件
一个简单的入门方法是安装一个专注于 Core Web Vitals 的插件。 通过这样做，您无需任何繁重的工作即可改善您的首次输入延迟。
Jetpack Boost 是一个功能强大且易于使用的插件，您可以使用它来优化您的 Core Web Vitals。 它提供了许多方法来提高您的网络性能并提高您的 FID 分数。
激活 Jetpack Boost 后，该工具会自动为您的网站提供性能评分。 您可以查看页面在移动和桌面视图上的加载速度。
然后，您可以自定义其设置以优化文件以实现快速加载。 通过优化 CSS、延迟 JavaScript 和实现延迟加载，您可以提高 FID 分数。
Jetpack Boost 是一个免费插件。 如果您已经在 WordPress 网站上安装了 Jetpack，则可以从仪表板激活 Jetpack Boost。
2.延迟渲染阻塞JavaScript
另一种优化 FID 分数的有效方法是延迟渲染阻止 JavaScript。 默认情况下，您网站上的所有 JavaScript 都是渲染阻止的。 这意味着浏览器将停止加载某个页面，直到它可以下载并执行这些脚本。
在这种情况下，您可以推迟 JavaScript 执行。 这将告诉浏览器首先呈现最相关的内容。
要识别这种阻止呈现的 JavaScript，您可以使用 PageSpeed Insights。 首先，在搜索栏中输入您网站的 URL。
然后，向下滚动到机会部分。 在这里，您会看到提高网络性能的建议。 找到它说消除渲染阻塞资源的地方。
当您展开此部分时，将会有一个资源列表，您可以完全推迟或消除这些资源。 在右侧，PageSpeed Insights 将向您展示这些更改如何影响您的加载时间。
一旦你决定在你的网站上推迟非必要的 JavaScript，你可以使用插件来简化这个过程。 使用 Jetpack Boost，您只需一步即可完成。
在您的 WordPress 仪表板中，导航到Jetpack → Boost 。 然后，找到标记为Defer Non-Essential JavaScript的设置。
最后，开启此功能。 实施后，开关将变为绿色。 现在，再次尝试通过 PageSpeed Insights 运行您的网站，看看您的 FID 分数是否有所提高。
3.推迟非关键CSS
当您在 PageSpeed Insights 中评估您的网站时，您可能还会看到其他渲染阻止资源。 与 JavaScript 类似，某些编码会阻止您的页面在浏览器读取时加载。
就像 JavaScript 一样，你可以推迟非关键的 CSS。 首先通过性能工具运行您的网站，看看您的 CSS 是否需要优化。
然后，您可以使用 Jetpack Boost 插件来优化您的 CSS。 在您的 WordPress 仪表板中，导航到Jetpack → Boost 。 然后，找到标有Optimize CSS Loading的设置。
单击此选项后，插件将自动为您的网站生成关键 CSS。 它将这些重要信息移动到页面的开头，这可以帮助您更快地加载内容。
推迟非关键 CSS 可以提高您的整体性能。 它还应该提高您在 PageSpeed Insights 上的 FID 分数。
4.消除不必要的JavaScript
如果您安装了很多插件或复杂的主题，您的网站可能运行了太多的脚本。 如果浏览器需要执行一长串脚本来加载您的网站，则可能会导致速度变慢。
显示您的网站需要许多脚本，但很可能，您有一些不必要的 CSS 和 JavaScript。 如果您不确定如何区分，可以返回 PageSpeed Insights。
与前三种方法一样，滚动到机会部分。 这一次，寻找未使用的 JavaScript 和 CSS。
在每个未使用的脚本旁边，都会有一个 URL，告诉您它的来源。 在此示例中，Google Analytics 和 Google Tag Manager 创建了一些不必要的 JavaScript。
如果您知道是哪个主题或插件导致了问题，您可以考虑删除它们。 然后，您可以安装编码良好且更轻量级的不同版本。
或者，您可以使用 Asset CleanUp 之类的插件来删除未使用的 CSS 和 JavaScript。 此工具可以消除渲染阻塞资源，以减少您网站的 HTTP 请求数量。
在站点上安装并激活 Asset Cleanup 后，转到仪表板中的Asset CleanUp → CSS/JS Manager 。 在此页面上，您可以选择网站的不同元素来查看其 CSS 和 JavaScript。
例如，您可以单击主页，它将在此页面上显示所有加载的文件。
此信息将根据位置列出。 您可以向下滚动页面以查看来自您的插件、主题、核心软件和第三方来源的脚本。
有两种方法可以删除一段脚本。 您可以在此特定页面或站点范围内卸载它。
删除未使用的脚本后，单击更新。 在此之后，您可以清除缓存以立即应用这些更改。
5. 缩小 CSS 和 JavaScript
尽管您可以轻松地从您的站点中删除脚本，但您只想摆脱那些您不使用的脚本。 对于必要的 CSS 和 JavaScript，您可以简单地缩小它们。
一个简单的方法是安装 Autooptimize 插件。 这是一个免费工具，可以在简单的设置过程后自动缩小您的 CSS 和 JavaScript 文件。
安装后，进入设置 → 自动优化。 在JavaScript 选项下，您可以选中优化 JavaScript 代码旁边的框。
然后，您需要对CSS Options执行相同的操作。 通过自定义这些设置，该工具将自动缩小您网站上现有的 CSS 和 JavaScript。
完成后，保存更改。 在此过程之后，您还可以选择清空缓存。
6.延迟JavaScript执行时间
为了进一步优化你的 JavaScript，你可以延迟它的执行时间。 这涉及告诉浏览器仅在用户与您的内容交互后才加载 JavaScript。 除非访问者向下滚动页面或单击按钮，否则不会处理这些脚本。
为此，您可以使用 Flying Scripts 之类的插件。 使用此工具，您可以延迟 JavaScript 文件的执行，直到您的网站上有访问者活动。
激活飞行脚本后，转到设置 → 飞行脚本。 这将打开插件的设置页面，您可以在其中开始实施 JavaScript 延迟。
首先编写标识要延迟的脚本的关键字。 例如，您可以将“gtag”用于 Google 跟踪代码管理器脚本。
然后，您可以实现超时。 本质上，这将在一段时间内没有活动时执行 JavaScript。 您可以设置一个最长十秒的计时器。 完成后，单击保存更改。
7. 实施内容交付网络
改善首次输入延迟的另一个有效选择是使用内容交付网络 (CDN)。 这是一组连接的服务器，可以将您的在线内容分发给世界各地的用户。
使用 CDN 时，您可以缩短服务器与在线访问者之间的距离。 这是因为当有人访问您的网站时，内容是从离他们最近的服务器传送的。 如果您在一个位置只有一台服务器，则将数据发送给国际用户可能需要很长时间。
幸运的是，使用 Jetpack 的网站已经提供了免费的 CDN。 如果您导航到Jetpack → 设置 → 性能，您可以打开站点加速器。
Jetpack 将优化您的图像和静态文件。 与其他 CDN 提供商不同，没有文件限制。 此外，您不必担心额外的月费或复杂的管理流程。
关于首次输入延迟的常见问题
到目前为止，我们已经了解了首次输入延迟的工作原理以及如何提高分数。 现在，让我们来看看关于 FID 的一些常见问题。
如何衡量我的 WordPress 网站的 FID 分数？
您可以使用 Core Web Vitals 工具轻松测量您网站的首次输入延迟分数。 PageSpeed Insights 是一个易于使用的选项。 您所要做的就是输入您网站的 URL，该工具将生成一份关于您网站性能的详细报告。
Google Search Console 的功能非常相似。 验证您拥有网站后，您可以查看基于真实访问者数据的 FID 报告。
您也可以使用灯塔。 此工具为您提供网站的总阻塞时间 (TBT)。 虽然这不会显示来自真实访问者的结果，但它可以让您更好地了解您的页面响应能力。
什么是好的 FID 分数？
简而言之，您的网站将属于以下三个分数之一：
- 好：100毫秒或更短
- 需要改进：范围从 100 毫秒到 300 毫秒
- 差：大于300ms
测量 FID 分数后，任何超过 100 毫秒的结果都需要进行一些调整。
如何轻松优化我的 FID 分数？
您可以通过优化网站上的脚本来提高 FID 分数。 通常，复杂的 JavaScript 和 CSS 文件会提示浏览器停止加载，直到它处理它们。 通过删除、推迟或缩小脚本，您可以提高网站的速度。
尽管您可以为此过程使用不同的工具，但 Jetpack Boost 可以帮助您一次实施多个解决方案。 使用这个插件，您可以优化您的 CSS 结构并推迟非必要的 JavaScript。
改善您的第一印象
当新访问者与您的网站进行交互时，他们希望他们的浏览器能够快速响应。 如果您的网站具有较高的首次输入延迟 (FID)，则可能会导致用户在未阅读您的内容的情况下离开页面。 通过关注您网站的响应时间，您可以改善用户体验并留住更多访问者。
由于繁重且效率低下的 JavaScript 和 CSS 编码，您的网站的 FID 分数可能很差。 幸运的是，您可以使用 Google 的 PageSpeed Insights 等工具轻松识别这些问题。 然后，您可以安装像 Jetpack Boost 这样的插件来缩小或延迟 CSS 和 JavaScript。