Core Web Vital 中的 INP(Interaction to Next Paint) 是什么？

作为一名网站开发者或前端工程师，绝大多数会以 Google 订定的 Core Web Vitals，作为评估网站效能的参考标准。

Core Web Vitals 包括了众多指标，例如：LCP、FID、CLS 等。而 Google 会定期评估这些指标的存在与否，从 2024 年 3 月起，INP 取代了 FID，成为评估网站互动性能的新稳定指标。

在本文中，我们将深入探讨 INP(Interaction to Next Paint) 的定义、其重要性。

了解 INP (Interaction to Next Paint)

INP 全名为 Interaction to Next Paint，中文直译为“与下一个显示内容的互动”。它是 Core Web Vitals 中一个全新的指标，专门用来衡量页面对使用者“互动”的响应速度。

INP 的定义

INP 测量的是：从使用者与页面进行互动(点击、键盘输入等)到浏览器对该互动作出响应并更新画面所需的时间。举例来说，当使用者点击一个按钮，INP 就会记录从点击到按钮状态改变并重新绘制的时间。

INP 会在整个生命周期中，观察使用者在网页点选、轻触和使用键盘进行的所有互动，并回报最长持续时间(忽略离群值)。

在 Google 官方文件中，有清楚定义 INP 会计算的互动类型，包含以下三项：

滑鼠点击事件
轻触有触控荧幕的装置
在实体键盘或荧幕键盘上按下按键

在这边互动(Interaction) 的定义有两点要特别注意：

滑鼠悬停(hover) 与卷动(scrolling)的互动并不包括在 INP 中
互动(Interaction) 的生命周期是由一系列的事件组成。使用者的某个行为，可以被视为一连串的事件。举例来说：当使用者触控荧幕时，包含的事件有：pointerup 和 pointerdown 事件，互动的延迟时间是由一组促成互动的事件处理常式所构成的最长“持续时间”，从使用者开始互动起，到下一个影格出现视觉回馈的那一刻起。
INP 会是在使用者离开网页时计算，得出的一个值，针对大多数网站，系统会将延迟时间最差的互动回报为 INP（可参考下图）。

INP 分数

如果 INP 偏低(200ms 以下)，表示网页能持续快速回应绝大多数的使用者互动。

INP 等于或小于 200 ms 表示页面具有良好的回应能力
INP 在 200 ms 到 500 ms 之间的页面的反应能力需要改进
INP 大于 500 ms 表示页面回应能力较差

INP 对使用者体验的影响

INP 的目标是缩短从使用者开始互动到绘制下一个画面为止的响应时间。良好的 INP 意味着网页能够快速回应使用者的互动操作; 相反的，如果 INP 不佳，使用者会感受到体验低落。想像一下，当我们在使用网站时点击按钮，但画面没有即时的反应回馈，这种情况下，我们通常会认为网页出现了问题。

INP 与 FID(First Input Delay, 首次输入延迟时间) 有什么不同？

开头有提到，INP 在 2024 年 3 月取代了 FID 成为 Core Web Vital 中的稳定衡量指标。这两者都是属于“回应指标”，但最大的不同为，FID 只会衡量“第一次”的互动的输入延迟时间，但 FID 的问题会是，第一次交互不一定会是最慢的、也不一定会是最主要的的操作。因此，若以 FID 还衡量网页“互动”的品质，并不能反应网页整体的情况。而 INP 则是会衡量“所有”的页面互动。因此 INP 跟 FID 相比，会更为全面和可靠。

如何测量 INP 的值？

可以透过 Google 的网站 PageSpeed Insights 来评估 INP 的数值，但只有符合 CrUX 的资格的网站，才会出现 INP 的分数（详情可以参考这篇文章）; 或者我们也可以透过 Chrome DevTools 开发者工具直接分析，当事件发生时响应的时间（请参考下图）。

此外，Google 也提供 web-vitals 的套件，可以让开发者直接从真实用户端中，获取实际资料结果。

INP 三个阶段

优化 INP 通常会先分析互动缓慢的原因，分析完之后再进行最佳化，而互动可分为三个阶段：

输入延迟时间(input delay)：从使用者开始与网页互动时起算，并在互动事件回呼（callback function）开始执行前
事件处理时间(processing time)：执行事件回呼完成所花费的时间
显示延迟时间的时间(presentation delay)：浏览器显示包含互动结果显示的下一侦所需的时间

这三个时间段加起来就会是整个互动时间，因此在分析缓慢问题时，建议会先了解是哪一个阶段缓慢，而再针对不同情况去优化。（可参考下图）

我们会在下一篇文章中，继续讨论优化 INP 的策略。