INP の最適化により、redBus の売上が約 7% 増加
ウェブとその機能は急速に進化しています。ネイティブ アプリケーションの機能の多くをウェブ上で実現できる、豊かで充実したエクスペリエンスを構築できるようになりました。
JavaScript はウェブ全体のインタラクティビティを促進する主な要素ですが、慎重に使用しないと、操作が遅く感じられ、ウェブサイトが応答していない、または完全に機能していないとユーザーに認識される可能性があります。幸い、この特定のユーザー エクスペリエンスの問題に対処するために、Interaction to Next Paint（INP）指標が作成されています。
INP は、ページのライフサイクル中に行われたすべてのインタラクションを測定し、ウェブサイトがユーザー入力に応答する速度を表す単一の値を報告します。簡単に言うと、ページの INP が良好なしきい値以下であれば、そのページで行われたすべてのインタラクションは信頼性の高い高速インタラクションであると言えます。
インドに拠点を置くバス予約とチケット販売のウェブサイトである redBus は、INP がまだ試験運用中の指標であったにもかかわらず、ウェブサイトの INP を改善するために多大な努力を払いました。その結果、売り上げが 7% 増加しました。これは、ウェブのパフォーマンスとビジネスの健全性の関係を改めて示しています。redBus がウェブサイトの INP を改善するために行ったことは次のとおりです。
上位の目標
redBus はウェブサイトの INP の最適化に着手するにあたり、次の 3 つの目標を掲げました。
- ネットワーク速度やデバイスの機能に関係なく、インタラクション レイテンシに重点を置いて、ユーザー エクスペリエンスを向上させます。
- ウェブサイトを最適化して、インタラクションをできるだけ速く維持する。
- フロントエンドへのデータ転送を高速に行うため、API からのレスポンスが可能な限り軽量であることを確認します。
プロセス
redBus では、インタラクション レイテンシを次の 2 つの方法で分類しました。
- クライアントで JavaScript がブロックされたために発生するインタラクション レイテンシ。インタラクションで過剰な JavaScript が使用され、メインスレッドがブロックされると、レンダリングが遅延し、ページの INP に影響します。
- API 呼び出しによるネットワーク レイテンシ。ネットワーク アクティビティは INP で測定されるものではありませんが、リモート API の呼び出しに依存するインタラクションでは、ネットワーク速度が遅い場合や、リクエストの結果が大きなレスポンスになる場合は、遅く感じることがあります。
redBus は当初、ウェブサイトの INP は良好であると確信していましたが、この指標の 95 パーセンタイルにおけるリアルユーザー モニタリング（RUM）データは、別の結果を示していました。
redBus が INP を測定した方法
redBus は、Google が構築した web-vitals JavaScript ライブラリを使用して、INP だけでなく、ウェブサイト上のすべてのページの重要なユーザー エクスペリエンス指標をすべてトラッキングしました。redBus は、web-vitals JavaScript ライブラリに加えて ELK を使用して、フロントエンドで収集された INP データを分析しました。
ただし、現場でウェブサイトの INP をトラッキングする方法は、redBus が問題に取り組んだ方法とは大きく異なる場合があります。インタラクションの最適化を開始する前に、フィールドで遅いインタラクションを見つける方法を読んで、ウェブサイトの INP を効果的にトラッキングする方法と、ラボで再現する方法を学習することを強くおすすめします。
redBus は INP をトラッキングするシステムを導入し、データを分析してインタラクティビティの遅延が発生している場所を把握できるようになりました。
ユースケース
ユーザーが redBus ウェブサイトで運賃を検索する際、検索ページの日付を変更して、目的地の運賃をフィルタできます。このページで日付を変更する操作が遅く、INP が低下していました。
また、ユーザーが運賃をスクロールすると、追加の運賃が API から遅延読み込みされます。スクロール自体は INP の測定方法に考慮されませんが、scroll イベント リスナー自体は、メインスレッドで実行する必要がある多くの処理をスケジュールします。この処理によりメインスレッドで競合が発生し、インタラクション レイテンシが増加し、検索ページの INP が低下していました。
redBus が検索ページの INP を最適化した方法
検索ページの INP を改善するため、redBus は次のような最適化を行いました。
- 特定の期間にイベント コールバックが呼び出される回数を減らすため、
scrollイベント ハンドラがデバウンスされました。scrollイベント コールバックの実行頻度を下げることで、メインスレッドは検索ページでのユーザー操作に迅速に対応できるようになりました。 - 生成されたレンダリング作業は、
requestAnimationFrameコールバックを使用して優先度が付けられました。requestAnimationFrameは、コールバック内の処理を次のフレームの前に完了する必要があることをブラウザに伝えます。
また、検索結果ページに対して以下の最適化も行いました。
- 検索結果ページの 2 番目のカードで新しい結果バッチが取得されるようにしました。これにより、遅延読み込みをより早くトリガーして、ユーザー エクスペリエンスと視覚的なパフォーマンスを向上させることができます。
- 遅延読み込み中の各ネットワーク呼び出しで取得される結果が減りました。フェッチ結果を 30 件から 10 件に減らすと、INP 範囲が 870 ～ 900 から 350 ～ 370 に減少しました。
これらの変更により検索ページの INP は大幅に改善されましたが、検索ページの入力フィールドの change イベントで、コストの高いリデューサー関数が呼び出され、ユーザー インターフェースが更新されるという問題が残っていました。これにより、ユーザー インターフェースが不要に再レンダリングされ、ページの INP に影響しました。
このインタラクションを最適化するため、redBus は入力コンポーネントの状態をローカルで管理し、入力の blur イベントがトリガーされた場合にのみ Redux ストアと同期しました。この変更により、リンダーの回数が減り、リデューサーの呼び出し頻度が下がったため、ユーザー インターフェースの不要な再レンダリングが排除されました。
この変更により、ページの INP は 72% 向上し、ユーザーがよりエンゲージメントを高めやすい、より高速でスムーズなユーザー エクスペリエンスが実現しました。
ビジネスへの影響
ビジネスの健全性とページのパフォーマンスの関係はよく知られています。INP は他の Core Web Vitals と比較すると比較的新しい指標ですが、redBus は、この重要なユーザー中心のパフォーマンス指標の改善に重点を置くことで、ビジネス成果の向上を実現しました。その結果、売上は全体で 7% 増加しました。
つまり、INP は redBus ウェブサイトのランタイム パフォーマンスの問題を把握するのに役立ちました。改善の余地があることを認識した redBus は、問題を観察し、再現し、その重要な情報を使用して、redBus とそのビジネスに有益な最適化を実施できました。