大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

本篇文章是译文，原文为《Interaction to Next Paint (INP): The New Responsiveness Metric》，链接已经在文末给出。话不多说，直接进入正题！

前言

在 Google I/O 22 上，Annie Sullivan 和 Michal Mocny 引入了一个名为 Interaction to Next Paint（INP）的新指标。这一消息是在谷歌首次宣布正在研究一种新的、更好的响应能力标准之后近一年发布的。

注意：关于这个新指标的说明可以阅读我的另外一篇文章《让 Google 的 FID 迈向更好的响应指标？》

事实证明，INP（Interaction to Next Paint） 有可能被添加到 Core Web Vitals 中，并最终取代首次输入延迟 (FID)， 但目前还没有得到证实。

以下是 Michal Mocny 对此的看法：

“首次输入延迟 FID 是当前衡量响应能力的核心 Web 指标。 不幸的是，FID 有一些相当大的盲点。 这就是为什么要引入一个新的实验性响应指标，即 Interaction to Next Paint。 必须承认，开发者希望看到 INP 最终能够取代 FID，成为核心网络的关键。”

1.什么是 INP

Interaction to Next Paint (INP) 是一个实验性现场响应指标，记录整个页面生命周期中所有交互的延迟，所有交互的最长延迟被记录为页面的 INP。

值得注意的是，INP 可能会根据页面的交互性而有所不同。 例如，一个页面总共交互次数少于 50 次，INP 是延迟最差的交互。 对于频繁交互的页面，INP 通常是交互延迟的第 98 个百分位。

INP 和 FID 之间的主要区别在于，新指标衡量所有交互，而 FID 仅考虑第一个交互。

简单来说，良好的 FID 意味着网站给人留下不错的第一印象，但 INP 不仅仅关乎第一印象，其涵盖从页面开始加载到用户离开页面的整个时间段。

2.如何计算 INP

与累积布局偏移（Cumulative Layout Shift）类似，INP 是在用户离开页面时计算的，衡量页面在整个生命周期中的整体响应能力。

累积布局转变 (CLS) ：尝试衡量页面不和谐的移动，因为新内容（无论是图像、广告还是其他内容）晚于主页面部分加载，从而需要根据页面移动的程度和频率来计算 CLS 分数。

在 INP 计算中起作用的交互包括：

用鼠标点击点击带有触摸屏的设备按物理或数字键盘上的键

值得注意的是：滚动或鼠标移动等动作不被视为交互。

每个交互都由多个事件组成，交互的延迟由属于交互的任何事件的单个最长持续时间组成，持续时间 duration 是以下阶段的数据总和：

输入延迟：第一次与页面交互和事件处理程序真实执行之间的时间差处理延迟： 关联事件处理程序中执行代码所需的总时间渲染延迟 ： 事件处理程序完成到执行浏览器渲染下一帧之间的时间差3.如何衡量 INP

为了向用户提供“良好”的响应能力，应该努力使 INP 为 200 毫秒或更短，而介于 200 ~ 500ms 之间意味着页面的响应能力需要改进。如果 INP 为 500ms 或以上，则意味着访问者的响应速度很差。

为了确保大多数用户都能达到标准，一个很好的测量阈值是页面加载的第 75 个百分位，在移动和桌面设备上进行细分。

值得注意的是：作为一个实验指标，INP 的阈值可能会随着指标的微调和随着时间的推移而变化。

可以通过以下方式来捕获站点的 INP：

PageSpeed Insights;Chrome User Experience Report (CrUX);Lighthouse User Flows;DevTools 的 Lighthouse 面板的 Timespan ModeChrome 的 Web Vitals 扩展程序

当然，有些情况下可能无法捕获到站点的 INP 数据，比如：

用户将该页面与其他几个页面一起加载，但从未使用过用户加载页面，滚动浏览页面（不被视为交互），但从未与其进行交互（单击、点击、按键）该页面被未编写脚本与该页面交互的机器人访问参考资料