第一个输入延迟 – 一个简单的解释 – 搜索引擎期刊

首先输入延迟(FID)是指谷歌用作小排名因子的指标的用户体验。

本文提供了易于理解的FID概述,以帮助了解主题。

第一个输入延迟不仅仅是试图取悦谷歌。现场性能的改进普遍导致销售,广告收入和线索增加。

什么是第一个输入延迟?

FID是浏览器响应a所花费的时间的测量站点访问者的

在站点加载时,第一个交互

在网站时使用该网站。这有时被称为输入延迟。 可以攻击按钮,链路或键盘,以及响应给出的响应。文本输入区域,下拉列表和复选框是FID W的其他类型的交互点措施不计。

滚动或缩放不计入交互,因为网站本身没有预期的响应。

FID的目标是测量网站在加载时的响应程度。

下面的广告传票读数读数的第一输入延迟的原因

第一输入延迟通常由以非有序方式下载的图像和脚本引起。

这种无序编码导致网页下载过度暂停,然后启动,然后暂停。这会导致站点访问者尝试与网页交互的无响应行为。

就像一个没有流量信号的自由造成的交通拥堵。修复它是关于将订单带到流量。

谷歌描述了输入Latenc的原因y

如下:

“一般来说,输入延迟(aka输入延迟)发生,因为浏览器的主线程正忙于做其他事情,所以它不能(又计)响应用户。

这可能发生的一个常见原因是浏览器正在忙于解析并执行应用程序加载的大型JavaScript文件。

虽然它正在这样做,但它无法运行任何事件侦听器因为javascript它的加载可能会告诉它要做其他事情。“

下面

如何修复输入延迟

,因为第一输入延迟的根本原因是杂乱的下载脚本和图像,解决问题的方法是仔细地将这些脚本和图像呈现给浏览器以进行下载的方式。

解决问题M的F FID通常包括使用HTML属性来控制脚本如何下载,优化图像(HTML和图像)以及周到省略不必要的脚本。

目标是优化下载以消除典型暂停的内容 – 启动下载未经组织的网页。

为什么浏览器变得无响应

浏览器是完整任务以显示网页的软件。任务包括下载代码,图像,字体,样式信息和脚本,然后根据HTML指令运行(执行)脚本并构建网页。

此过程称为渲染。渲染意味着“制作”,这是通过组装代码和图像来渲染网页的浏览器所做的。

个人重新ndering任务称为线程,短暂的“执行线程”。这意味着单独的动作序列(在这种情况下,完成了渲染网页的许多单独任务)。

在浏览器中,有一个称为主线程的线程,它负责创建(呈现)网站访问者看到的网页。

主线程可以被视为一个高速公路,其中汽车是在访问网站时下载和执行的图像和脚本的象征性。

一些代码很大且慢。这会导致其他任务停止并等待大小慢速代码来下车(完成下载和执行)。

目标是以优化下载哪个代码的方式编写网页首先以及代码exe以有序的方式切割,使网页以最快的方式下载。

不要超过第三方守则

在核心网络毒品尤其是通过第一个输入延迟,您会发现您有一些代码对您无法做到很多。但是,这也可能是您的竞争对手的情况。你的竞争对手也是如此。使用Google Ad Manager的延迟加载如

延迟加载可以帮助。

在某些情况下,可能足以做到最好,因为您的竞争对手也可能不做更好。

在这些情况下,最好把你的胜利放在你的地方可以找到它们。不要在你无法改变的地方出汗。

JavaScript对第一输入延迟的影响

JavaScript就像一个让事情发生的一点引擎。当在表单上输入名称时,JavaScript可能会在那里确保输入的第一个和姓氏。

当按下一个按钮时,JavaScript可能会在那里告诉浏览器Spawn谢谢在弹出窗口中的消息。

JavaScript的问题是它不仅必须下载,而且必须运行(执行)。因此,这些是有助于输入延迟的两件事。

如果大的JavaScript文件位于页面顶部附近,则该文件将阻止其余的页面下方的渲染下的其余页面(变得可见和互动)你nttil脚本已完成下载和执行。 这被称为阻塞页面。

显而易见的解决方案是从页面顶部重新定位这些种类的脚本并将它们放在底部,所以它们不会干扰等待渲染的所有其他页元素。

但是如果例如,它可能是在很长的末尾放置的问题网页

这是因为一旦加载大页面并且用户准备好与它交互,浏览器仍将发出信号,它正在下载(因为大JavaScript文件结束滞后) 。页面可以在等待JavaScript执行时更快地下载更快但更快,然后在等待JavaScript上执行。

EFER和ASYNC属性

延迟和异步HTML属性是控制启动和停止JavaScript如何下载和执行的流量信号。

HTML属性是转换HTML元素的东西,有点像扩展元素的目的或行为。

这就像你学到技能时;该技能成为您是谁的属性。

在这种情况下,推迟和异步属性告诉浏览器在下载时不会阻止HTML解析。这些属性告诉浏览器将在JavaScript正在下载时保持主线程。

async属性

使用Async属性的JavaScript文件将下载,然后即将执行正如下载的那样。当它开始执行时是一个点JavaScript文件阻止主线程。

正常情况下,该文件将在开始下载时阻止主线程。但不使用异步(或DEFER)属性。

这被称为异步下载,其中它独立于主线程下载并与其并行下载。

下面的广告联交影读数

ASYNC属性对第三方JavaScript文件(如广告和社交共享)有用 – 执行顺序无关紧要的文件。

defer属性

JavaScript文件与“

Defer

“属性也将异步下载。

但延迟的javascript文件将无法执行,直到下载并呈现整个页面。延期脚本也按顺序执行EY位于网页上。

带有DEFER属性的脚本对于依赖于正在加载的页面元素以及执行它们的顺序时,脚本脚本非常有用。 一般来说,使用脚本的DEFER属性对于页面本身并不重要。

对所有用户的输入延迟是不同的

重要的是要意识到第一个输入延迟分数是可变的并且不一致。评分因访客而异。

评分的这种方差是不可避免的,因为该分数取决于特定对网站的个人的交互。

一些游客可能分心的广告联网读数而不是互动,直到所有资产加载并准备就绪Teacted。

这是谷歌描述的方式:

“并非所有用户都会在每次访问时与您的网站互动。并且并非所有的交互都与FID …“

另外,一些用户的第一个交互将是糟糕的时光(当主线程延长时间繁忙时),有些用户的第一互动将会在好时光(主线程完全怠速)。这意味着一些用户将没有FID值,有些用户将具有低的FID值,并且一些用户可能会有高的FID值。“

为什么大多数网站故障 不幸的是,许多内容管理系统,主题和插件未构建以符合这个相对较新的公制。

这是原因如此多的出版商是弊端yed发现他们的网站不会通过第一个输入延迟测试。

广告联系读数下面

,但随着网络软件开发社区响应来自出版社的不同编码标准的要求而变化。

并不是说,制作内容管理系统的软件开发人员都是错误的,用于生产不测量这些度量的产品。

例如,WordPress在导致的Gutenberg网站编辑器中解决了缺点它比可以得分越少。

古顿伯格是使用块的接口或隐喻来构建站点的视觉方式。有一个小部件块,联系表单块和页脚块等。

所以创建网页的过程更为视觉和d一个通过构建块的隐喻,从字面上建造一个不同的块。

有不同种类的块,以不同的方式看起来和行为。每个单独的块都有一个相应的样式代码(CSS),其中大部分是个单个块的特定和唯一的。

编码这些样式的标准方式是创建一个包含唯一唯一的样式的样式每个街区。这样做是有意义的,因为你有一个中心位置,其中特定于块的所有代码都存在。

在下面

下面的广告联交影读数结果是在一个页面上可能包含(假设)二十块的页面上, WordPress将加载这些块的样式加上未使用的所有其他块。

在核心网v之前ITALS(CWV)被认为是打包CSS的标准方法。

自核心网维的引入以来,这种做法被认为是代码膨胀。

这并不意味着略微反对WordPress开发人员。他们做了一个梦幻般的工作。

这只是反映了在集成到编码生态系统中的软件开发阶段的瓶颈可以在软件开发阶段击中瓶颈的反映。

我们经历了同样的过渡到移动式Web设计的事情。

古腾堡10.1改进的性能

歌词

歌词

古腾堡10.1引入了一种通过仅加载样式加载样式的改进方式

需要并没有加载不使用的块样式。

这是WO的巨大胜利rdpress,依赖WordPress的发布商,当然,访问使用WordPress创建的网站的用户。

在下面

上读取第一个输入延迟的广告传票现在

向前移动,我们可以期望越来越多的软件开发人员负责CMS,主题和插件将转换为第一个输入延迟友好的编码实践。

但在发生这种情况下,负担在出版商上采取措施改进输入延迟。理解它是第一步。

Pagespeed Insights

优化第一输入延迟

[1图23是第一输入延迟

用户中心性能度量

用于测量核心网的Github脚本

Related Content

More Interesting