Interaction to Next Paint (INP)

Jeremy Wagner

浏览器支持

• 96
• 96
• x
• x

来源

注意：Interaction to Next Paint (INP) 是一项稳定的 Core Web Vitals 指标，用于使用 Event Timing API 中的数据评估响应速度。INP 会观察用户与网页进行的所有互动的延迟时间，并报告所有（或几乎所有）互动都低于此值的单个值。INP 较低意味着网页能够始终如一地快速响应所有或绝大多数的用户互动。

Chrome 使用情况数据显示，用户 90% 的页面停留时间都是在加载后所花，因此，在整个网页生命周期中仔细衡量响应速度非常重要。INP 指标就是用来评估这一点的。

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

有些互动自然会比其他互动花费更长时间，但对于特别复杂的互动，请务必快速显示一些初始视觉反馈，以告知用户正在发生某些事情。浏览器要绘制的下一帧是最早执行此操作的机会。

因此，INP 的目的不是衡量互动的最终影响（例如网络提取和其他异步操作的界面更新），而是衡量下一次绘制被阻塞的时间。延迟视觉反馈可能会给用户造成网页响应速度不够快的印象，而 INP 旨在帮助开发者衡量这部分用户体验。

在以下视频中，右侧的示例会立即提供视觉反馈，表明该折叠式风琴正在打开。如左侧示例所示，响应能力很差，以及它如何导致糟糕的用户体验。

响应速度缓慢与响应速度快的示例。在左侧，长任务会阻止该折叠式动作条打开。这会导致用户多次点击，以为他们的体验有损。当主线程跟上进度时，它会处理延迟的输入，导致手风琴意外打开和关闭。在右侧，响应速度更快的页面可快速打开手风琴，而不会出现任何意外情况。

本指南介绍了 INP 的运作方式、衡量方法，并提供了有助于提升 INP 的指南。

什么是 INP？

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

INP 的计算方式详情

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

不过，对于具有大量互动的网页，随机中断可能会导致在响应迅速的网页上进行互动。在给定网页上发生的互动越多，这种情况就越有可能发生。

为了更好地衡量互动次数较多的网页的实际响应速度，我们会忽略每 50 次互动中一次最高的互动。绝大多数网页体验的互动次数不会超过 50 次，因此系统通常会报告最差的互动。然后，系统会照常报告所有网页浏览量的第 75 百分位数，从而进一步滤除离群值，以提供大多数用户所体验到的值或更好的值。

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

互动的延迟时间包括从用户开始互动到浏览器下一次能够绘制帧的那一刻，推动互动的一组事件处理脚本的最长一段时长。

要点：如需详细了解 INP 的衡量方式，请参阅“互动包含哪些内容？”部分。

INP 得分怎样才算理想？

固定标签，如“good”（好）或“糟糕”很难衡量响应速度一方面，您要鼓励开发实践优先采用良好的响应能力。另一方面，您必须考虑到人们用于设定可实现开发期望的设备的功能存在很大差异。

为确保提供高响应性用户体验，比较理想的衡量阈值是现场记录的网页加载的第 75 个百分位，按移动设备和桌面设备细分：

• INP 低于或等于 200 毫秒表示网页响应速度良好。
• 如果 INP 高于 200 毫秒，但低于或等于 500 毫秒，则表示网页的响应能力需要改进。
• 如果 INP 高于 500 毫秒，则表示网页的响应速度很慢。

良好的 INP 值应不超过 200 毫秒。差的值大于 500 毫秒。

互动中包含哪些内容？

互动生命周期。在事件处理脚本开始运行之前，会发生输入延迟，这可能是由主线程上的耗时任务等因素造成的。然后，系统会运行互动事件处理脚本回调，并在显示下一帧之前发生延迟。

互动的主要驱动因素通常是 JavaScript，不过浏览器确实通过未由 JavaScript 提供支持的控件（例如复选框、单选按钮以及由 CSS 提供支持的控件）提供互动功能。

根据 INP 的用途，系统仅会观察以下互动类型：

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

要点：用户还可以通过其他方式（例如悬停、缩放或滚动）与网页互动。这些互动并非出于 INP 目的而被观察。不过，这些互动的一些变体可能包括 INP 会衡量的点击、点按或按键操作等手势。

互动发生在主文档中或嵌入在文档中的 iframe 中，例如点击嵌入的视频上的播放按钮。最终用户不会知道 iframe 中有哪些内容，因此，需要使用 iframe 中的 INP 来衡量顶级网页的用户体验。由于 JavaScript Web API 无权访问 iframe 的内容，因此这可能会表现为 CrUX 与 RUM 之间的差异

互动可以包含多个事件。例如，按键包括 keydown、keypress 和 keyup 事件。点按互动包含 pointerup 和 pointerdown 事件。互动中时长最长的事件会增加互动总延迟时间。

<ph type="x-smartling-placeholder">

</ph>

描述与多个事件处理脚本的互动。当用户点击鼠标按钮时，互动的第一部分接收输入。不过，在用户松开鼠标按钮之前，系统会显示一个框架。当用户释放鼠标按钮时，必须先运行另一系列事件处理脚本，然后才能显示下一帧。

系统会在用户离开网页时计算网页的 INP。这样，您将得到一个能够代表网页在其整个生命周期内的整体响应情况的值。INP 较低意味着网页能够可靠地响应用户输入。

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

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

这些差异意味着 INP 和 FID 是不同类型的响应能力指标。FID 是一种加载响应能力指标，旨在评估网页给用户的第一印象；而 INP 是一种更可靠的总体响应能力指标，无论网页互动发生在网页生命周期的哪个时间点，它都能反映网页的总体响应能力。

如果没有报告 INP 值，该怎么办？

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

• 页面已加载，但用户从未点击、轻触或按键盘上的按键。
• 页面已加载，但用户使用了无法衡量的手势（例如滚动或将鼠标悬停在元素上）与之进行了互动。
• 网页正在被聊天机器人（例如搜索抓取工具或无头浏览器）访问，但这些机器人未通过脚本编写来与网页互动。

如何衡量 INP

INP 可以在现场和实验室中衡量，前提是您可以模拟真实的用户互动。

<ph type="x-smartling-placeholder">

</ph> 要点：衡量网站 INP 的最佳方法是收集实际用户的指标。如果您习惯依赖实验室数据来评估效果，请花些时间阅读实验室数据和实际数据可能存在差异的原因（以及如何应对）。

在野外

理想情况下，优化 INP 的历程将从现场数据开始。通过真实用户监控 (RUM) 提供的现场数据，您不仅可以获得网页的 INP 值，还可以提供情境数据，这些数据会突出显示导致 INP 值本身的具体互动、互动是在网页加载期间还是之后发生的、互动类型（点击、按键或点按），以及其他有价值的计时信息，帮助您确定互动的哪一部分影响了响应速度。

<ph type="x-smartling-placeholder">

</ph> 了解详情：找出实际环境中的缓慢互动。

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

不过，虽然 CrUX 可以告诉您是否存在问题，但无法告诉您问题的原因。RUM 解决方案可帮助您发现与遇到响应问题的网页、用户或用户互动的更多详细信息。将 INP 归因于单个互动可以避免猜测和浪费工作。

实验室

理想情况下，在掌握了表明某网页互动速度缓慢的实测数据后，您就可以开始在实验室中进行测试。实测数据可以让在实验室中重现有问题的互动的工作变得更加简单直接。

不过，您完全有可能没有字段数据。虽然您可以在某些实验室工具中衡量 INP，但实验室测试期间网页的最终 INP 值将取决于衡量期间执行的互动。用户行为可能不可预测且高度不稳定，这意味着实验室测试可能不会像现场数据那样显示问题互动。此外，某些实验室工具不会报告网页的 INP，因为它们只会观察网页的加载情况，而不会进行任何互动。在这种情况下，总阻塞时间 (TBT) 可能是 INP 的合理替代指标，但其本身无法替代 INP。

虽然在评估网页的 INP 时，实验室工具存在一些限制，但您可以通过一些策略在实验室中重现互动缓慢的问题。这些策略包括跟踪常见的用户体验流程并测试其中的互动，以及在网页加载时与其互动（此时主线程通常最繁忙），以便在用户体验的关键部分发现互动缓慢的问题。

阅读以下内容了解详情：在实验室中手动诊断互动速度缓慢的问题。

如何提高 INP

一系列关于优化 INP 的指南可引导您完成以下流程：识别现场互动缓慢的问题，并使用实验室数据帮助您找出原因并进行优化。

更新日志

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

为帮助您应对此问题，对这些指标的实现或定义所做的所有更改都会显示在此更新日志中。

如果您对这些指标有任何反馈，请在 web-vitals-feedback Google 群组中提供反馈。

知识测验

INP 指标的主要目标是什么？

衡量网页上的首个内容显示所需的时间。

错误 - 这描述的是 First Contentful Paint

量化网页的视觉稳定性，并最大限度地减少意外的布局偏移。

不正确 - 这描述的是 Cumulative Layout Shift

评估网页达到完全互动状态所需的时间。

错误 - 这与“Interactive Time”（响应时间）相关，但 INP 专门关注对用户输入的响应速度

尽可能缩短用户发起互动到绘制下一帧的时间，适用于用户发起的所有或大多数互动。

正确！

为了计算 INP，系统会观察以下哪些互动类型？（请选择所有适用选项。）

使用鼠标点击。

正确！

使用鼠标滚轮或触控板滚动页面。

不正确 - INP 不会考虑滚动

点按触摸屏。

正确！

将鼠标光标悬停在元素上。

不正确 - INP 不会考虑悬停

按键盘上的某个键。

正确！

在网页上缩放。

不正确 - INP 不考虑缩放

如何为 INP 定义互动的“延迟时间”？

浏览器处理互动事件处理脚本所用的时间。

不正确 - 这仅考虑了处理时长，而未考虑输入延迟或呈现下一帧的时间

网页上的所有互动产生可视响应的平均时间。

错误 - INP 侧重于最长互动时间，而非平均互动时间

浏览器开始处理与互动相关联的事件处理脚本所需的时间。

不正确 - 这只考虑了输入延迟，而没有考虑处理和呈现时间

从互动开始到下一帧完全呈现所需的时间。

正确！

INP 和 FID 有何区别？

INP 衡量的是网页的首个内容显示所需的时间，而 FID 衡量的是网页对用户输入的响应速度。

错误 - 这描述的是 First Contentful Paint，而不是 INP

INP 会考虑所有互动的完整时长，而 FID 仅衡量首次互动的输入延迟。

正确！

INP 和 FID 会衡量网页进入可互动状态的不同时间戳。

不正确 - INP 和 FID 衡量的是网页对互动的响应速度，不考虑互动的发生时间

没有区别INP 和 FID 只是同一指标的两个不同名称。

错误 - 两者的定义不尽相同

在什么情况下，PageSpeed Insights 等工具中可能无法为网页提供 INP 数据？

网页使用的自定义效果衡量库不会报告 INP 数据。

错误 - INP 是使用 Web 平台 API 自动衡量的，不依赖于网页通过自定义库自行报告其性能。

Chrome 用户的互动数据不足，无法计算 CrUX 数据集中的有意义的 INP 值。

正确！

用户仅通过滚动和悬停与页面互动，INP 不会考虑此类互动。

正确！

该页面是使用自动针对 INP 进行优化的框架构建的，因此无需报告。

不正确 - 框架有助于确定 INP，但指标仍然相关，并会在数据可用时报告

要在实验室环境中重现缓慢互动，最有效的策略是什么？

在网络连接速度缓慢且不可靠的情况下模拟高端设备，以营造具有挑战性的条件。

错误 - 虽然网络可能有一定影响，但设备功能更有可能导致互动缓慢

仅在网页完全加载并处于空闲状态后测试互动情况。

不正确 - 这可能会错过加载期间较慢的互动

在加载期间与网页互动并遵循常见的用户流程，以确定潜在的瓶颈。

正确！

专注于大多数用户不太可能遇到的复杂、极端情况互动。

不正确 - 常见的用户体验流程更适合用于识别典型的 INP 问题

✨ 此知识问答由 Gemini 1.5 生成，并经过人工审核。分享您的反馈