什么是第一输入延迟以及如何改善它

热门技术勘探工
891 阅读14分钟

什么是首次输入延迟以及如何改善它

What Is First Input Delay and How to Improve It

首次输入延迟（FID），也被称为输入延迟，计算网站从第一次用户互动到浏览器响应的时间。

滚动和缩放不能用第一输入延迟来衡量，因为它们在RAIL模型中被归类为动画方面。FID只关注网站的响应能力，测量处理用户请求的延迟。

分析输入延迟是至关重要的，因为它影响到你的网站的用户体验。如果一个网站的加载时间超过4秒，甚至有25%的访问者会离开网站。

在这篇文章中，我们将介绍第一个输入延迟，从它的定义、重要性、优化到它与其他核心网络指标的关系。我们还将解释如何测试你的FID得分，以及为什么它可能很低。

下载网站启动检查表

  • 什么是首次输入延迟（FID）？
  • 为什么首次输入延迟很重要？
  • 如何测试你的首次输入延迟
  • 如何找到FID得分低的原因
  • 优化首次输入延迟（FID）的8种方法
  • 首次输入延迟与其他指标的关系

什么是首次输入延迟（FID）？

首次输入延迟是一个指标，用于跟踪浏览器对用户输入做出反应之前的延迟时间，包括点击和敲击。

为什么首次输入延迟很重要？

影响网站印象的因素之一是首次输入延迟。它与最大内容画幅（LCP）和累计布局偏移（CSL）一样，都属于核心网络指标。

通过Core Web Vitals，你可以测量你的页面性能，以及调查所提供的报告，以帮助你提高网站的性能。

此外，这些指标影响用户体验和网站的排名，影响你的搜索引擎优化（SEO）工作。页面速度是谷歌排名的主要因素之一。

如果网站需要很长的时间来响应用户的互动，也会使用户感到沮丧。

由于大多数响应性问题发生在网页加载时，保持较低的首次输入延迟分数至关重要。

如何测试你的首次输入延迟

在了解了为什么第一个输入延迟对你的页面很重要之后，现在是时候测试它，以改善你的网站性能，实现更好的用户互动。

与累积布局转移和最大内容的油漆不同，首次输入延迟只能通过用户在页面上的真实互动来衡量。

下面是你可以用来测试首次输入延迟的工具列表。

  • Web Vitals JavaScript库 - ，该工具是为前端监控而建立的，有助于在短时间内分析每一个指标，并具有很高的准确性。每个指标都定义为一个函数，即onReport回调。在配置了你的web-vitals库后，该工具将报告你的页面是否达到了推荐的阈值。

  • Chrome用户体验报告 - 也被称为CrUX，这个工具帮助开发者通过基于真实用户数据的核心Web Vitals和诊断指标提高网站的可用性。CrUX受到标准网络平台API的支持，这意味着你可以使用相同的API来收集真实用户监测（RUM）数据。

  • 搜索控制台的核心网络指标报告 - 帮助网站开发人员修复不良的用户体验。它根据90天内的现场数据，按URL状态、组别和指标类型评估您的网站性能。请注意，该报告只针对被索引的URL，并且是基于Web Core Vitals的。因此，如果一个URL没有足够的信息用于任何指标，它将被从报告中略去。

  • 页面速度洞察 - 快速检查最新的网站性能。它将信息分为桌面和移动用户和数据，以修复用户体验和调试问题。

例如，如果你想使用PageSpeed Insights来测试你的首次输入延迟，只需在搜索框中输入一个URL。这样做了之后，你会得到一份关于你的页面的核心网络生命力的评估，以及改善你的页面的建议。你还可以看到你的网页上的输入延迟有多长。

Desktop screenshot of Core Web Vitals assessment in PageSpeed Insights

什么是好的FID分数？

一般来说，0.1秒是让用户感到系统即时反应的极限。

因此，为了从第一次输入延迟和快速的用户输入中得到一个好的分数，一个网站需要一个小于100毫秒的FID作为最大值。理想情况下，它应该在75%的所有页面加载中小于100毫秒，包括移动和桌面设备。

下图显示了首次输入延迟得分如何分为好、需要改进和差。

First input delay score: up to 100 ms is good, up to 300 ms needs improvement, and more than 300 ms is poor.

最大潜在的首次输入延迟

最大潜在首次输入延迟（MPFID）是一个页面最长的任务。MPFID测量一个页面在最长的任务运行时的响应时间。请注意，只有在计算出第一个有内容的油漆后才开始测量。

分数结果取自最大潜在FID时间与真实网站中最大潜在FID时间的比较。例如，如果你的MPFID得到绿色分数，这意味着你的网页比**90%**的真实网站表现得更好。

Max potential FID time (in milliseconds): 0-100 is fast, 100-300 is moderate, over 300 is slow

如何找到低FID分数的原因

当你得到一个较低的首次输入延迟分数时，要找出页面的哪些部分需要改进，以使你的页面运行得更好。

导致浏览器无法及时响应用户互动的主要原因之一是用户输入被阻止。它发生在浏览器的主线程忙于做其他任务的时候。

这些任务通常包括处理HTML、CSS和Javascript，使它们工作过度。一个长的JavaScript任务是一个常见的错误，它导致主线程延迟，事件监听器不能在页面上运行。要找到这个问题，请使用PageSpeed Insights，在避免长主线程任务审核部分下查找。

PageSpeed ​​Insights scressnshots with "avoid long main-thread tasks" highlighted

优化首次输入延迟（FID）的8种方法

在学习了如何测试你的FID得分并找出任何潜在的原因后，现在是时候优化它了。

通常情况下，JavaScript对你的FID得分有最重要的影响。出于这个原因，优化你的JavaScript代码是非常必要的。

按照下面的建议来做。

1.将长的任务分成小的任务

难度等级： 简单

影响： 高

当浏览器的主线程繁忙并被阻断时，用户的请求就不能被处理。这使得页面没有反应。响应性不足是由于任务运行时间超过50毫秒造成的。

JavaScript任务会消耗大量的资源，会影响你的网站速度性能。为了解决这个问题，请删除它们或将长的任务分成小的、异步的任务。至少，一个任务应该在50毫秒以下。

你可以使用setTimeout函数将长任务分成小任务，因为这将使主线程对用户输入的响应没有延迟。

2.实现渐进式加载

难度等级： 中等

影响： 高

拥有一个快速加载的网站可以提高其用户体验。许多组件，如大型图片或JavaScript任务，会使网络浏览器变慢。

为了解决这个问题，通过将你所有的JavaScript文件捆绑到bundle.js中来创建渐进式加载代码。为此，你可以使用一个webpack。

捆绑还可以帮助你最小化页面大小，删除未使用的代码，或更容易地将其最小化。此外，它使浏览器只在需要时加载UI组件。

3.将逻辑转移到服务器端

难度等级： 难

影响： 高

服务器端渲染（SSR）是指在服务器上显示网页。

通过服务器端渲染，你的页面可以快速显示，无需等待资源可用。它可以解决索引页面和抓取预算问题，有利于你的SEO。

此外，服务器端渲染可以通过避免向客户端发送大的JavaScript文件来提高首次内容绘制的速度和互动时间（TTI）。因此，你的网页加载将运行得更快。

你可以使用Vue、React或Svelte等前端框架渲染服务器端的版本。在使用这些应用程序之前，确保你已经安装了Node.js，以便在服务器上运行JavaScript。

4.静态生成内容

难度等级： 中等

影响： 高

与服务器渲染不同，静态渲染在构建时生成一次准备好的单一HTML页面。它可以帮助用户提前访问该页面。

你可以使用静态网站生成器，如Gatsby，从数据、内容和模板创建静态HTML页面。然后，它将生成一个可以提供给用户的页面视图。

请注意，静态渲染不适合包含许多页面或需要在每次请求中改变响应的大型网站。通过生成你的所有内容，网站需要被部署和测试，影响实时更新。此外，你的部署可能变得不切实际。

5.审查第三方脚本的执行情况

难度等级： 难

影响： 高

一个缓慢的页面加载时间可能是由第三方脚本引起的，这些脚本为网站增加了功能，如即时聊天、广告和分析。第三方代码可能会导致问题，如处理过多的网络请求，向不同的服务器发送大型的JavaScript任务或图像文件，阻塞主线程。

要审查你的第三方脚本，你可以在PageSpeed Insights上测试你的网站。它将向你显示加载的第三方资源的列表，以及传输大小和主线程阻塞时间。

使用async或defer属性来改善你在第三方脚本中的加载时间。这样做将帮助你消除渲染阻塞问题，并触发更快的网页加载过程。对页面加载至关重要的重要脚本不应该使用async或defer属性，因为它只针对外部脚本。

6.利用网络工作者

难度等级： 难

影响： 高

Web工作者有助于减少主线程的阻塞时间，提高网站的FID得分。它们允许你把长任务放在后台线程上，而不干扰用户界面，使你的网站反应更灵敏。

使用**Worker("path/to/worker/script")**代码来创建一个工作者。它可以通过向JavaScript代码指定的事件处理器发布消息来向该代码发送消息，反之亦然。此外，Web Worker 可以使用XMLHttpRequest或fetch 来执行输入或输出任务。

为了帮助您使用网络工作者，请查看以下库。

  • Comlink- 一个小小的库，它简化了**postMessage/**的使用。
  • Workway- 一个 Web Worker 输出器。
  • Workerize- 一个webpack加载器，可以将模块移到web worker中。

7.优化未使用的和非关键的JavaScript

难度等级： 难

影响： 高

太多的JavaScript任务将需要大量的时间来解析和执行。因此，浏览器的响应时间将被推迟。浏览器在发现链接到外部JavaScript代码的脚本标签时，会暂停。这就是为什么只运行需要的代码很重要。

有一些选项可以优化JavaScript，比如代码拆分和推迟任何非关键的JavaScript。在此之前，你可以使用Chrome DevTools中的Coverage选项卡，看看你的网页上有多少未使用的JavaScript。

代码拆分允许你将JavaScript包分成几块，帮助你的页面只在需要的时候加载。这也被称为懒惰加载。同时，为了推迟任何非关键的Javascript任务，对于那些对关键的渲染路径或折叠上方不重要的脚本总是使用async或defer。

8.修改Polyfills的用法

难度等级： 难

影响： 低

Polyfill是用于在不支持现代功能的旧浏览器上提供现代功能的代码。例如，当使用现代的JavaScript语法和浏览器API来创建代码时，你需要转译它并提供polyfills，以便现代功能可以在旧的浏览器上运行。

使用polyfills将创建更多的包，这些包将需要更长的时间来加载给浏览器。因此，必须尽量减少未使用的polyfills，只在需要的时候使用它们。

为了减少你的网页所需的加载时间，你可以使用JavaScript编译器，比如Babel，并使用@babel/preset-env来包含旧版浏览器所需的polyfills。你也可以通过启用Babel 7.9的bugfixes选项来减少未使用的polyfills。

或者，使用模块/非模块提供两个单独的捆绑包，以优化polyfills。

首次输入延迟与其他指标的关系

首次输入延迟（FID）是一个必须用基于真实用户互动的数据字段来测试的指标。此外，你应该监测与FID相关的其他指标。

让我们详细分析一下其他指标与FID分数的关系。

第一次输入延迟与第一次内容丰富的绘画（FCP）

第一次内容绘制衡量的是页面从最初加载到内容显示在屏幕上所需的时间。页面内容来自于文档对象模型（DOM），包括图像、文本或图表。

同时，首次输入延迟衡量的是浏览器响应所需的时间。这两件事极大地影响了用户在与页面互动前后的第一印象。FID和FCP有坚实的相关性，可以给用户一个更好的第一印象。

此外，快速的FCP有助于用户意识到他们请求的信息正在被处理，使他们留在网站上。

首次输入延迟与互动时间（TTI）的关系

互动时间（TTI）衡量一个页面成为完全互动的时间。该测量从FCP执行后开始，当用户可以在页面上进行互动时。

一个完全互动的页面意味着页面对用户互动的响应时间小于50毫秒，并且大部分可见的页面元素的事件处理程序都被注册。

通过了解你的TTI，你可以确定你的网站页面是否完全可以使用。伴随着良好的FID，你的网页可以根据用户的需要进行完全的互动。

首次输入延迟与总阻塞时间(TBT)

总阻塞时间（TBT）和FID是非常相似的。它们都衡量页面上的响应时间有多长。不同的是，TBT不使用用户输入。简而言之，TBT是长任务阻塞主线程的时间量。

网页上的长Javascript任务会影响FID和TBT的评估。通过查看FID和TBT指标，你可以看到长任务对网站响应性的影响有多大。

这两个指标在页面的可用性方面产生了很强的关联性并相互影响。因此，增加你的TBT分数可以用来优化你的FID。

结论

拥有一个响应式的网站会大大影响你的网站的用户体验。这就是为什么测试和分析核心网络生命体征是至关重要的，包括首次输入延迟（FID）。通过这样做，你可以提高你的网站页面的性能。

导致长输入延迟的最常见的问题是主线程受阻。它通常是由未优化的JavaScript引起的。因此，为了提高首次输入延迟得分，通过以下方式优化你的JavaScript代码。

  • 分解长任务。

  • 实施渐进式加载。

  • 使用服务器端渲染。

  • 静态地生成内容。

  • 审核第三方脚本。

  • 使用网络工作者。

  • 推迟未使用的和非关键的 JavaScript。

  • 限制polyfills的使用。

avatar
文章
阅读
粉丝