INP 优化帮助 redBus 提高了约 7% 的销售额
Web 及其功能正在快速发展。现在，您可以在 Web 上构建丰富且功能齐全的体验，在功能方面实现原生应用的大部分功能。
JavaScript 是 Web 上互动的主要推动力，但如果使用不当，互动可能会感觉缓慢，导致用户认为您的网站无响应或完全损坏。幸运的是，Interaction to Next Paint (INP) 指标就是为了解决这一特定用户体验问题而创建的。
INP 会衡量网页在其生命周期内发生的所有互动，并报告一个代表网站响应用户输入速度的单个值。简单来说，如果网页的 INP 达到或低于良好阈值，则可以说与该网页进行的所有互动都是快速可靠的。
redBus 是一家位于印度的巴士预订和票务网站，该公司付出了大量努力来提高其网站的 INP，即使在 INP 仍被视为实验性指标时也是如此。他们的努力取得了成效，销售额提高了 7%，这再次证明了网站性能与业务健康状况之间的关系。下面是 redBus 为提高其网站的 INP 所采取的措施。
主要目标
当 redBus 着手优化其网站的 INP 时，他们有三个目标：
- 无论网络速度和设备功能如何，都应着重于互动延迟时间，以便为用户提供更好的用户体验。
- 优化其网站，以尽可能加快互动速度。
- 确保其 API 的响应尽可能轻量，以确保快速将数据传输到前端。
历程
redBus 以两种方式对互动延迟时间进行了分类：
- 由于在客户端上屏蔽 JavaScript 而导致的互动延迟时间。如果互动使用过多的 JavaScript 而阻塞了主线程，则会延迟呈现，这会影响网页的 INP。
- API 调用导致的网络延迟时间。虽然 INP 不会衡量网络活动，但如果网络速度较慢或请求导致响应较大，依赖于对远程 API 的调用的互动可能会感觉缓慢。
redBus 最初非常自信，认为其网站的 INP 会很高，但 95 百分位数的实时用户监控 (RUM) 数据却表明情况并非如此。
redBus 如何衡量 INP
redBus 依赖 Google 构建的 web-vitals JavaScript 库，不仅跟踪 INP，还跟踪其网站上所有网页的所有重要用户体验指标。除了 web-vitals JavaScript 库之外，redBus 还使用 ELK 分析在前端收集的 INP 数据。
不过，您在实际操作中跟踪网站 INP 的方式可能与 redBus 解决此问题的方式大不相同。在开始优化互动之前，我们强烈建议您先了解如何在现场发现互动缓慢的问题，以便了解如何为您的网站最佳跟踪 INP，然后再了解如何在实验室中重现这些问题。
在 redBus 建立了用于跟踪 INP 的系统后，他们能够分析数据，从而更好地了解互动缓慢的情况。
使用场景
用户在 redBus 网站上搜索票价时，可以更改搜索页上的日期，以过滤出目标目的地的所选票价。更改此页面上日期的互动速度缓慢，是导致 INP 较差的原因。
此外，当用户滚动浏览费率时，系统会从 API 延迟加载其他费率。虽然滚动本身不会计入 INP 衡量结果，但 scroll 事件监听器本身会调度许多必须在主线程上运行的工作。此工作会导致主线程上出现争用，从而增加互动延迟时间，导致搜索页上的 INP 较差。
redBus 如何针对搜索页面优化 INP
为了提高搜索页面的 INP，redBus 进行了多项优化：
scroll事件处理程序已debounced，以减少事件回调在给定时间段内触发的次数。通过降低scroll事件回调的运行频率，主线程能够更快地响应搜索页面上的用户互动。- 系统使用
requestAnimationFrame回调对生成的渲染工作进行了优先级排序。requestAnimationFrame会告知浏览器，必须在下一帧之前完成回调中的工作。
此外，我们还对搜索结果页进行了以下进一步优化：
- 在搜索结果页上的倒数第二张卡片上提取了新批次的结果，以便通过更早触发延迟加载来改善用户体验和视觉效果。
- 在延迟加载期间，每次网络调用提取的结果更少。将提取结果从 30 个减少到 10 个后，INP 范围从 870 到 900 减少到 350 到 370。
虽然这些更改显著提高了搜索页的 INP，但搜索页输入字段上的 change 事件仍会调用开销较高的 reducer 函数来更新界面。这导致界面不必要地重新呈现，进而影响了网页的 INP。
为了优化这种互动，redBus 在本地管理输入组件的状态，并且仅在输入的 blur 事件触发时将其与 Redux 存储区同步。这项更改通过减少调用 reducer 的频率，减少了重新渲染的次数，并消除了界面不必要的重新渲染。
经过这项更改，该网页的 INP 提高了 72%，用户体验更快速、更流畅，因而更有可能与之互动。
业务影响
商家健康状况与网页效果之间的关系众所周知。与其他 Core Web Vitals 指标相比，INP 是一项相对较新的指标，但 redBus 通过专注于改进这项以用户为中心的重要性能指标，取得了更好的业务成效。结果是，总销售额提高了 7%。
简而言之，INP 有助于全面了解 redBus 网站上的运行时性能问题。知道需要改进后，redBus 能够观察问题、重现问题，并利用这些重要信息进行优化，从而对 redBus 及其业务有益。