在当今数字时代，用户对网页的体验要求越来越高，而网页响应速度成为评估用户体验的重要指标之一。为了更全面地评估网页的响应性，谷歌提出了Interaction to Next Paint（INP）指标，它将在2024年3月替代First Input Delay（FID）成为核心Web Vitals的一部分。
什么是INP？
INP是一个度量页面对用户交互整体响应速度的指标，通过观察用户在页面上的点击、轻触和键盘输入等交互的延迟来评估。与FID不同，INP考虑了页面生命周期内的所有交互，而不仅仅是第一个交互。它的目标是确保用户发起交互到下一帧渲染的时间尽可能短，以提供良好的用户体验。
INP的计算方式
INP的计算借助Event Timing API，通过观察事件处理程序的延迟来确定交互的响应时间。一个交互可以由JavaScript、CSS、内置浏览器控件（如表单元素）或它们的组合驱动。交互的延迟由事件处理程序中单个持续时间最长的部分决定，从用户开始交互到下一帧呈现可视反馈的时刻。
INP与FID的区别
FID只关注页面加载阶段的第一个交互，而INP考虑了页面的所有交互。FID仅测量第一个交互的输入延迟，而不考虑运行事件处理程序的时间或呈现下一帧的延迟。INP更全面地评估了页面的响应性，使其成为比FID更可靠的整体响应性指标。
INP评分标准
为了帮助开发者更好地理解INP的表现，提出了一些评分标准。根据页面加载的实测数据，将INP分为以下三个级别：
- INP低于或等于200毫秒： 表明你的页面响应良好，用户体验优秀。
- INP在200毫秒以上但低于或等于500毫秒： 表明你的页面响应需要改进，存在一定的用户体验问题。
- INP高于500毫秒： 表明你的页面响应性差，用户体验较差，亟需优化。
这些标准为开发者提供了一些建议，鼓励他们采用良好的开发实践，提高网页的响应速度，从而提供更好的用户体验。
如何测量INP
INP可以在实地和实验室中通过各种工具进行测量。实地数据通常来自实时用户监控（RUM），能够提供页面的INP值以及有关特定交互的上下文数据。如果网站符合Chrome用户体验报告（CrUX）的条件，可以通过PageSpeed Insights等工具快速获取INP的实地数据。
实验室测试在你有实地数据表明存在慢交互时非常有用。在没有实地数据的情况下，你可以通过按照常见用户流程进行测试以及在主线程繁忙的页面加载期间与页面进行交互来复制慢交互的策略。
如何提高INP
一旦获得了表明存在慢交互的实地数据，就可以开始在实验室中进行测试和优化。一系列关于优化INP的指南可帮助你识别实地中的慢交互，并以各种方式进行优化。
为了更好地管理INP指标的变化，谷歌提供了CHANGELOG，记录了对测量指标和定义进行的任何更改。这有助于开发者理解内部报告和仪表板中的改进或退化，并提供了反馈渠道。
INP与FID的区别
INP与第一输入延迟（FID）之间存在明显区别。FID仅考虑第一个交互，仅测量第一个交互的输入延迟，而不考虑运行事件处理程序的时间或呈现下一帧的延迟。
由于FID也是一种加载响应度指标，其背后的原理是，如果在加载阶段对页面的第一个交互没有明显的输入延迟，那么页面给人的第一印象就是良好的。
INP不仅仅关乎第一印象。通过对所有交互进行抽样，可以全面评估响应性，使INP成为总体响应性的更可靠指标。
结语
INP作为核心Web Vitals的一部分，对于评估页面响应性至关重要。通过全面考察用户在页面上的所有交互，INP提供了更可靠的指标，帮助开发者改进网页的响应速度，提升用户体验。
在优化INP时，从实地数据入手，了解具体的交互情况，然后在实验室中进行测试和优化。评估INP的标准有助于开发者更好地了解页面的性能表现，采取适当的措施提高用户满意度。