Web 核心指标优化之 INP 篇

这篇文章是我在公司做 INP 优化经验分享的演讲稿。

大家好，今天我要做的分享是关于 INP 的一些优化经验。

概念

首先，什么叫 INP 呢。 INP 的全称叫 Interaction to Next Pain ，翻译过来就是从交互到下一次绘制的延迟。这是 Google 提出来的一个衡量 Web 用户体验的指标。衡量一个 Web 页面体验和质量的指标有很多，为了帮助开发者专注于重要的用户体验指标，同时也为了降低学习成本，Google 提出了一套关键指标，叫 Core Web Vitals：

分别从加载性能、交互体验和视觉稳定性三个维度来衡量用户体验，其中 INP 就是衡量交互体验的指标。

在浏览器中，渲染引擎在每一帧都有机会渲染页面。假设你的显示器是 60 Hz，那么浏览器每秒可以渲染 60 次，每次渲染间隔时间大约就是 16.7ms。但是如果浏览器其他任务执行时间过长，导致迟迟无法执行渲染，就会给用户造成网页响应速度不够快的印象。

INP 就是算从用户触发交互到浏览器下一次绘制被阻塞的时间，如果说阻塞时间小于200ms，那么算得分良好。

这里要强调一下， INP 算的是浏览器下一次绘制的延迟，并不是算当前交互结果绘制的延迟。比如有些异步操作（调接口等），虽然等待时间较长，但是如果没有影响到浏览器的下一次绘制，那么不会影响 INP 结果。

一次交互可分为以下 3 个阶段：

1. 输入延时（Input Delay）= 交互事件回调开始运行时 - 用户发起与页面的交互时

2. 事件处理（Processing Time）= 事件回调运行完成时 - 事件回调运行开始时

3. 渲染延时（Presentation Delay）= 浏览器显示包含交互的可视结果的下一帧渲染时 - 事件回调运行完成时

根据 Google 官方文档的说明， INP 的计算方式是：对于大多数网站（互动次数不超过 50 次）来说，用户和网页所有的互动中，延迟时间最长的互动会被报告为本次浏览的 INP ，然后系统会取所有网页浏览量的第 75 百分位作为网页的 INP。而对于有大量互动的网站，Google 会忽略每 50 次互动中最高的一次互动。

目前会被观察用于记录 INP 的互动类型有：