Google 最新发布的性能指标之一是 Next Paint 的交互（INP），用于评估网页响应速度，特别关注用户互动。INP监测并报告了所有用户与页面互动的延迟，以单个数值的形式呈现。当用户点击按钮或触摸屏幕时，网站应该迅速响应，以提供卓越的用户体验，并在未来的Google算法更新中获得更有利的SEO排名。
-
什么是下一次绘制的交互？
INP：是Interaction to Next Paint的简写，中文名称与下一次绘制的交互。它是一种网站性能度量指标，用于衡量用户界面的响应性，即用户访问页面的整个过程发生页面交互的延迟来评估页面对用户交互的整体响应能力。最终的 INP
值是观察到的最长相互作用，忽略异常值。从这个意义上说，INP 开始衡量绘制能力与绘制动作的整个持续时间。
INP 延迟由三个部分组成：
- 输入延迟：指后台正在进行的任何阻止事件处理程序运行的任务
- 处理时间：指执行相关事件处理程序代码所需的时间
- 呈现延迟：指的是进程完成和浏览器渲染下一帧之间的时间
2. 如何衡量页面上的 INP ？
使用 Google Chrome 用户体验报告 (CrUX) 中的数据来检查网页的
INP 测量值。该数据集基于在 Chrome 浏览器上与你的网站进行交互的真实用户。尽管仅从 Chrome 会话中提取并不理想，但这是目前可用于 INP 的最佳数据集。输入要测试的页面或域的 URL，单击
Enter，然后向下滚动到正确的指标。
INP 衡量的用户操作行为：
- 点击鼠标。
- 点击带有触摸屏的设备。
- 按物理键盘或屏幕键盘上的键。
3. 什么是良好的 INP ？
根据 Google 官方公布，良好的 INP 分数应小于 200 毫秒。好的是 200
到 500 毫秒之间。任何超过 500 毫秒的事件都应作为严重的 Web 性能问题，需要进行优化解决。
需要注意的是，访问者的设备和网络连接会影响INP。网站和用户设备以及网络连接速度缓慢， INP 评分也不会太高。
INP 的评分标准：
- 良好：低于 200 毫秒
- 需要改进：200 – 500 毫秒
- 较差：500 毫秒以上
4. 如何改进 Next Paint 的交互？
为了在你的网站上获得最佳的 INP，需要针对页面进行优化，以尽可能快地响应用户交互。
4.1 提高主线程可用性
浏览器的主线程是浏览器进程中的一个关键部分。主线程负责下载资源、绘制页面和处理用户输入。如果主线程正忙于执行大型任务，则它无法执行其他任何操作，包括对访问者的输入做出反应。这样会对 INP 产生影响，可以在以下方面进行优化：
① 分割大型任务：
当超过 50 毫秒才能完成的任务应该使用Webpack、 ESBuild、
Rollup 或 Parcel等工具进行分割 。这样，主线程的可用性就会有更多的中断，可以处理用户输入
② 避免抖动：
通常指的是页面加载和交互过程中出现的不流畅、抖动或闪烁等问题，这可能会影响用户的体验。优化页面布局和样式和JavaScript脚本。
③ 延迟加载非关键任务：
延迟加载指定的文件，直到主线程空闲。为了获得最佳结果，仅延迟加载非关键且位于首屏以下的文件，这样对于访问者来说不会有明显的差异。
④ 减少JavaScript 和第三方脚本：
INP的最大障碍之一是浏览器需要加载的内容太多。主线程要做的事情越多，保持快速交互就越困难。通过删除或优化 JavaScript 和第三方脚本来提高你的 INP。
4.2 减少用户输入延迟
- 最大限度地减少主线程上可能延迟浏览器响应用户输入的长任务。
- 删除未使用的代码，或推迟非必要的代码；
- 最大限度地减少网站上插件的使用，以减少页面加载期间不必要的加载。
4.3 优化处理时间
- 最小化 CSS 动画；
- 避免使用第三方字体；
- 向用户显示正在加载或正在进行的元素，让用户知道处理正在进行。
4.4 最小化呈现延迟
- 优化您的网页，并减小 DOM 大小。DOM 或文档对象模型是一种树状结构，是网页上所有元素的层次结构。
- 更大的 DOM 意味着更多的渲染工作和更长的处理时间。DOM 越精简，浏览器处理和渲染它们的速度就越快。