如何优化INP核心页面指标

Interaction to Next Paint (INP) 是一个Core Web Vital核心网页关键指标，通俗讲是用户点击一个页面交互效果需要的时间。通过观察用户在页面生命周期内与页面互动的延迟，评估页面对用户交互的整体响应性。INP值是观察到的交互时间。比如常用的faqs一般是折叠的，点击标题会展开显示更多内容，从点击标题到完全显示内容这个时间即INP值。

图片来源：Bootstrap

为了提供良好的用户体验，网站的 Interaction to Next Paint 应尽可能不超过 200 毫秒。

· INP 等于或小于 200 毫秒表示您的网页具有良好的响应速度。

· 如果 INP 介于 200 毫秒到 500 毫秒之间，则意味着您网页的响应能力需要改进。

· INP 大于 500 毫秒表示网页响应速度慢。

根据网站的不同，互动可能很少，或者没有互动，例如以文字和图片为主的网页，互动元素少，or完全没有。或者，对于文本编辑器或游戏等网站，可能会发生数百次or数千次互动。无论是哪种情况，如果 INP 较高，用户体验就会面临风险。

INP为何取代 First Input Delay (FID)

FID 衡量的是从用户首·次与网页互动（即，点击链接、点按按钮或使用由 JavaScript 提供支持的自定义控件）到浏览器实际能够开始处理事件处理脚本以响应相应互动的时间。

当 INP 考虑所有页面互动时，FID 仅考虑首·次互动。此外，它还会仅测量首·次互动的输入延迟，而不会测量运行事件处理脚本所花费的时间或呈现下一帧的延迟。由于 FID 也是一个加载响应能力指标，因此我们可以使用它，根据输入延迟来确定网页对用户的第·一印象。INP 会衡量整个页面生命周期内所有互动的所有部分，使其成为比 FID 更可靠的整体响应能力指标。

如何优化INP？

1、减少不必要的交互。

有些朋友喜欢为网站添加高大上的交互，殊不知这些交互会延长了网页加载速度，有的可能好几秒才显示完，这种用户体验就不友好了。建站初期先沟通需求，权衡了功能利弊，再决定是否要做，怎么做更好。

2、代码精简

有些交互可能是调用jQuery插件，还需要写一部分代码来实现，如果这些代码冗余了，会减低性能。现在有些前端框架不调用jQuery了，比如Bootstrap 5，很多效果添加一个class就能实现，省去了写JavaScript代码的步骤。这些开源框架使用的人多，他们也会根据PR来改进issues，不断完善产品。

3、监测加载进程

提升INP是一个长期的过程，需要对不同的进程进行监测改进，用浏览器开发模式或第三方工具可以查看慢的进程，哪里慢了改哪里

4、使用CDN

CDN（内容分发网络）通过在不同地理位置部署缓存服务器，将内容提前存储在这些服务器上，当用户请求访问网站时，可以更快地从最近的服务器获取所需内容，从而减少网络传输时间，提高访问速度和响应时间。通过优化内容的加载速度和减少延迟，CDN能够提供更流畅、更快速的用户体验。

（来源：ytkah）

以上内容属作者个人观点，不代表雨果跨境立场！本文经原作者授权转载，转载需经原作者授权同意。​