オレンジ: 新しい PWA により、モバイルでのコンバージョン率が 52% 向上

また、新しい PWA は以前のサイトより平均読み込み時間が 30% 短縮され、直帰率が 12%、セッション深度が 18% 向上しています。

Adam Skręt
Adam Skręt
Marcin Sierakowski
Marcin Sierakowski
Rafał Filipek
Rafał Filipek

Orange Polska S.A.(国際的な Orange Group の一部)は、音声、データ、インターネット アクセス、テレビなどのモバイルおよび固定通信サービスを含む、ポーランドの大手通信サービス プロバイダです。また、IT サービスと統合サービス、専用回線、その他の通信付加価値サービスと機器も提供しています。

新しい PWA のスクリーンショット。

課題

ウェブサイトの読み込みに時間がかかると、不安感がイライラに変わります。 物理的な存在がほとんどないデジタル企業の場合、特にモバイルアプリの場合、その影響は明白です。特にモバイルアプリの場合、Google の内部調査では、アプリのアンインストールの最も重要な理由が速度であることを明確に示しています。しかし、私たちのような確立された業界で、流通チャネルに強力な実店舗戦略を策定して運営している場合、デジタルは売り上げの唯一のソースではないため、デジタル速度の影響はそれほど明白ではありません。このため、スピードに投資するよう経営幹部を説得することはさらに難しくなります。

経営幹部に提案する際、Google アナリティクスの過去のパフォーマンス データを参照して読み込み時間とコンバージョン率の相関関係を明確に示すことで、説得力を高めることができました。冷静な事実に基づき、ページの読み込み時間が 1 秒増えるごとに、収益と売上が 15 ~ 20% 低下していることがわかりました。

読み込み時間とコンバージョンの相関関係を示すグラフ。
上のグラフ(オレンジ色)は、元のサイトでのコンバージョン率を読み込み時間で分割したものです。たとえば、左から 1 つ目の棒は、読み込み時間が 2 秒未満のユーザーを表します。その横にあるバーは、読み込み時間が 2 ~ 3 秒のユーザーを表します。下のグレーのグラフは、元のサイトで全ユーザーが実際に経験した読み込み時間を示しています。

アプローチ

そこで私たちは、プログレッシブ ウェブアプリ(PWA)を構築することにしました。特にモバイル トラフィックに重点を置いたのは、ウェブサイトをモバイル デバイスで利用しているお客様の 75% 以上がモバイル トラフィックだったからです。チームは同様に、重要業績評価指標の改善と、より魅力的で魅力的なエクスペリエンスを提供することに重点を置きました。

Google は、以下の質問に答えるために概念実証を行うことを目指し、新しい部門横断型スクラムチーム(IT、ビジネス、UX の各プロフェッショナルを含む)を立ち上げました。

  • 従来の重要な制限を尊重しながら、読み込み時間を効果的に短縮できるか。
  • コンバージョンと収益には実際にどのような影響があるか?

Next.js を選択したのは、自動サーバー側レンダリング(SEO にとって特に重要)、データ プリフェッチ、コード分割など、デフォルトで有効になっている、または簡単に設定できる最適化が多数あるためです。もう一つの重要な考慮事項は、Next.js を使用することで、以前のアプリケーションで問題を発生させることなく、ページを 1 つずつ移行できたことです。それにもかかわらず、まだレガシー システムに依存している複雑な環境で変換を管理する必要があり、サービスが利用できませんでした。この問題を解決するため、Workbox を統合し、バックエンドがダウンしてもウェブサイトは常に使用できるようにしました。また、Workbox は、プレキャッシュ、リクエストのルーティング、ランタイム キャッシュの組み込みソリューションのおかげで、パフォーマンスも向上しました。

結果

新しい PWA は以前のサイトより平均読み込み時間が 30% 短縮され、モバイル デバイスでのコンバージョンは 52%、直帰率は 12%、セッション深度は 18% 向上しました。この経験により、すべての顧客向けソリューション(顧客のセルフケアやセールスマンのフロントエンドを含む)を PWA テクノロジーに移行するという戦略的方向性が確認されました。