Interaction to Next Paint (INP)

浏览器支持

  • 96
  • 96
  • x
  • x

来源

Chrome 使用情况数据表明,用户 90% 的浏览网页时间都花在了网页加载之后,因此,仔细衡量整个网页生命周期中的响应能力非常重要。这是 INP 指标的评估结果。

良好的响应速度意味着网页对互动的响应速度很快。当网页响应互动时,浏览器会在所绘制的下一帧中提供视觉反馈。例如,通过视觉反馈,您可以了解您添加到在线购物车中的商品是否确实被添加了、移动导航菜单是否已打开、服务器是否正在对登录表单的内容进行身份验证等。

有些互动自然会比其他互动花费更长的时间,但对于特别复杂的互动,必须快速提供一些初始视觉反馈,让用户知道正在发生的事情。浏览器将绘制的下一帧是最早执行此操作的机会。

因此,INP 的目的不是测量互动的所有最终效果(例如网络提取和来自其他异步操作的界面更新),而是下一次绘制被阻止的时间。通过延迟视觉反馈,用户可能会觉得页面响应速度不够快,而 INP 旨在帮助开发者衡量这部分用户体验。

在下面的视频中,右侧示例提供了有关手风琴正在打开的即时视觉反馈。左侧示例展示了响应速度差的问题,以及导致糟糕用户体验的原因。

响应速度较差与良好的示例。左侧的长任务会阻止手风琴打开。这会导致用户多次点击,认为体验不稳定。当主线程赶上来时,它会处理延迟的输入,导致手风琴式折叠意外打开和关闭。在屏幕右侧,响应速度更快的网页可快速打开手风琴,而不会出现突发事件。

本指南介绍了 INP 的运作方式、衡量方式,并指出了有助于改进 INP 的资源。

INP 是什么?

INP 是一项指标,通过观察用户在访问网页期间发生的所有点击、点按和键盘互动的延迟时间,评估网页对用户互动的总体响应情况。最终 INP 值是观测到的最长互动时间,离群值会被忽略。

INP 计算方式详情

INP 的计算方法是观察用户与网页进行的所有互动。对于大多数网站来说,延迟时间最长的互动会报告为 INP。

但是,对于包含大量互动的网页,随机的小故障可能会导致在其他响应网页上出现异常的高延迟互动。指定网页上发生的互动越多,发生这种情况的可能性就越大。

为了更好地衡量具有大量互动的网页的实际响应速度,我们会忽略每 50 次互动产生一次最高的互动。绝大多数网页体验不超过 50 次互动,因此最常报告的是最糟糕的互动。然后,系统会照常报告所有网页浏览量的第 75 百分位,这会进一步移除离群值,从而提供符合绝大多数用户体验值或更高体验值的值。

互动是指在同一逻辑用户手势期间触发的一组事件处理脚本。例如,触摸屏设备上的“点按”互动包括多个事件,例如 pointeruppointerdownclick。交互可由 JavaScript、CSS、内置浏览器控件(例如表单元素)或这些控件的组合促成。

互动的延迟时间包括一组驱动互动的事件处理脚本中,从用户开始互动到浏览器绘制下一帧的最长时长。

INP 得分是多少?

很难在响应能力指标上固定“良好”或“差”等标签。一方面,您需要鼓励优先考虑良好响应能力的开发实践。另一方面,您必须考虑这样一个事实,即人们用来设定实现预期开发期望的设备的功能有很大的差异。

为确保提供良好的响应速度的用户体验,最好衡量一下实际记录的网页加载的第 75 个百分位(按移动设备和桌面设备细分):

  • INP 低于或等于 200 毫秒表示网页响应良好
  • INP 高于 200 毫秒且低于或等于 500 毫秒表示网页的响应能力需要改进
  • INP 高于 500 毫秒表示网页响应速度很差
良好的 INP 值为 200 毫秒或更短,不良值不超过 500 毫秒,两者之间的任何值都需要改进。
合适的 INP 值不超过 200 毫秒。错误值大于 500 毫秒。

什么是互动?

描绘主线程上的互动的示意图。用户在阻止任务运行的同时进行输入。输入会延迟到这些任务完成,之后指针悬停、鼠标上移和点击事件处理脚本将开始运行,然后开始渲染和绘制工作,直到显示下一帧。
互动的生命周期。在事件处理脚本开始运行之前会发生输入延迟,这可能是由主线程上的任务耗时等因素导致的。然后,互动的事件处理脚本回调会运行,并且会在显示下一帧之前发生延迟。

互动的主要驱动因素通常是 JavaScript,但浏览器确实会通过并非由 JavaScript 提供支持的控件(例如复选框、单选按钮和由 CSS 提供支持的控件)提供互动性。

就 INP 而言,只观察以下互动类型

  • 使用鼠标点击。
  • 点按带有触摸屏的设备。
  • 按实体键盘或屏幕键盘上的某个键。

互动发生在主文档或文档内嵌的 iframe 中,例如,点击嵌入式视频的播放。最终用户并不知道 iframe 中包含哪些内容,因此需要使用 iframe 中的 INP 来衡量顶级网页的用户体验。由于 JavaScript Web API 无法访问 iframe 的内容,因此这可能显示为 CrUX 和 RUM 之间的差异

互动可以包含多个事件。例如,按键操作包含 keydownkeypresskeyup 事件。点按互动包含 pointeruppointerdown 事件。互动中时长最长的事件计入总延迟时间。

描绘包含两个互动的更复杂的互动。第一个事件是 mousedown 事件,该事件会在松开鼠标按钮前生成一帧,这将启动更多工作,直到结果中显示另一个帧。
描绘与多个事件处理脚本的互动。当用户点击某个鼠标按钮时,互动的第一部分会收到输入。不过,在用户释放鼠标按钮之前,系统会显示一个帧。当用户松开鼠标按钮时,必须在显示下一帧之前运行另一系列事件处理脚本。

系统会在用户离开页面时计算该页面的 INP。结果会得到一个能够代表网页在其整个生命周期内的整体响应能力的值。INP 较低意味着网页能够可靠地响应用户输入。

INP 与 First Input Delay (FID) 有何不同?

INP 是 First Input Delay (FID) 的继任指标。虽然两者都是响应速度指标,但 FID 仅衡量了网页上首次互动的“输入延迟”。INP 通过观察网页上的所有互动来改进 FID,即从输入延迟开始,到运行事件处理脚本所需的时间,再到浏览器绘制下一帧。

这些差异意味着 INP 和 FID 是不同类型的响应能力指标。FID 是用于评估网页对用户的首次展示的加载响应速度指标,而无论网页互动在何时发生,INP 都是更可靠的整体响应能力指标。

如果未报告 INP 值,该怎么办?

网页可能不会返回任何 INP 值。导致这种情况的原因可能有很多,其中包括以下原因:

  • 页面已加载,但用户从未点击、点按或按键盘上的键。
  • 网页已加载,但用户使用不衡量的手势(例如滚动或将鼠标悬停在元素上)与网页互动。
  • 该网页正被机器人(例如搜索抓取工具或无头浏览器)访问,但该机器人尚未编写与该网页交互的脚本。

如何衡量 INP

INP 可通过各种工具在现场实验室中测量。

实际应用

理想情况下,优化 INP 的过程将从实测数据开始。最好通过真实用户监控 (RUM) 提供的实测数据将不仅能提供网页的 INP 值,还能显示上下文数据,其中会突出显示导致 INP 值本身的具体互动、互动是在网页加载期间还是之后发生的、互动类型(点击、按键或点按),以及其他有助于您确定是哪个部分影响了响应速度的有用时间。

如果您的网站符合列入 Chrome 用户体验报告 (CrUX) 的条件,您可以通过 PageSpeed Insights 中的 CrUX(和其他核心网页指标)快速获取 INP 的实测数据。您至少可以获取网站 INP 的源级信息,但在某些情况下,您还可以获取网址级数据。

不过,虽然 CrUX 可以告知您是否存在问题,但它无法告诉您导致问题的原因。RUM 解决方案可帮助您详细了解遇到响应速度问题的网页、用户或用户互动。能够将 INP 归因于各个互动,可避免猜测和浪费精力。

实验室

理想情况下,获得实测数据表明某个网页互动速度缓慢后,您便应该开始在实验室中进行测试。不过,如果您没有现场数据,可以采用一些策略来重现实验室中缓慢的互动。策略包括跟踪常见的用户流和测试过程中的互动,以及在页面加载时与页面进行交互(主线程通常最繁忙时),以识别用户体验这一关键部分期间缓慢的互动。

如何改进 INP

我们提供了一系列 INP 优化指南,可指导您完成识别现场缓慢互动的过程,并利用实验室数据帮助您确定原因并对其进行优化。

更新日志

有时,bug 会在用于衡量指标的 API 中发现,有时会在指标本身的定义中发现。因此,有时必须进行更改,这些更改可能会以改进或回归的形式显示在内部报告和信息中心内。

为了帮助您管理这些变更,这些指标的实现或定义方面的所有更改都会显示在此更新日志中。

如果您对这些指标有反馈意见,请在 web-vitals-feedback Google 网上论坛中提供。