Understanding and Improving Interaction to Next Paint (INP) | SpeedCurve

什么是 INP？

INP（Interaction to Next Paint）衡量页面对访问者交互的响应速度，具体是从点击、按键等动作发生到浏览器进行下一次绘制的时间。INP 包括三个子部分：

1. 输入延迟 - 交互处理程序等待执行的时间。
2. 处理时间 - 交互处理程序的执行时间。
3. 展示延迟 - 浏览器绘制更新的时间。

INP 的阈值

根据 INP 的具体值，可以分为“好”、“需改进”和“差”三类，大多数网站处于“需改进”或“差”类别。

改善 INP 的方法

1. 识别问题：
   • 使用 Chrome UX Report (CrUX) 获取高层次的 INP 概览。
   • 利用 SpeedCurve 的 RUM 工具筛选热门交互元素并调查具体页面类型和设备类型的行为。
   • 如果没有 RUM 数据，有可能调查常见的用户交互，如关闭弹窗、打开菜单等。
2. 调试交互：
   • 使用 Chrome DevTools 捕捉问题交互并进行剖析。在“Performance”面板中，加载页面并记录交互数据，分析响应时间和任务执行情况。
3. 分析交互：
   • 调查为什么某些交互有较长的 INP 时间，找出问题的关键部位，如事件处理程序、样式重新计算、布局更新等。

案例分析

文章通过具体案例分析了不同网站的交互问题及其解决方法：

1. H&M 网站 - 解析菜单打开时的交互，指出事件处理程序和样式计算的问题。建议关注减少处理时间以及优化菜单的组件。
2. John Lewis 网站 - 分析菜单打开时的长任务问题，指出事件处理程序重叠造成的输入延迟。建议优化长任务和中间处理程序。
3. Wales Online 网站 - 评估关闭同意弹窗时的处理时间，指出主要问题在于第三方脚本。建议分任务来优化处理时间。

优化交互方法

1. 推迟不重要的活动：
   • 将次要任务移动到新的任务中执行（如通过 setTimeout）。