Interaction to Next Paint (INP)

Jeremy Wagner

浏览器支持

  • 96
  • 96
  • x
  • x

来源

Interaction to Next Paint (INP) 是一个稳定的 Core Web Vitals 指标，可以使用 Event Timing API 中的数据来评估网页响应能力。INP 会在网页生命周期内观察用户与网页进行的所有点击、点按和键盘互动的延迟时间，并报告最长持续时间，并忽略离群值。INP 较低意味着网页始终能够快速响应大多数用户互动。

良好的响应速度意味着网页对互动的响应速度很快。当网页响应互动时，浏览器会在呈现的下一帧中提供视觉反馈，表明互动已成功。例如，它可以提供关于以下内容的反馈：

  • 您添加到在线购物车的商品是否实际被添加。
  • 是否已打开移动设备导航菜单。
  • 服务器是否正在对登录信息进行身份验证。

有些互动自然会比其他互动花费更长的时间，但对于特别复杂的互动，必须快速呈现一些初始视觉反馈，让用户了解正在发生的事情。下次渲染的时间最早可以实现此目标。因此，INP 的用途不是衡量互动的所有最终效果（例如，从其他异步操作进行网络提取和界面更新），而是衡量下一次绘制被阻塞的时间。延迟显示视觉反馈，会让用户认为网页不对其操作做出响应。

INP 的目标是，针对用户发起的所有或大多数互动，最大限度地缩短从用户发起互动到下一帧绘制完成所需的时间。

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

INP 的计算方法是观察用户与网页进行的所有互动。对于大多数网站，系统会以 INP 的形式报告延迟时间最长的互动。但是，对于具有大量互动的网页，随机的小故障可能会导致在其他响应网站上出现异常高的延迟互动。互动越多，发生这种情况的可能性就越大。为了解决此问题，并更好地衡量这些类型网页的实际响应速度，我们忽略了每 50 次互动带来的 1 次最高互动。由于绝大多数网页体验都不会超过 50 次互动，因此浏览器几乎总是报告最差的互动。然后，系统会照常报告所有网页浏览量的第 75 百分位，这会进一步移除离群值，使值更具代表性的用户体验。

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

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

要点：如需详细了解如何衡量 INP，请参阅“什么是互动？”。

INP 得分是多少？

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

  • INP 等于或小于 200 毫秒表示您的网页具有良好的响应速度。
  • 如果 INP 介于 200 毫秒到 500 毫秒之间，则意味着您网页的响应能力需要改进。
  • INP 大于 500 毫秒表示网页响应速度慢。
良好的 INP 值为 200 毫秒或更短，不良值不超过 500 毫秒，两者之间的任何值都需要改进。
良好的 INP 值不超过 200 毫秒。差值大于 500 毫秒。

什么是互动？

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

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

对于 INP，仅观察以下互动类型：

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

要点：INP 不会考虑悬停和滚动操作。不过，使用键盘滚动（空格键、向上翻页、向下翻页等）涉及按键操作，可能会触发 INP 衡量的其他事件。INP 计算不会考虑由此产生的任何滚动。

互动发生在主文档或文档内嵌的 iframe 中，例如，点击嵌入式视频的播放。由于最终用户不知道网页的哪些部分位于 iframe 中，因此您需要在 iframe 内衡量 INP，以便准确衡量整个网页的 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 通过考虑所有页面互动（从输入延迟到运行事件处理程序所需的时间，再到浏览器绘制下一帧）来改进 FID。

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

如果未报告 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 网上论坛中提供。