スマートテレビやセットトップ ボックス デバイスの Interaction to Next Paint（INP） を改善するには、API サポートの制限とシステム仕様の厳格さという制約により、デスクトップ ブラウザよりもかなり多くの課題が伴います。この活用事例では、Disney+ Hotstar がどのようにこれらの障害にうまく対処し、結果として大きなビジネス上の利益を得たかをご紹介します。
リビングルーム向けデバイスの導入が進む中で、Disney+ Hotstar は、スマートテレビやセットトップ ボックスのアプリでシームレスなブラウジング体験を提供することが重要なビジネス要件であることを認識していました。ただし、このようなデバイスの INP を修正するのが難しいのは、どのテレビモデルでも非常に古いバージョンのブラウザを使用している可能性があることです。たとえば、2020 LG テレビは 2018 年にリリースされた Chrome 68 を使用しています。これらのデバイスの中にはローエンド デバイスに分類されるものもあります。これは、主力のタブレットやノートパソコンほど迅速には操作に応答できないことを意味します。
次の図は、Chrome DevTools で CPU の速度を 6 倍に下げたノートパソコンとスマートテレビの間で、ページの読み込みにかかる時間を比較したものです。ご覧のとおり、このノートパソコンは最近製造されたスマートテレビよりもはるかに高速です。
これらのテストでラボデータが生成されましたが、Disney+ Hotstar は web-vitals ライブラリを使用してアプリの実際のユーザーから Interaction to Next Paint（INP）のフィールド データの収集を開始しました。その結果、アプリユーザーの 75% がフィールドで 675 ミリ秒の INP を経験していることが確認されました。これは、INP によるとユーザー エクスペリエンスが「低い」と判断されています。
このケーススタディでは、Disney+ Hotstar が、特にローエンド デバイスでストリーミング アプリケーションの応答性を向上させた事例を紹介します。INP 値を 272 ミリ秒に下げ、61% の改善を達成しました。これは、推奨の「良好」しきい値である 200 ミリ秒を引き続き上回っていますが、これに対しては大幅に改善されています。
調査結果
Disney+ Hotstar は、web-vitals ライブラリのアトリビューション ビルドの onINP メソッドを使用してアプリをインストルメント化しました。最初のフェーズでは、特に正確なターゲット要素の特定において、さまざまな課題に直面しました。この問題は、Disney+ Hotstar アプリで一部のカスタマイズで使用されたサードパーティの空間ナビゲーション ライブラリにより、すべての参照が本文を指しているために発生しました。このライブラリはドキュメント本文のイベントのみをリッスンし、実際にフォーカスされている要素を判別し、リモートキーの押下に基づいて次のフォーカスを予測します。
Disney+ Hotstar は、まずアトリビューションの問題を解決し、INP 値が高いインタラクションを適切に特定できるようにすることから始めました。そのため、Disney+ Hotstar は、現在フォーカスされている要素の空間ナビゲーション ライブラリにすでに存在する focusKey 属性と、ページ上のフォーカス可能なすべての要素のマップを記録しました。これは、web-vitals アトリビューション ビルドで利用可能なインタラクション ターゲットに似ています。
focusKey のキャプチャと、それをトリガーしている要素のパス。
適切な測定とアトリビューションが整った今、フィールド データからの調査結果では、INP にとって最も問題となる相互作用が次のように報告されました。
- カルーセル トレイの水平ナビゲーション。
- 縦方向のカルーセル トレイ ナビゲーション。
- 最初のページ読み込み時の操作。
Chrome DevTools のパフォーマンス パネルとこれらのインタラクションをプロファイリングしたところ、空間ナビゲーション ライブラリがすべてのフォーカス可能な要素の位置を読み取り、新しいツリーを構築していることがわかりました。これは、要素間の移動など、操作のたびにレイアウト スラッシングをトリガーする高コストのオペレーションです。
ホームページでは、次のように空間ナビゲーション ライブラリによってツリーが生成されました。
つまり、アプリに 10 個のトレイが表示され、各トレイに 7 枚のカードがある場合、そのトレイ コンテナには、ナビゲーション アイテムを含むフォーカス可能な要素が 70 個あるということです。インタラクティブな要素が多数あります。また、サードパーティのカルーセル ライブラリも使用しました。このライブラリは、水平ナビゲーション時に各カードのサイズを読み取り、コンテナを変換するため、インタラクションのレイテンシをさらに増加させました。
問題の解決
アプリ全体の応答性の問題を解決するには、いくつかの異なる問題に個別に対処する必要がありました。
水平トレイ ナビゲーションの改善
Disney+ Hotstar は、合成アニメーションを使用し、カードごとに 1 回ではなくトレイごとに 1 回サイズを読み取ることで、レイアウト スラッシングをトリガーしない独自のカルーセル ライブラリを構築しました。
空間ナビゲーションはカルーセルのルートにのみ焦点を当てており、さらに水平方向のナビゲーションを行う場合は、カスタム カルーセルが登場します。このアプローチにより、Disney+ Hotstar は空間ナビゲーションと、すべてのナビゲーションでディメンションを読み取っていた古いカルーセル ライブラリへの依存を排除しました。
最適化後の空間ナビゲーション ツリーは次のようになります。
次の画像は、カルーセルの実装前と実装後の Chrome DevTools のパフォーマンス パネルで測定したパフォーマンスの比較です。
この取り組みの結果、Disney+ Hotstar は、この分野でアプリの INP が大幅に減少しました。また、サードパーティ ライブラリを削除することで、約 35 KB（圧縮済み）も削減できました。また、こうした改善により、Disney+ Hotstar は、ホームページの合計レンダリング時間の測定に使用するカスタム指標の再生時間も短縮できました。これは、空間ナビゲーション ノードが減るため、レイアウトがトリガーされる頻度が低くなったためです。
垂直トレイ ナビゲーションの改善
また、Disney+ Hotstar は、トレイをすべて事前に読み込むのではなく、トレイを遅延読み込みすることで、縦型のトレイ ナビゲーションのパフォーマンスも向上させました。つまり、ページの読み込み時には、それぞれがカルーセル コンポーネントと多数の画像を持つトレイの 10 個のインスタンスを読み込むのではなく、ビューポートに表示される 2 つのトレイと、上下に追加のトレイだけを読み込みます。また、メインスレッドがユーザー操作を処理する機会を増やすために、setTimeout() 放棄戦略を使用してレンダリングも複数のタスクに分割しました。
最初のページ読み込み時の操作
アプリの起動時に膨大な数のスクリプトを処理するアプリでは、INP が高くなります。これは、ブラウザがこれらのスクリプトをダウンロード、解析、評価する必要があるためです。そうはいっても、メインスレッドが長時間占有される可能性があり、ユーザーの操作にすばやく応答できなくなります。
Disney+ Hotstar は、その後のページ読み込みを高速化するために、アプリケーション開始時（スプラッシュ画面の時間）に実際よりも多くのスクリプトを処理していることに気づきました。これにより、追加のスクリプト評価タスクが発生し、INP に悪影響を与える可能性もありました。
この問題を解決するために、Disney+ Hotstar は、アプリ起動時の時間を節約するために、ほとんどのアセットを動的に読み込むことを検討しました。ただし、これを行うと、今後その JavaScript が読み込まれなくなるため、以降のページに移動する読み込み時間が長くなってしまいます。これに対処するために、Disney+ Hotstar は社内でアセット プリローダー ライブラリを開発しました。このライブラリは、ユーザー ジャーニーで次に表示されるページを決定し、そのページのアセットをプリロードします。次に例を示します。
- ユーザーがログインページを表示すると、アセット プリローダー ライブラリがプロファイル選択ページのアセットをプリロードします。
- プロファイル選択ページでは、ホームページのアセットが読み込まれます。
- ホームページに、詳細ページのアセットが読み込まれます。
- 最後に、動画再生ページのアセットが詳細ページに読み込まれます。
Disney+ Hotstar は、アセットの読み込みを最適化することで、アプリの INP を減らすこと（メインスレッドがユーザー インタラクションを比較的自由に行えるようになったため）と、下位デバイスのメモリ使用量を削減することに成功しました。
これらの変更により、次のスクリーンショットに示すように、フィールドから報告される INP 数が 32% 減少しました。
その他の改良点
また、Disney+ Hotstar は、頻繁にメインスレッドに譲ることで分割できるいくつかのユーザー イベントに長いタスクがあることに気付き、さらに一歩進んで、ユーザーが実行中にタスクをキャンセルできるタスク ジェネレータ ユーティリティを作成しました。
たとえば、ユーザーがトレイ上の複数のカード間を移動すると、次のようになります。
- 次のカードはフォーカスされています。
- カードは必要に応じて翻訳されます。
- [スポットライト] が更新されました。
- 予告編が存在する場合は、その予告編が取得され、再生が開始されます。
- アクションに対してアナリティクス イベントが発生します。
このプロセス中に、ユーザーが次のカードにフォーカスした場合は、残りのステップを実行する必要はありません。たとえば、ユーザーが次のカードに移動した場合、特定のタイトルの予告編の取得とプレーヤーの初期化が不要になります。そのため、これらのタスクを中止してメインスレッドを解放できます。
Disney+ Hotstar のタスク ジェネレータ ユーティリティは、タスクである関数を受け入れます。別のタスクが途中で停止すると、前のタスクは中止されるため、不要なタスクの実行が削減され、必要なタスクに迅速に対処できます。
結果
全体として、Disney+ Hotstar のアプリケーションの INP は 675 ミリ秒から 272 ミリ秒に低下し、約 60% の改善となりました。さらに、トレイ操作レイテンシは特に、約 400 ミリ秒から約 100 ミリ秒に減少しました。
ビジネスへの影響: ユーザーあたりの週間カード表示回数が 111 回から 226 回に増加しました。これは 100% の増加です。つまり、高速で応答性の高いインターフェースは、ユーザー エンゲージメントをより長く維持できる可能性が高いことを示しています。
Disney+ Hotstar は、これはほんの始まりにすぎません。Disney+ Hotstar は、INP 指標をガイドとしてレンダリングとインタラクションのパフォーマンス向上のほんの一部にすぎません。また、Disney+ Hotstar は近い将来、お客様にスムーズな体験を提供できるようになることを嬉しく思っています。
Disney+ Hotstar の Ayush、Ajay、Kiran、Milan、Richa の皆さまのご協力に感謝します。
このイノベーションの取り組みを支援してくれた Disney+ Hotstar のエンジニアリング責任者、Ankeet Maini、Disney+ Hotstar カスタマー エクスペリエンス責任者の Rahul Krishnan P と、このケーススタディのレビューと公開に協力してくれた Google の Jeremy Wagner、Gilberto、Barry Pollard、Brendan Kenny に感謝します。