wordpress知识库
网站首页 > 知识库 > wordpress知识 >

如何改善 WordPress 网站上的首次输入延迟 (FID)

2016/10/27

我们最近开始了一个关于 Google 核心 Web 指标的新系列,并发表了一篇关于 Largest Contentful Paint 的帖子。在这里,我们想继续讨论下一个候选者:First Input Delay 或简称 FID,以及如何在 WordPress 中改进它。

在下文中,我们将深入探讨什么是 FID 以及如何为此优化您的 WordPress 网站。您将学习如何理解和测量首次输入延迟,您应该瞄准什么值,以及如何在必要时改进它。

请注意,本文假设您已经熟悉 Google Core Web Vitals 及其对用户体验和搜索引擎优化的影响。如果您不确定其中任何一个,请查看本系列的第一篇文章或我们关于 Core Web Vitals 的独立帖子。

什么是首次输入延迟?

如前所述,FID 是衡量网站用户体验的三个指标之一,谷歌认为这些指标是判断网站用户友好程度的核心价值。这也是他们搜索算法的一部分,所以如果你在这方面得分很差,你的搜索排名就会受到影响。

但是,究竟什么是首次输入延迟?

简而言之,FID 量化了用户与网页交互(例如单击按钮)与浏览器能够响应该交互的时间之间的延迟。这反映了网页的响应能力。

启动块上的流道符号表示首次输入延迟

Largest Contentful Paint 计算网页对访问者有用的时间,而 FID 则通过执行访问者想要的任何操作来衡量它保持有用的程度——即使在加载期间也是如此。当然,如果您的网站响应速度更快,则会带来更好的用户体验。

您可能从自己的互联网使用中知道这一点。曾经访问过一个花了很长时间才对你的输入做出反应的网站吗?你不喜欢这样,是吗?好吧,您的网站访问者也没有。

FID是如何计算的?

FID 以毫秒 (ms) 为单位。为了计算它,浏览器会跟踪用户交互在页面上发生的时刻以及浏览器主线程处理该交互所需的时间。FID 分数表示两个事件之间的延迟。因此,较低的 FID 分数表明该页面具有高度的交互性,并且对用户输入的响应速度很快。

在这一点上,你可能要问:什么是“主线”?什么算作互动?

答案:主线程基本上是浏览器的工作管道。渲染和运行网站所需的所有进程都通过它运行。如果它一直很忙,则需要更长的时间才能对新输入做出反应。

金属管作为浏览器主线程的替代品

至于什么算作交互,可以是点击链接、点击按钮、使用下拉菜单、文本字段、复选框或单选按钮,以及按键盘上的一个键(例如,Esc 关闭弹出窗口)。

什么原因导致FID

首次输入延迟通常在首次内容绘制(当第一个页面元素出现在浏览器窗口中时)和交互时间(当页面首次变得可用并响应用户输入时)之间最高。

基本上,输入延迟源于当浏览器忙于其他事情而用户尝试做某事时。在这种情况下,它无法及时响应输入,从而导致网站访问者的等待时间。

在技术方面,常见的罪魁祸首是:

  • 浏览器需要解析和执行的大型 JavaScript 文件
  • Render-blocking resources that it has to wait for
  • Heavy calculations, DOM manipulation, or resource-intensive processes
  • Slow network connections or high latency that can lead to delays in fetching website files and other resources
  • Activities that block the main thread, such as heavy animations, long-running CSS transitions, or large image processing

关于首次输入延迟,最后需要注意的一点是,它将在 2024 年 3 月被另一个称为“与下一次绘画的交互”(INP) 的指标所取代。但是,就目前而言,FID是我们正在使用的,因此熟悉它仍然很重要。

如何测量首次输入延迟

您可以使用与其他 Core Web Vitals 几乎相同的工具测试您网站的 FID:

  • PageSpeed Insights — 只需输入您的页面 URL,即可收到包含您的 FID 值的报告。
  • Chrome 用户体验报告 — Google 通过其浏览器从许多网站收集和编译真实的用户体验数据。您可以通过不同的工具访问这些数据,包括此处提到的工具。
  • Search Console — 借助 Google Search Console 中的“Web Vitals”报告,您可以了解 FID 读数不佳的网页。
  • web-vitals JavaScript 库 — 如果您更倾向于技术,可以将此 JavaScript 库构建到您的网站中,并从那里获取有关 Core Web Vitals 的信息。

这些工具中的大多数只是在其结果中显示 FID 值,以便您知道自己在处理什么。

PageSpeed Insights 中的 FID 指标

需要注意的是,此指标需要真实的用户交互。这不是您可以在实验室类型的环境中模拟的东西。因此,最好的来源是真实用户数据,例如来自 CrUX 报告的数据。

如果要事先在实验室环境中测试站点,则最佳代理指标是“总阻塞时间”。例如,您也可以在 PageSpeed Insights 中找到它。

PageSpeed Insights 中的总阻止时间

此外,关注您网站上真正最糟糕的 FID 情况,它会告诉您最了解问题所在。

什么是好的首次输入延迟?

这就留下了一个问题,你应该拍摄多少数字?良好的 FID 分数通常低于 100 毫秒。100 到 300 毫秒之间的分数被认为需要改进。超过 300 毫秒的所有内容都表明用户体验不佳。

第一个输入延迟性能刻度

因此,考虑到这些基准,让我们学习如何更好地提高您网站上的首次输入延迟。

如何改善 WordPress 网站上的首次输入延迟

改进 FID 主要涉及优化网页的性能并减少任何可能延迟浏览器对用户输入响应的阻止任务。后者最常见的罪魁祸首是大量或不正确地使用 JavaScript。出于这个原因,下面的许多措施将集中于此。但是,您还可以做其他事情。

一般绩效改进措施

当您想要改进 FID 时,我们已经介绍过的关于如何改进 Largest Contentful Paint 的许多技术也适用,包括:

  • 优化您的网站环境 — 您的网站通常越快,资源交付的速度就越快,从而缩短交互时间。因此,投资于高质量的托管、主题和插件。此外,减少您网站上的插件数量并保持更新。此外,实现缓存和压缩。
  • 实施 CDN — 内容分发网络允许您缩短服务器和用户之间的距离,从而加快文件交付速度。
  • 消除渲染阻塞资源 — 网站中任何使加载过程停滞不前的部分都会对用户体验和 Core Web Vitals 的所有部分产生负面影响。从您的网站中删除它们有助于解决该问题。有关渲染阻塞 JavaScript 的更多详细信息,请参见下文。

有关更多提示,请查看我们关于如何加速 WordPress、如何减少服务器请求以及关于速度测试您的网站的文章。

减少、延迟、异步和缩小 JavaScript

如前所述,JavaScript 通常是导致 FID 结果不佳的主要因素。以下是如何优化网站上的标记,以免成为问题。

减少整体加价

当然,你能做的最好的事情就是减少页面上的整体 JavaScript。检查浏览器开发人员工具中的“覆盖范围”选项卡,以查找网页上未使用的 JavaScript。

Chrome 开发者工具中未使用的 CSS JavaScript 的覆盖率数据

看看你的网站作为一个整体是否有必要,或者你是否可以完全删除未使用的JavaScript。

在 WordPress 中,过多的 JavaScript 通常是由于插件或主题太多的结果,这些插件或主题带有很多花里胡哨的东西,导致首次输入延迟。因此,如果您想摆脱它,请检查是否有办法消除其中一些或切换到更精简的版本。

异步和延迟脚本

之后,下一步是优化 JavaScript 向浏览器的交付。这里的主要问题是,除非另有说明,否则当浏览器在您的网站标记中遇到 JavaScript 脚本时,它会停止呈现 HTML,直到下载并执行该脚本。这也称为上面提到的“渲染阻塞资源”。

但是,有一些方法可以解决它,它们基于两个关键字:

  • async– 将其添加到您的脚本调用中,允许浏览器在后台下载它,而无需暂停页面的处理。它只会在下载后执行,独立于页面的其余部分。
  • defer– 与 非常相似。它告诉浏览器不要等待脚本,而是继续构建页面。但是,在这种情况下,它将在页面的其余部分完全构建后最后加载脚本。async

以下是在实践中的使用和外观:asyncdefer

<script async src="https://mywebsite.com/wp-content/themes/mytheme/analytics.js"></script>
<script defer src="https://mywebsite.com/wp-content/themes/mytheme/analytics.js"></script>

可以想象,这两种方法都可以在页面加载过程中节省大量时间。它们的主要区别是:保持脚本的相对顺序与它们在文档中的显示方式相同,同时使用脚本完成下载的顺序。deferasync

您可以同时使用两者来使未使用的和非关键的 JavaScript 稍后加载。这包括第三方脚本,例如分析。

缩小 JavaScript 以加快下载

最后,对于加载的 JavaScript,请务必将其缩小。缩小意味着删除所有标记和代码格式,这些标记和代码格式只是为了使文件对人类清晰易读。

如何减少 HTTP 请求 WordPress CSS 缩小示例

它进一步减小了文件大小,并使浏览器下载速度更快。有很多工具可以做到这一点,包括下面的插件推荐。

分解冗长的任务

除了减少网站上的整体 JavaScript 和改善交付之外,您还可以通过将剩余的内容分解为更小的块来优化 WordPress 网站上的首次输入延迟。如果您的页面上有很多“长任务”,这尤其合适。

你问什么是长任务?

任何阻塞主线程超过 50 毫秒的内容。您可以在标有红旗的 Chrome 开发者工具中看到这些内容。

长任务危险信号 Chrome 开发者工具

如果将它们切成更小的部分,则可以异步加载它们,从而减少主线程中的不间断工作。

你是怎么做到的?

通过使用代码拆分。它允许您有条件地加载 JavaScript 块,以便从一开始就只加载至关重要的代码。其余的只在必要时发挥作用。您还可以将任务分解为更小的独立函数。这两种方法都是保持页面响应性的方法。

有关如何处理长任务的更多技术提示,请查看此资源。

有用的 WordPress 插件来改善 FID

我们知道,优化 JavaScript 文件并不是每个人都喜欢的,特别是如果您不是开发人员。出于这个原因,我们编译了一些 WordPress 插件和工具,可以帮助您更好地提高首次输入延迟值。

  • Asset Cleanup – 此插件允许您禁用未使用的 CSS 和 JavaScript、预加载字体、缩小文件、延迟 JavaScript 等。
  • Flying Scripts— 允许您延迟非关键 JavaScript 的执行,直到没有用户活动。
  • Plugin Organizer — 更改插件在您的网站上加载的顺序,并在所选页面或内容类型上有选择地关闭它们。
  • Autoptimize — 可以自动合并和缩小 CSS 和 JS 文件,以及添加和添加到脚本中。它也超级易于使用。asyncdefer
  • WP Rocket — 一个付费缓存插件,可以做很多我们上面谈到的事情。通常,大多数缓存插件都提供类似的功能。