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 百分位，这会进一步移除离群值，从而提供符合绝大多数用户体验值或更高体验值的值。

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

互动的延迟时间包括驱动互动的一组事件处理脚本中最长的时长，即从用户开始互动到下一帧显示视觉反馈的那一刻。

INP 得分是多少？

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

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

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

什么是互动？

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

互动的主要驱动因素通常是 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

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

实际应用

理想情况下，优化 INP 的过程将从实测数据开始。最好通过真实用户监控 (RUM) 提供的实测数据将不仅能提供网页的 INP 值，还能提供上下文数据，其中会突出显示导致 INP 值本身的具体互动、互动是在网页加载期间还是之后发生的、互动类型（点击、按键或点按）以及其他有价值的信息。

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

不过，虽然 CrUX 可让您大致了解存在某个问题，但它通常无法提供足够的详细信息，使您无法充分了解问题所在。RUM 解决方案可帮助您深入了解互动速度缓慢的网页、用户或用户互动的细节。能够将 INP 归因于各个互动，可避免猜测和浪费精力。

实验室

理想情况下，获得现场数据表明互动速度较慢后，您就应该开始在实验室中进行测试。不过，在缺乏现场数据的情况下，有一些策略可以重现实验室中缓慢的交互。此类策略包括遵循常见的用户流和测试过程中的互动，以及在加载期间（主线程通常最繁忙时）与页面交互，以便在用户体验的关键部分显示缓慢的互动。

如何改进 INP

我们提供了一系列 INP 优化指南，可指导您完成识别现场缓慢互动的过程，并使用实验室数据进行深入分析并以各种方式对其进行优化。

更新日志

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

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

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