INP 是什么?如何改进 INP 谷歌优化
新闻 2023-12-05编辑:深圳网站建设阅读()标签:
INP
本文简绍INP 是什么?如何改进 INP 谷歌优化INP 分数是多少?INP 与 First Input Delay (FID) 有何不同?如果未报告 INP 值,该怎么办?
INP 是什么?
INP 是一项指标,通过观察在用户访问网页期间发生的所有点击、点按和键盘互动的延迟时间,评估网页对用户互动的总体响应情况。最终 INP 值是观察到的最长互动,忽略离群值。
关于 INP 计算方式的说明
互动是指在同一逻辑用户手势期间触发的一组事件处理脚本。例如,触摸屏设备上的“点按”互动包括多个事件,如 pointerup、pointerdown 和 click。交互可由 JavaScript、CSS、内置浏览器控件(如表单元素)或以上三者的组合驱动。
互动的延迟时间包括一组促成互动的事件处理脚本的最长时长,即从用户开始互动到下一帧显示视觉反馈的那一刻。
INP 分数是多少?
在响应性指标上固定标签(例如“良好”或“欠佳”)非常困难。一方面,您需要鼓励优先进行开发实践,优先考虑良好的响应能力。另一方面,您必须考虑到一个事实,即人们用来设定切实可行的开发期望的设备在功能上存在很大的差异。
为了确保您提供良好的响应速度体验,不妨衡量一下实际中记录的网页加载第 75 个百分位数(按移动设备和桌面设备细分):
INP 低于或 200 毫秒表示您的网页具有良好的响应速度。
INP 高于 200 毫秒且低于或等于 500 毫秒表示您的网页响应能力需要改进。
INP 高于 500 毫秒表示您的网页响应速度慢。
什么是互动?
描绘主线程上的交互的图表。用户在阻止任务运行时输入内容。输入将一直延迟,直到这些任务完成,之后指针向上、mouseup 和点击事件处理程序运行,然后开始渲染和绘制工作,直到显示下一帧。
互动的生命周期。在事件处理脚本开始运行之前会发生输入延迟,这可能是由主线程上的任务过长等因素引起的。然后,互动的事件处理脚本会运行,并且延迟会在呈现下一帧之前发生。
互动的主要驱动因素通常是 JavaScript,不过浏览器确实通过并非由 JavaScript 提供支持的控件(例如复选框、单选按钮以及由 CSS 提供支持的控件)提供互动。
就 INP 而言,系统仅观察以下互动类型:
用鼠标点击。
点按带有触摸屏的设备。
按实体键盘或屏幕键盘上的键。
互动发生在主文档或文档中嵌入的 iframe 中,例如,点击嵌入的视频上的播放。最终用户并不知道 iframe 中包含哪些内容。因此,需要在 iframe 中使用 INP 来衡量顶级网页的用户体验。请注意,JavaScript Web API 无权访问 iframe 内容,因此可能无法在 iframe 中衡量 INP,并且这会显示为 CrUX 和 RUM 之间的差异。
互动可能由两部分组成,每部分包含多个事件。例如,按键包含 keydown、keypress 和 keyup 事件。点按互动包含 pointerup 和 pointerdown 事件。系统会选择互动中时长最长的事件作为互动的延迟时间。
描绘包含两个互动的更复杂的互动。第一个是 mousedown 事件,该事件会在鼠标松开按钮之前生成一帧,这会启动更多工作,直到结果呈现另一帧。
描绘与多个事件处理脚本的互动。互动的第一部分会在用户点击鼠标按钮时接收输入。不过,在用户松开鼠标按钮之前,系统会呈现一帧画面。当用户松开鼠标按钮时,必须在显示下一帧之前运行另一系列事件处理脚本。
INP 在用户离开网页时计算,其值将代表网页在整个生命周期内的总体响应情况。INP 较低意味着网页能够可靠地响应用户输入。
INP 与 First Input Delay (FID) 有何不同?
其中 INP 考虑所有页面互动,First Input Delay (FID) 仅考虑首次互动。此外,它还会仅测量首次互动的输入延迟,而不会测量运行事件处理脚本所需的时间或呈现下一帧时的延迟。
鉴于 FID 也是一个加载响应能力指标,计算依据是,如果在加载阶段与网页进行的首次互动几乎没有可察觉的输入延迟,那么该网页就能给用户留下良好的第一印象。
INP 不仅仅代表第一印象。通过对所有互动进行采样,可以全面评估响应性,使 INP 成为比 FID 更可靠的整体响应性指标。
如果未报告 INP 值,该怎么办?
网页可能不会返回 INP 值。造成这种情况的原因有很多:
页面已加载,但用户从未点击、点按或按下键盘上的键。
该网页已加载,但用户使用了与点击、点按或使用键盘类似的手势来与该网页互动。例如,滚动或将鼠标悬停在元素上不会影响 INP 的计算方式。
网页由搜索抓取工具或无头浏览器等漫游器访问,但该网页尚未编写与网页互动的脚本。
如何衡量 INP
如果您的网站符合列入 Chrome 用户体验报告 (CrUX) 的条件,您可以通过 PageSpeed Insights 中的 CrUX(和其他核心网页指标)快速获取 INP 的字段数据。您至少可以获得网站 INP 的源级信息,但在某些情况下,您也可以获取网页级数据。
然而,虽然 CrUX 可以帮助您大致了解存在某个问题,但通常无法提供足够的详细信息,无法充分了解问题所在。RUM 解决方案可帮助您深入了解互动速度缓慢的网页、用户或用户互动的细节。将 INP 归因于各个互动可以避免猜测和浪费精力。
如何改进 INP
当您发现存在缓慢互动的情况,并且可以在实验室中手动重现这类问题后,接下来就要对其进行优化。互动可以分为三个阶段:
输入延迟,在用户发起与网页的互动时开始,并在互动的事件回调开始运行时结束。
处理时间,由事件回调运行完毕所需的时间组成。
展示延迟,即浏览器显示下一帧(包含互动的视觉效果)所需的时间。