楽天 24 はまた、実際のユーザーのウェブに関する指標を測定することで、優れた Largest Contentful Paint（LCP）によってコンバージョン率が 61.13% 向上することを確認しました。
楽天 24 は、多国籍および国内の大手消費財メーカーと連携し、ヘルスケア、飲料、ペット用品、ベビー用品などの日用品を幅広く取り扱うオンライン ショップです。このストアは、インターネット サービスの世界的リーダーである楽天グループ株式会社が提供するもので、日本のデジタル マーケットプレイス プラットフォームにおいてトップクラスのパフォーマーです。
楽天 24 では、ウェブ パフォーマンスがユーザー エクスペリエンスに及ぼす影響を理解したうえで、ウェブに関する主な指標などの指標を継続的に測定、最適化、モニタリングしています。
その結果、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% 向上する可能性があります。
楽天 24 では、ウェブに関する主な指標とビジネス指標の相関分析をさらに進めるため、ウェブに関する主な指標と関連指標の最適化に重点を置いた A/B テストも実施したところ、以下の点が改善されました。
- ユーザーあたりの収益が 53.37%。
- コンバージョン率が 33.13% 向上しました。
- 平均注文額が 15.20% に達しています。
- 平均滞在時間は 9.99% です。
- 離脱率が 35.12% 低下。
ビジネス チャンスを強調する
楽天 24 チームは、ウェブ パフォーマンスの最適化は、ユーザー エクスペリエンスとビジネスの成長のための賢明な投資ですが、ステークホルダーに Core Web Vitals を導入してウェブ パフォーマンスを重視するよう説得することはどれほど困難であるかを理解しています。同社は、パフォーマンスの最適化でどのような費用対効果（ROI）を実現できるのかを関係者に正確に示すことが、関係者に働きかける最善の方法であると考えています。
比較的新しく独立したサービスである楽天 24 は、柔軟性の利点を活かしてこの課題に取り組みました。彼らは、このケーススタディの結果が、将来的によりデータ指向の意思決定を行うのに役立つだけでなく、他の開発者が自分の仕事の影響を測定し、パフォーマンスの向上は投資する価値があると関係者を説得するのに役立つと考えています。この投稿でその方法をご覧ください。
JavaScript とリソースを最適化する
- レンダリング ブロック リソースを排除する。
- コードを分割し、動的な
import()を使用する。 - すべてのコンテンツを別々の部分に分割し、スクロールしなければ見えない範囲の HTML ファイルを遅延読み込みします。
- JavaScript をオンデマンドで実行して読み込みます。
<script>タグに async 属性を使用し、重要なオリジン（dns-prefetch、preconnect、preloadなどのリソースヒント）への早期の接続を確立することで、遅い JavaScript リソースを特定し、読み込みプロセスを最適化します。- 未使用のコードを削除し、コードを圧縮して圧縮する。
- CDN を使用する。
- Workbox で Service Worker を使用してキャッシュを制御する
画像を最適化する
- スクロールしなければ見えない範囲の画像の遅延読み込み。
- CDN を使用して画像を最適化し、適切なサイズの画像を配信します。また、画像を圧縮して、ジョブに適した画像形式（WebP、SVG、ウェブフォント）を採用します。
CLS を最適化する
- CSS
aspect-ratioを使用して、画像の読み込み中に画像に必要なスペースを確保します。 - CSS
min-heightを使用すると、要素の遅延読み込み時のレイアウト シフトを最小限に抑えることができます。
パフォーマンスの測定
同社のチームは、PageSpeed Insights を使ってウェブサイトを監査する以外に、ユーザーが実際に体験している状況をより的確に把握する方法を模索していました。そこで楽天 24 は、web-vitals JavaScript ライブラリを使用して、ウェブに関する主な指標などの現場の指標を測定し、そのデータを社内分析ツールに送信することにしました。
パフォーマンス分析
チームは収集したフィールド データを分析し、ウェブに関する主な指標と主要なビジネス指標との間に相関関係があるかどうかを判断しました。その結果、コンバージョンに至ったユーザーの LCP は、至らなかったユーザーよりも高い傾向にあることがわかりました。
収集されたデータから、以下のことも明らかになりました。
- LCP が優れていると、コンバージョン率が最大 61.13%、訪問者あたりの収益が 26.09%、平均注文額が 11.26% 向上する可能性があります。
- FID が優れていると、全体の平均データと比較して、コンバージョン率が最大 55.88% 向上する可能性があります。
パフォーマンス モニタリング
チームは現場で収集したデータとビジネス インテリジェンス ツールを使用して、パフォーマンス モニタリング ダッシュボードを構築しました。これは、進捗状況の監視とリグレッションの防止に重要です。
A/B テスト
パフォーマンスの最適化がビジネスに与える影響を測定するには A/B テストが良いと考え、Core Web Vitals のランディング ページの 1 つを最適化し、1 か月間 A/B テストを実施して、最適化されたバージョンと元のページを比較しました。テストで有意な結果を得るために、トラフィックとコンバージョンが多いランディング ページを選択しました。テスト期間中、トラフィックの 50% が最適化されたランディング ページ（バージョン A）に、残りの 50% が元のページ（バージョン B）に送られました。バージョン 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 と最適化されていないバージョン B を比較したところ、次のようなメリットがあることがわかりました。
- 訪問者あたりの収益が 53.37% 向上。
- コンバージョン率が 33.13% 向上。
- 平均注文額が 15.20% 増加。
- 平均滞在時間が 9.99% 増加。
- 離脱率が 35.12% 低下。
おわりに
ウェブのパフォーマンスの最適化は簡単ではありませんが、やりがいがあります。楽天 24 はデータドリブンなアプローチにより、ユーザー エクスペリエンスの向上に成功し、ビジネスへのプラスの影響を測定しました。これはカスタマー ジャーニーの一部であって目的地ではないことを理解したうえで、オンライン ショッピング ユーザーにさらに快適なエクスペリエンスを提供できるよう、ウェブサイトの改善を続けていく予定です。
最適化には共同の取り組みが必要であり、開発者がこの取り組みに単独で携わる必要はありません。楽天 24 は、こうした課題や成果を共有することで、より多くのデベロッパーが Core Web Vitals のデータを活用して関係者と相互に理解し、質の高いユーザー エクスペリエンスとビジネスの成長に向けて連携して取り組めるようにしたいと考えています。