Voot のプログレッシブ ウェブアプリ

Voot Lite ロゴ

概要

Voot.com がインドでメディア プログレッシブ ウェブアプリをリリース。実装から数日も経たないうちに、ユーザーあたりのセッション時間は 39%、ユーザーあたりの 1 日の閲覧回数は 15% 増加しました。

結果

  • ページの読み込み時間を 80% 短縮
  • ユーザーあたりのセッション時間が 39% 増加
  • 直帰率が 19% 減少
  • 訪問者から動画視聴者へのコンバージョンが 77% 増加
  • ユーザーあたりの 1 日の平均動画再生回数が 15% 増加

voot.com について

Voot のスクリーンショット

Voot は、ネイティブ アプリとモバイルウェブ アプリの両方で利用可能なインド有数のビデオ オンデマンド サービスで、オンラインでは 35,000 時間近くのプレミアム コンテンツを提供しています。これには、Colors や MTV などのネットワーク、Voot Originals の独占配信、8,000 本以上の子供向け動画が含まれます。Voot は、Viacom と Network18 Group の合弁事業である Viacom18 が運営しています。

課題

インドでは、モバイル デバイスがメディア利用の主要な形態となっています。このようなデバイスでは、ネイティブ アプリ用のストレージが限られていることも多く、モバイルウェブが Voot のプロダクト戦略に欠かせない要素となっています。

Voot のモバイル ユーザーのほとんどは、従量制の 2G および 3G ネットワーク経由でインターネットにアクセスしています。データ転送にはコストがかかります。また、ユーザーは動画の再生開始後に動画を真剣に利用しますが、読み込み時間が長いと、ユーザーは再生が始まる前に諦めてしまいます。この課題に対処し、モバイルウェブの利用を増やすため、Voot はプログレッシブ ウェブアプリ機能を使ってサイトを強化することにしました。

解決策

全体的なユーザー エクスペリエンスを向上させるため、Voot.com は「ホーム画面に追加」や Service Worker などの機能を使用して、自社サイトをプログレッシブ ウェブアプリに変換しました。

4G サービスは最近リリースされましたが、インドのほとんどのユーザーは 2G および 3G ネットワーク経由でインターネットにアクセスしますが、データ転送速度は遅い場合もあれば、高額になることもあります。転送されるデータを減らすために、Voot.com はモバイル専用に画像を最適化し、現在はブラウザの機能に応じて JPEG または WebP の画像を動的に配信しています。

Voot.com は、ユーザーの移動時に画像をプリロードし、再訪問に備えて画像をキャッシュに保存する Service Worker を追加することで、読み込み時間も短縮しました。また、このサイトを Lighthouse で分析し、パフォーマンス分析情報を獲得しました。これにより、JavaScript と CSS のオーバーヘッドを削減し、同期サーバー呼び出しを実装することができました。

この最適化により、ファースト ビュー ページ読み込みのデータ転送量が 63% 削減され、リピーターのデータ転送量が 86% 削減されました。ページの読み込みは、初回訪問者では 5 倍、リピーターでは 7 倍近く速くなりました。

また、真のアプリのようなエクスペリエンスを提供するために、Voot.com はホーム画面に追加を実装し、ユーザーがネイティブ アプリのようにホーム画面からページを起動できるようにしました。効率化されたログイン プロセスと組み合わせることで、ユーザーは迅速かつ簡単に再びサイトにアクセスし、お気に入りの番組を視聴できます。

Voot は新しい UI を、パソコンウェブとネイティブ アプリに先駆けて、まずモバイルウェブでリリースしました。リリース後数日で、ユーザーの放棄が 19% 減少し、訪問者から動画視聴者へのコンバージョンが 77% 増加しました。また、ユーザーのエンゲージメント レベルも向上し、ユーザー 1 人あたりの 1 日の平均動画再生回数は 39% 増加し、1 日の平均動画再生回数も 15% 増加しました。これらのユーザー エンゲージメント指標では、ユーザーが何もインストールしなくても、Voot.com がネイティブ アプリと同様のパフォーマンスを示していることがわかります。

Viacom18 の OTT およびデジタル ベンチャーズのプロダクトおよびテクノロジー担当シニア バイス プレジデント兼責任者である Rajneel Kumar 氏は、次のように述べています。「PWA の採用により、モバイルウェブのユーザー エクスペリエンスに非常に大きな変化がもたらされました。「技術や UI の変更、最適化に費やしてきたすべての時間と労力は、非常に好ましい結果を示しているようです。私たちは、この手法をさらに改良していき、今後も大幅に消費者の需要の伸びを得られると確信しています。」