INP上FID下，下一代CWV有什么不一样？
极诣的忠实读者都知道，Core Web Vitals（核心网页指标）作为谷歌用户浏览体验的指标被赋予了特殊意义。这是谷歌在PWA碰壁后最后的尝试。谷歌有底气这样做是因为以Chromium为内核的浏览器已经超过了半壁江山，更不要提操作系统和搜索引擎了。
CWV的评分优秀意味着用户，尤其是移动用户的浏览体验符合要求。这也成为谷歌SEO中的排名因素之一。在2020年，谷歌推出CWV后，我们认识到了三个主要CWV指标，分别是LCP，CLS和FID。马老师在以往几年中已经反复对这几个指标和优化进行了介绍，
- 《网页多快才算快？谷歌发布核心网页指标Core Web Vitals》
- 《最后一次登机广播，Core Web Vitals六月上线》
- 《CWV救星Chrome DevTools Performance Insights》
- 《如何优化LCP？准备好迎接CWV新排名算法了吗？》
你也可以参考web.dev的2023版了解有哪些新的HTML指引可以帮助你提升这几个指标。
2022年5月，当墙内还在抢菜严防死守各种希腊字母的时候，谷歌引进了一个新的指标——INP。INP是Interaction to Next Paint的缩写，顾名思义它记录了当用户采取行动后到下一次浏览器画面的绘制之间经过的时间。
2024年3月份，也就是不到一年时间之后，INP将会替换FID成为Core Web Vitals中新的三大指标。小朋友，你的心中是否有下面疑问呢？马老师一一为你解答。
INP和FID有什么区别？
INP记录了用户每次行为到画面发生变化中间经过的时间，而FID仅仅是首次。我们知道，显然页面上发生的互动是多种多样的。
我们会为页面安置许多个监听器（Event Listener）来监听并有事件句柄（Event Handler）来响应用户的动作，这些动作包括点击屏幕，不管是用鼠标还是手指，也包括按键，不管是物理键盘还是软键盘。
当我们这些监听器抓住事件后事件句柄会有一个反馈输出给用户，这就是在网页上的一个变化，也就是Paint。如果能及时绘画，那么体验就合格，反之就很糟糕。
因此从这个意义上来讲，INP相对FID是一种进步。随之而来的是谷歌需要通过Chrome浏览器收集更多信息。也意味着对页面的要求更严格。
什么样的INP才算好的INP？
200毫秒（含）以内，我们定义为一个Good INP。200毫秒至500毫秒（含）为待改进。500毫秒以上为糟糕的INP。你可能听上去觉得很容易，实际上能够合格的网站目前仅占65%，连三分之二都达不到。
你还记得马老师之前都没怎么强调FID吗？因为FID实在很轻松，有93%的网站达标，不达标真是小概率事件。但是INP不同，这回需要我们重视了。
INP如何计算？
需要注意的是，INP并非把所有的互动响应时间平均一下，而是采用最长的那个数值。也就是说如果按钮A需要501毫秒来响应，那么其他按钮的反映再快也没用。当然谷歌在计算的时候会去除Outlier。
有的页面的互动很多的时候，浏览器只会抽取一定比例的互动来计算。所以这里的“全部”互动也是打引号的。
INP如何进行优化？
对于INP的优化必然要比FID要难许多，后者甚至是可以忽略的。INP的思路主要有以下这些：
- 让客户端尽量少算，当你把大量计算留给客户端的时候客户端的响应必然要慢许多。能服务器端给的或者能算好的不要留给客户端算。可能的话，我们尽量把算好的或者算到一半的结果留给客户端。
- 给个Loading画面，因为Loading也是一个Paint！这样就缩短了反馈的时间。特别是如果我们使用一些XHR请求的时候，我们先“吭一声”再去做事。这和我们待人接物的道理是一样的。
- 减少后台的其他不必要的活动。二十多年前马老师做网页的时候喜欢搞个背景音乐弄个漫天雪花效果。这些都会占用计算资源，降低其他互动的响应时间。如果你的前端性能糟糕，那么有很大机率是因为堵车。
以上就是马老师对INP的简介，也是关于INP你必须知道的。Chrome的DevTools中的Performance工具是你的好朋友，其中有具体记录的哪些任务影响了你的INP，你需要和你的前端工程师一同对页面进行优化。
