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 的系统后,便能够分析数据,以便更好地了解存在缓慢互动问题的位置。
![ELK 日志记录系统报告待分析的 INP 值的屏幕截图。](https://web.developers.google.cn/static/case-studies/redbus-inp/image/a-screenshot-the-elk-log-c6a6705d23588.png?authuser=8&hl=hu)
用例
当用户在 redBus 网站上搜索机票价格时,他们可以更改搜索页面上的日期,以过滤出想要前往目的地的所选机票价格。更改此页面上日期的互动速度缓慢,这是导致 INP 不佳的原因。
此外,当用户滚动查看票价时,系统会从 API 延迟加载其他票价。虽然滚动操作本身的衡量方式并未考虑,但 scroll
事件监听器本身会调度大量必须在主线程上运行的工作。这项工作会导致主线程上出现争用,从而增加交互延迟时间,进而导致搜索页上的 INP 不佳。
redBus 如何针对搜索页优化 INP
为了改进搜索页的 INP,redBus 进行了多项优化:
- 为了减少事件回调在给定时间段内的触发次数,去抖动
scroll
事件处理脚本。通过降低scroll
事件回调的运行频率,主线程能够更快地对搜索页上的用户互动做出响应。 - 生成的渲染工作通过使用
requestAnimationFrame
回调确定了优先级。requestAnimationFrame
告知浏览器回调中的工作必须在下一帧之前完成。
![Chrome DevTools 中的性能面板的屏幕截图,其中显示了 redBus 网站触发滚动事件回调(未进行去抖动)的屏幕截图。这会导致主线程处于阻塞状态。](https://web.developers.google.cn/static/case-studies/redbus-inp/image/a-screenshot-the-perform-59051431069ff.jpg?authuser=8&hl=hu)
![Chrome DevTools 中的性能面板的屏幕截图,其中显示了 redBus 网站触发已去抖动的滚动事件回调。结果是主线程的阻塞性降低,因为滚动事件处理脚本的触发频率要低得多。](https://web.developers.google.cn/static/case-studies/redbus-inp/image/a-screenshot-the-perform-3a78c8f47d6e1.jpg?authuser=8&hl=hu)
此外,我们还对搜索结果页进行了以下进一步优化:
- 系统从搜索结果页的倒数第二张卡片中提取了新的批次结果,以便提前触发延迟加载,从而改善用户体验和视觉性能。
- 在延迟加载期间,每次网络调用提取的结果较少。通过将提取结果从 30 个减少到 10 个,观察到 INP 的范围从 870 减少到 900,减少到 350 到 370。
虽然这些更改显著改善了搜索页的 INP,但还存在如下问题:搜索页输入字段上的 change
事件会调用开销非常大的缩减器函数来更新界面。这会导致界面进行不必要的重新渲染,从而影响网页的 INP。
为了优化此交互,redBus 在本地管理了输入组件的状态,并仅在触发输入的 blur
事件时将其与 Redux 存储区进行了同步。这一变更通过降低调用缩减器的频率,减少了重新渲染的次数,并消除了界面的不必要的重新渲染。
经过此次变更,网页的 INP 提高了 72%,用户体验更快、更顺畅,用户更有可能与之互动。
业务影响
业务运行状况与网页性能之间的关系是众所周知的。虽然与其他核心网页指标相比,INP 是一项相对较新的指标,但 redBus 通过专注于改进这一以用户为中心的重要性能指标,获得了更出色的业务成果。最终,总销售额提高了 7%。
简而言之,INP 帮助绘制了 redBus 网站上的运行时性能问题图。了解有待改进的地方后,redBus 能够观察到问题、重现问题,并利用关键信息进行有益于 redBus 及其业务的优化。