楽天 24 がウェブに関する主な指標に投資したことで、訪問者あたりの収益が 53.37%、コンバージョン率が 33.13% 増加した理由

また、Rakuten 24 は実際のユーザーの Core Web Vitals を測定することで、Largest Contentful Paint(LCP)が良好な場合、コンバージョン率が 61.13% 上昇する可能性があることも確認しました。

Hayoung Lee
Hayoung Lee
Linh Duong
Linh Duong
Ryunosuke Akiba
Ryunosuke Akiba
Shogo Kashiwase
Shogo Kashiwase

楽天 24 は、大手多国籍消費財メーカーと国内消費財メーカーの両方と連携して、ヘルスケア、飲料、ペット用品、ベビー用品など、さまざまな日用品を提供するオンライン ストアです。このストアは、インターネット サービスのグローバル リーダーである楽天グループ株式会社が提供しており、日本のデジタル マーケットプレイス プラットフォームでトップクラスのパフォーマンスを誇っています。

ウェブ パフォーマンスがユーザー エクスペリエンスに与える影響を理解している楽天 24 チームは、Core Web Vitals などの指標を継続的に測定、最適化、モニタリングしてきました。

その結果、75% を超えるユーザーで、Largest Contentful Paint(LCP)、First Input Delay(FID)、First Contentful Paint(FCP)のパフォーマンスが良好です。ただし、Cumulative Layout Shift(CLS)の改善には引き続き取り組んでいます。

楽天 24 はホームページのデータを分析した結果、LCP スコアが高いと次のような効果が得られることがわかりました。

  • コンバージョン率が最大 61.13% 上昇。
  • 訪問者あたりの収益が 26.09% 増加しました。
  • 11.26% 上昇
  • FID スコアが高いと、コンバージョン率が最大 55.88% 向上する可能性があります。

Core Web Vitals とビジネス指標の関連性をさらに高めるために、楽天 24 は Core Web Vitals と関連指標の最適化に重点を置いた A/B テストも実施し、次のような改善が見られました。

  • 訪問者あたりの収益が 53.37% 増加しました。
  • 33.13% コンバージョン率
  • 15.20% 上昇
  • 9.99% の平均滞在時間の増加。
  • 離脱率が 35.12% 減少。

商談の機会を強調する

ウェブ パフォーマンスを最適化することは、ユーザー エクスペリエンスの向上とビジネスの成長につながる賢い投資ですが、Rakuten 24 チームは、ステークホルダーにウェブに関する主な指標を導入してウェブ パフォーマンスに注力するよう説得するのが難しいことを理解しています。パフォーマンスの最適化によって得られる費用対効果(ROI)をステークホルダーに正確に示すことが、ステークホルダーの協力を得る最善の方法であると考えています。

比較的新しい独立したサービスである楽天 24 は、柔軟性を活かしてこの課題に取り組みました。彼らは、このケーススタディの結果が、今後よりデータ指向の意思決定を行ううえで役立つと考えています。また、他のデベロッパーが自分の仕事の影響を測定し、パフォーマンスの向上が投資に見合う価値があることをステークホルダーに納得させるうえでも役立つと考えています。詳しくは、こちらの投稿をご覧ください。

楽天 24 のホームページのスクリーンショットの例。各スクリーンショットの周囲にモバイル デバイスのフレームが表示されています。
楽天 24 のホームページのスクリーンショットの例。

JavaScript とリソースを最適化する

  • レンダリングを妨げるリソースを除外する。
  • コードを分割し、動的 import() を使用します。
  • すべてのコンテンツを個別の部分に分割し、スクロールして表示される HTML ファイルを遅延読み込みします。
  • JavaScript をオンデマンドで実行して読み込む。
  • <script> タグに async 属性を使用し、重要なオリジン(dns-prefetchpreconnectpreload などのリソースヒント)に早期に接続することで、遅い JavaScript リソースを特定し、読み込みプロセスを最適化します。
  • 未使用のコードを削除し、コードを圧縮します。
  • CDN を使用する
  • Workbox を使用して Service Worker によるキャッシュ処理を制御する

画像を最適化する

CLS を最適化する

  • CSS aspect-ratio を使用して、画像の読み込み中に画像に必要なスペースを予約します。
  • CSS min-height を使用して、要素が遅延読み込みされている間のレイアウトのずれを最小限に抑えます。

パフォーマンスの測定

チームは、PageSpeed Insights を使用してウェブサイトを監査するだけでなく、ユーザーが実際に現場でどのようなエクスペリエンスを体験しているかを把握するためのより良い方法を見つけたいと考えていました。そのため、楽天 24 は、web-vitals JavaScript ライブラリを使用して、現場で Core Web Vitals などの指標を測定し、データを社内分析ツールに送信することにしました。

Rakuten 24 のウェブ バイタル トラッキング統合フロー。最初のステップは、Rakuten 24 ウェブサイトにスクリプトを追加して、ウェブバイタル ライブラリを統合することです。その後、実際のユーザー指標からウェブバイタルを測定でき、そのデータは楽天 24 の社内データ収集ツールに送信されます。

パフォーマンス分析

チームは、収集したフィールドデータを分析して、ウェブに関する主な指標と主要なビジネス指標の間に相関関係があるかどうかを判断しました。コンバージョンに至ったユーザーは、コンバージョンに至らなかったユーザーよりも LCP が短い傾向があることがわかりました。

コンバージョンに至ったユーザーとコンバージョンに至らなかったユーザーを LCP 別に比較したものです。コンバージョンに至った頻度が高いユーザー グループでは、LCP が低下しています。

収集されたデータから、次のことがわかりました。

  • 優れた LCP は、コンバージョン率を最大 61.13%、訪問者あたりの収益を 26.09%、平均注文額を 11.26% 増加させる可能性があります。
  • FID が良好な場合、全体的な平均データと比較してコンバージョン率が最大 55.88% 上昇する可能性があります。
コンバージョン率と LCP 時間でバケット化された LCP。コンバージョンを頻繁に達成したユーザーは、LCP が低いときにコンバージョンを達成しており、LCP が 1 秒以下のユーザーの 61.13% がコンバージョンを達成しています。
LCP がコンバージョン率に及ぼす影響。
訪問者あたりの収益と LCP 時間でバケット化された LCP。LCP が短いユーザーは収益が高く、LCP が 1 秒以下のユーザーはユーザーあたり 26.09% の収益増加が見られました。
LCP が訪問者あたりの収益に与える影響。
平均注文額と LCP 時間でバケット化された LCP。LCP が 1 秒以下のユーザーの平均注文額は、LCP が 1 秒以下のユーザーと比較して 11.26% 高くなっています。
LCP が平均注文額に与える影響。
コンバージョン率と FID 時間でバケット化された FID。コンバージョンを頻繁に達成したユーザーは、FID が低いときにコンバージョンを達成しており、55.88% のユーザーが FID が 50 ミリ秒以下のときにコンバージョンを達成しています。
FID がコンバージョン率に及ぼす影響。

パフォーマンス モニタリング

チームは、現場で収集されたデータとビジネス インテリジェンス ツールを使用して、パフォーマンス モニタリング ダッシュボードを構築しました。これは、進行状況のモニタリングとリグレッションの防止に重要です。

ウェブに関する主な指標(LCP、CLS、FID)ごとの楽天 24 の社内パフォーマンス モニタリング ダッシュボードのスクリーンショット。
パフォーマンス モニタリング ダッシュボード。

A/B テスト

パフォーマンスの最適化によるビジネスへの影響を測定するのに A/B テストが有効と考えたチームは、ランディング ページの 1 つを Core Web Vitals 向けに最適化し、最適化後のバージョンと元のページを 1 か月間 A/B テストで比較しました。テストで有意な結果が得られるように、トラフィックとコンバージョンが十分にあるランディング ページを選択しました。テスト期間中、トラフィックの 50% は最適化されたランディング ページ(バージョン A)に、50% は元のページ(バージョン B)に送信されました。バージョン A とバージョン B の唯一の違いは、バージョン A が Core Web Vitals 向けに最適化されていることであり、機能や視覚的な違いはありませんでした。

楽天 24 ウェブサイトのモバイル A/B テストのスクリーンショット。各バージョンは視覚的にも機能的にも同じで、バージョン A は Core Web Vitals の改善に向けて最適化されています。

最適化されたバージョン A は、モバイル ロードテストで 0.4 秒早く読み込みが完了し、レイアウトの大幅なずれは見られません。実際、バージョン A の CLS はバージョン B と比較して 92.72% 向上しました。その他のウェブに関する主な指標のスコアも改善されました。FID は 7.95%改善FCP は 8.45%改善TTFB は 18.03%改善しました。

楽天 24 ホームページの起動時間の比較。バージョン A は読み込みが最適化されており、2 秒以内に読み込まれるバージョン B と比較して、1.6 秒以内に読み込まれます。
バージョン A とバージョン B のモバイル ロードテストの結果。

最適化済みバージョン A と最適化されていないバージョン B を比較したところ、Rakuten 24 はバージョン A が次のような効果をもたらすことを発見しました。

  • 訪問者あたりの収益が 53.37% 増加。
  • コンバージョン率が 33.13% 上昇しました。
  • 平均注文額が 15.20% 増加。
  • 平均滞在時間が 9.99% 増加。
  • 離脱率が 35.12% 減少。
Rakuten 24 ホームページの Core Web Vitals の改善のスクリーンショット。具体的には、訪問者あたりの収益が 53.37% 増加し、コンバージョン率が 33.13% 増加、平均注文額が 15.2% 増加、ページでの平均滞在時間が 9.99% 増加、離脱率が 35.12% 減少しました。

まとめ

ウェブ パフォーマンスの最適化は困難ですが、やりがいがあります。データドリブンなアプローチを採用することで、楽天 24 はユーザー エクスペリエンスの向上を実現し、ビジネスへのプラスの影響を測定しました。これがゴールではなく、ジャーニーの一部であることを理解し、オンライン ショッピングの利便性を高めるためにウェブサイトの改善を継続しています。

最適化には共同作業が必要です。デベロッパーがこの取り組みを単独で行う必要はありません。楽天 24 は、苦労と成果を共有することで、より多くのデベロッパーがウェブに関する主な指標のデータを使用してステークホルダーとの相互理解を深め、質の高いユーザー エクスペリエンスとビジネスの成長に向けて協力することを願っています。