多年来，我们一直习惯于使用 Google 的 Pagespeed 结构，该结构旨在确保网站能够快速加载和服务。通过生成可衡量的参数并利用从 Chrome 市场份额收集的匿名数据，Google 将这些指标用作 SEO 指标。随着 2022 年推出 Interaction to Next Paint (INP)，重点已从单纯的页面加载速度转移到更广泛的网络性能角度。INP 不仅衡量页面加载速度，还衡量页面上用户交互的处理速度。本质上，它将网站导航体验转变为 Pagespeed 指标。
在 Kerem 的博客上，术语“一般交互延迟”被认为非常适合这个概念，谷歌也在自己的视频中很好地解释了这一点。然而，为了充分理解这个指标，我们将在以下部分深入探讨这个主题。
INP 持续时间的解释是什么？
INP 的期限包括：
- 用户与页面交互和事件处理程序执行之间的时间。
- 脚本的执行时间。
- 从代码执行到输出显示给用户的时间。
这些过程通常在几毫秒内发生，但在移动设备上，尤其是 CPU 功率较低的旧 Android 手机上，这种延迟（延迟）通常会很明显。值得注意的是，INP 数据与其他 Lighthouse 数据一样，都是匿名收集的，并根据以下情况进行评估： 75％。因此，我们的目标是创建在普通设备上表现良好的应用程序，而不是仅在高端设备上表现良好的应用程序。
INP 时长的真实示例
以下是我们每天访问的网页上的一些真实示例，用于解释这一概念：
在电子商务网站上输入地址
当你在电子商务网站上购物并输入送货地址时，你首先选择省份。然后，当你点击选择框选择地区时，你需要等待一段时间才能加载 Ajax 结果，一段时间后，地区信息才会加载。这是 INP 的一个很好的例子。在这个例子中，改善用户体验可以涉及添加一个“加载指示器”来通知用户 Ajax 过程。
排序选择
在商品详情页使用过滤时，如果勾选后过滤商品没有管理好，将会导致 INP 值上升。过滤操作时尽量使用复杂度较低的 JS，并考虑用户体验，可以尽量保持 INP 值较高。
产品图片库
用户在产品详细信息页面上点击产品照片后等待照片库加载的时间可能会影响 INP。
预约按钮
点击“预订”按钮和下一页之间的交互延迟就是 INP 的一个例子。
添加到购物车按钮
单击“添加到购物车”按钮并判断商品是否已添加到购物车时出现的几毫秒延迟完美地定义了 INP。
从这些例子中可以看出，INP 陷阱存在于影响 SEO 和直接转化率的场景中。
如何提高 INP？
- 使用最新的 JS 前端库： 使用现代 JS 前端库（如 Vue、React 和 Angular）来提高性能是有益的，因为它们具有性能和可重用性优势。
- 最小化 JS 库的复杂性： 建议使用不太复杂的 JS 库。我个人建议尽量避免使用 jQuery。
可接受的 INP 指标水平
阈值 良好、中等和较差的 INP 水平分别为 200 毫秒和 500 毫秒。将 INP 保持在这些阈值以下对于维持良好的用户体验和整体网络性能至关重要。
