INP 优化帮助 redBus 将销售额提高了约 7%
网络及其功能正在快速发展。您现在可以在 Web 上构建丰富且功能齐全的体验，从而实现原生应用在功能方面的许多功能。
JavaScript 是推动网络互动的主要驱动因素，但如果使用不当，可能会导致互动反应迟钝，并导致用户认为您的网站无响应或完全损坏。幸运的是，我们创建了 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 延迟加载其他票价。虽然滚动操作本身的衡量方式并未考虑，但 scroll 事件监听器本身会调度大量必须在主线程上运行的工作。这项工作会导致主线程上出现争用，从而增加交互延迟时间，进而导致搜索页上的 INP 不佳。
redBus 如何针对搜索页优化 INP
为了改进搜索页的 INP，redBus 进行了多项优化：
- 为了减少事件回调在给定时间段内的触发次数，去抖动
scroll事件处理脚本。通过降低scroll事件回调的运行频率，主线程能够更快地对搜索页上的用户互动做出响应。 - 生成的渲染工作通过使用
requestAnimationFrame回调确定了优先级。requestAnimationFrame告知浏览器回调中的工作必须在下一帧之前完成。
此外，我们还对搜索结果页进行了以下进一步优化：
- 系统从搜索结果页的倒数第二张卡片中提取了新的批次结果，以便提前触发延迟加载，从而改善用户体验和视觉性能。
- 在延迟加载期间，每次网络调用提取的结果较少。通过将提取结果从 30 个减少到 10 个，观察到 INP 的范围从 870 减少到 900，减少到 350 到 370。
虽然这些更改显著改善了搜索页的 INP，但还存在如下问题：搜索页输入字段上的 change 事件会调用开销非常大的缩减器函数来更新界面。这会导致界面进行不必要的重新渲染，从而影响网页的 INP。
为了优化此交互，redBus 在本地管理了输入组件的状态，并仅在触发输入的 blur 事件时将其与 Redux 存储区进行了同步。这一变更通过降低调用缩减器的频率，减少了重新渲染的次数，并消除了界面的不必要的重新渲染。
经过此次变更，网页的 INP 提高了 72%，用户体验更快、更顺畅，用户更有可能与之互动。
业务影响
业务运行状况与网页性能之间的关系是众所周知的。虽然与其他核心网页指标相比，INP 是一项相对较新的指标，但 redBus 通过专注于改进这一以用户为中心的重要性能指标，获得了更出色的业务成果。最终，总销售额提高了 7%。
简而言之，INP 帮助绘制了 redBus 网站上的运行时性能问题图。了解有待改进的地方后，redBus 能够观察到问题、重现问题，并利用关键信息进行有益于 redBus 及其业务的优化。