什么是首次输入延迟？

了解什么是首次输入延迟（FID），是什么原因造成的，以及改善这一核心网页指标的不同解决方案。

首次输入延迟（FID）是一个用户体验指标，谷歌将其作为一个小的排名因素。

本文对FID做了一个简单易懂的概述，以帮助理解这个话题。

首次输入延迟不仅仅是为了取悦谷歌。对网站性能的改进通常会导致销售、广告收入和线索的增加。

什么是首次输入延迟？

FID是指在网站加载过程中，浏览器对网站访问者与网站的第一次互动作出反应所需的时间的测量。这有时被称为输入延迟。

一个互动可以是点击一个按钮，一个链接，或一个按键，以及随后的反应。文本输入区、下拉菜单和复选框是FID将测量的其他类型的交互点。

滚动或缩放不算是互动，因为网站本身没有预期的反应。

FID的目标是衡量一个网站在加载过程中的响应程度。

首次输入延迟的原因

首次输入延迟通常是由图像和脚本的非有序下载引起的。

这种无序的编码导致网页下载过度暂停，然后开始，然后暂停。这对试图与网页互动的网站访问者造成了无响应的行为。

这就像一个没有交通信号等所造成的交通堵塞。解决这个问题就是要给维持交通秩序。

谷歌对输入延迟的原因是这样描述的：

"一般来说，输入延迟的发生是因为浏览器的主线程正忙于做其他事情，所以它不能对用户作出反应。

发生这种情况的一个常见原因是，浏览器正忙于解析和执行由你的应用程序加载的一个大型JavaScript文件。

当它这样做的时候，它不能运行任何事件监听器，因为它正在加载的JavaScript可能会告诉它去做别的事情。"

如何解决输入延迟的问题

由于首次输入延迟的根本原因是脚本和图像的无序下载，因此解决这个问题的方法是将这些脚本和图像呈现给浏览器下载的方式变得有序。

解决FID的问题通常包括使用HTML属性来控制脚本的下载方式，优化图像（HTML和图像），并省略不必要的脚本。

其目的是优化下载的内容，以消除典型的暂停和开始下载无组织的网页的现象。

浏览器为何变得无响应

浏览器是完成任务以显示网页的软件。这些任务包括下载代码、图像、字体、样式信息和脚本，然后运行这些脚本，并根据HTML指令建立网页。

这个过程被称为渲染。渲染这个词的意思是 "制作"，这就是浏览器通过组合代码和图像来渲染网页的工作。

各个渲染任务被称为线程，是 "执行线程 "的简称。这意味着一个单独的行动序列（在这种情况下，为渲染一个网页所做的许多单独的任务）。

在浏览器中，有一个线程叫做主线程，它负责创建（渲染）网站访问者看到的网页。

主线程可以被想象成一条高速公路，其中的汽车象征着一个人访问网站时正在下载和执行的图像和脚本。

有些代码又大又慢。这导致其他任务停下来，等待大而慢的代码离开高速公路（完成下载和执行）。

我们的目标是对网页进行编码，优化哪些代码先被下载，以及代码何时被执行，以一种有序的方式，使网页以最快的方式下载。

不要为第三方代码失眠

当涉及到核心网页指标，特别是第一输入延迟时，你会发现有一些代码是你无能为力的。然而，您的竞争对手也可能是这种情况。

例如，如果你的业务依赖于Google AdSense（一个大的渲染阻断脚本），那么这个问题对你的竞争对手来说也会一样。使用谷歌广告管理器的延迟加载等解决方案可以提供帮助。

在某些情况下，可能只要做到最好就够了，因为你的竞争对手也可能做得不好。

不要为那些你无法改变的损失而烦恼。

JavaScript对首次输入延迟的影响

JavaScript就像一个让事情发生小引擎。当在表单中输入一个名字时，JavaScript可能会在那里确保同时输入名字和姓氏。

当一个按钮被按下时，JavaScript可能会告诉浏览器在一个弹出窗口中生成一条感谢信息。

JavaScript的问题是，它不仅要下载，而且要运行。因此，这是导致输入延迟的两件事。

如果一个大的JavaScript文件位于页面顶部附近，那么该文件将阻止它下面的其他页面的渲染（变得可见和互动），直到该脚本完成下载和执行。

这就是所谓的阻挡页面。

显而易见的解决方案是将这些脚本从页面的顶部移到底部，这样它们就不会干扰到所有其他等待渲染的页面元素。

但这可能是一个问题，例如，它被放在一个很长的网页的末尾。

这是因为一旦大页面加载完毕，用户准备与之互动，浏览器仍会发出正在下载的信号（因为大的JavaScript文件在最后滞后）。页面的下载速度可能会加快，但在等待JavaScript执行时就会停滞。

这有一个解决方案!

Defer和Async属性

Defer和Async HTML属性就像交通信号灯，控制着JavaScript下载和执行的开始和停止。

HTML属性是改变HTML元素的东西，有点像扩展元素的目的或行为。

这就像你学会了一种技能；这种技能成为你的一种属性。

在本例中，Defer和Async属性告诉浏览器，在下载时不要阻止HTML解析。这些属性告诉浏览器在下载JavaScript的时候保持主线程的运行。

Async属性

带有Async属性的JavaScript文件将被下载，然后在下载后立即执行。当它开始执行时，就是JavaScript文件阻塞主线程的时间点。

通常情况下，该文件在开始下载时就会阻塞主线程。但有了async（或defer）属性就不会了。

这被称为异步下载，它的下载独立于主线程，并与之并行。

异步属性对第三方JavaScript文件很有用，比如广告和社交分享--这些文件的执行顺序并不重要。

Defer属性

带有 "defer "属性的JavaScript文件也会以异步方式下载。

但延迟的JavaScript文件将不会执行，直到整个页面被下载和渲染。延迟的脚本也是按照它们在网页上的位置顺序执行的。

带有defer属性的脚本对于那些依赖于页面元素被加载的JavaScript文件是很有用的，当它们的执行顺序很重要的时候。

一般来说，对于那些对页面本身的渲染并不重要的脚本，请使用defer属性。

所有用户输入的延时都不同

重要的是要知道，第一输入延迟的分数是可变的和不一致的。分数因访问者而异。

分数的这种差异是不可避免的，因为分数取决于访问网站的个人的互动情况。

有些访客可能会分心，直到所有资产都已加载并准备好进行互动的时刻才进行互动。

谷歌是这样描述的：

"并不是所有的用户在每次访问时都会与你的网站互动。而且不是所有的互动都与FID有关......"

此外，一些用户的第一次互动会在不好的时候（当主线程长时间忙碌时），而一些用户的第一次互动会在好的时候（当主线程完全空闲时）。

这意味着有些用户将没有FID值，有些用户将有低的FID值，而有些用户可能会有高的FID值"。

总结

展望未来，我们可以期待越来越多的负责CMS、主题和插件的软件开发人员将过渡到有利于第一输入延迟的编码实践。

但在这之前，出版商有责任采取措施改善首次输入延迟的情况。了解它是第一步。

[外贸知识网图文来源于网络,如有侵权,请联系删除]