Interaction to Next Paint 指标

Interaction to Next Paint

Interaction to Next Paint (INP) 是一个稳定的 Core Web Vitals 指标。INP 会观察用户与网页进行的所有交互的延迟时间，并报告一个当中延迟最大的值。INP 较低意味着网页能够始终如一地快速响应所有或绝大多数的用户交互。

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

有些交互的用时自然要长于其他交互，但对于特别复杂的交互，必须快速显示一些初始视觉反馈，让用户知道正在发生某件事。浏览器要绘制的下一帧是最早执行此操作的机会。

因此，INP 的目的不是衡量交互的所有最终影响（例如来自其他异步操作的网络提取和界面更新），而是衡量下一次绘制被阻止的时间。延迟视觉反馈可能会让用户觉得页面响应速度不够快，因此提出了 INP 这个指标，旨在帮助开发者去测量这部分的用户体验。

INP 通过观察用户在访问网页的整个生命周期内发生的所有点击、触碰和键盘交互的延迟时间，评估网页对用户交互的总体响应情况。INP 的最终值是观测到的最长交互时间。

INP 的计算方法：
观察用户与网页进行的所有交互。对于大多数网站，延迟时间最长的交互就会报告为 INP 的值。
对于具有大量交互的网页来说，一些交互可能会导致另一个交互的时间变长，为了更好地衡量交互次数较多的网页的实际响应速度，INP 会忽略每 50 次交互中一次延迟最高的交互。因为绝大多数用户的体验都达不到 50 次交互，因此延迟最大的一次交互大概率是被记录在其中了。

交互的延迟时间包括从用户开始交互到浏览器绘制下一帧时单个交互触发的事件处理器中最长的单个长任务的时间。

INP 得分

按移动设备和桌面设备细分：

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

INP 仅计算以下交互类型：

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

与 First Input Delay 的区别

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

这些差异意味着，INP 和 FID 是不同类型的响应性指标。如果 FID 是旨在评估网页给用户的第一印象的加载响应性指标，则 INP 是更可靠的整体响应指标，而不考虑网页交互发生在网页的生命周期中。

First Input Delay (FID)于 2024 年 9 月 9 日被停止支持，现在最好只使用 INP。

不一定存在 INP 值

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

• 页面已加载，但用户从未点击、触碰或按下键盘上的键。
• 页面已加载，但用户使用了无法衡量的手势（例如滚动或将鼠标悬停在元素上）进行交互。
• 使用类似搜索抓取工具或无头浏览器对页面进行访问。

计算

这只是 Google 团队提出的一种性能指标，并非可以直接通过 Performance API 获取结果，而是由 Google 定义的一种算法，通过从 PerformanceObserver 检测到的
PerformanceLongAnimationFrameTiming 实例，并从中进行计算得出的结果。

PerformanceLongAnimationFrameTiming 中存储了由于脚本导致的长动画帧的信息，可以查看相关文档了解更多。