Speculation Rules API を使用した事前レンダリングによって、Ray-Ban がコンバージョン率を 2 倍にし、離脱率を 13% 削減した方法

Daniele Merola
Daniele Merola
LinkedIn
Giorgio Pellegrino
Giorgio Pellegrino
LinkedIn
Hadyan Andika
Hadyan Andika
LinkedIn

公開日: 2025 年 1 月 28 日

このケーススタディでは、Ray-Ban が Speculation Rules API を使用してプリレンダリングを活用し、ユーザーの今後のナビゲーションを高速化することで LCP 指標を改善し、Ray-Ban の e コマース プラットフォームのビジネス パフォーマンスを改善した方法について説明します。この成功を踏まえ、Ray Ban は、ページを bfcache の対象にすることなど、同様にパフォーマンスを改善できる他の方法を検討しました。

レイバンは、クラシックなデザインとモダンなトレンドを融合させた、アビエーターやウェイファーラーなどの時代を超えたスタイルで知られる、アイウェアの象徴的なブランドです。眼鏡業界の著名なリーダーの 1 社である Ray-Ban の e コマース チャネルは、年間 8,000 万人以上のユニーク ビジターを誘致し、同社の競争力を維持するうえで重要な役割を果たしています。

レイバンは、主要なビジネス チャネルとして e コマース プラットフォームのユーザー エクスペリエンスを継続的に改善しており、ウェブに関する主な指標の重要性と、プラットフォームのユーザー エクスペリエンスへの直接的な影響を認識しています。

クリティカル ユーザー ジャーニーの改善に向けた Ray-Ban の継続的なアプローチ

Ray-Ban の e コマース プラットフォームで使用されている MPA（マルチページ アプリケーション）アーキテクチャの性質上、ユーザーが新しいページを必要とするリンクやボタンを操作するたびに、ブラウザはサーバーへのナビゲーション リクエストを送信し、サーバーは新しい HTML ページを返します。そのため、Ray-Ban は、特に商品詳細ページ（PDP）でユーザーがスムーズにブラウジングできるようにすることが課題でした。PDP は、最もよく使用されるエントリ ポイントの 1 つであり、コンバージョン ファネルの重要な部分です。

Ray-Ban は最近完了したデザイン変更により、Core Web Vitals の指標を改善しました。ただし、改善の余地は残っています。特に、インタラクティブなユーザー エクスペリエンスを提供するために外部ライブラリを大量に使用している場合、他のページと比較してLargest Contentful Page（LCP）指標が増加します。

そのため、Ray-Ban は、サイト上の重要なユーザー ジャーニーを改善するために、推測読み込みを実装することにしました。投機ルールを使用すると、ユーザーが次にアクセスするページのコンテンツをプリロードしてプリレンダリングするため、今後のナビゲーションのページ読み込み速度を低減する最も効果的なソリューションの 1 つになります。

Ray-Ban のデバイス固有のプリレンダリング戦略

Ray-Ban は、パソコンとモバイル デバイスの動作とリソースの違いを考慮して、2 つの異なるプリレンダリング戦略を採用しました。これらの戦略は、ウェブサイトの既存の機能やユーザー エクスペリエンスを損なうことなくパフォーマンスを最大化するように設計されています。

パソコンでは、商品リスティング ページ（PLP）の商品タイルにカーソルを合わせ、"moderate" の早期レンダリング設定を使用して、同じタイルの識別クラスをセレクタとして渡すことで、プリレンダリングが実行されます。

let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');

scriptPrerender.innerHTML = `{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "selector_matches": "a.rb-plp-product-tile__container"
          }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}`;

document.head.appendChild(scriptPrerender);

モバイル デバイスでは hover イベントを効果的に使用できないため、最もクリックされた最初の 4 つのタイルに immediate の早期読み込み設定を使用して、プリレンダリングが実行されます。

let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');

scriptPrerender.innerHTML = `{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "selector_matches": "a.rb-plp-product-tile__container:nth-child(-n+5)"
          }
        ]
      },
      "eagerness": "immediate"
    }
  ]
}`;

document.head.appendChild(scriptPrerender);

プリレンダリングの結果

2 つのプリレンダリング戦略は、Ray-Ban の PDP ページの Core Web Vitals 指標とビジネス KPI の傾向に大きな影響を与えました。

デバイス LCP コンバージョン率の変化 離脱率の変化 プリレンダリング レート
変更前 変更後 変更
モバイル 4.69 秒 2.66 秒 43.28% +101.47% -13.25% 29%
パソコン 3.03 秒 1.74 秒 42.57% +156.16% -13.18% 50%
ソース: Aviator PDP ページの CrUX URL レベルのデータ。

サーバーから配信された商品ページを閲覧したユーザーのビジネス指標と、事前レンダリングされた商品ページを閲覧したユーザーのビジネス指標を比較しました。Ray-Ban は、API をサポートするブラウザ（Chrome など）を使用しているユーザーについて、Adobe トラッキング ワークスペースからデータを収集した結果、サイトの操作がスムーズになったことを示す大幅な改善が明らかになりました。プリレンダリングがサポートされていない他のブラウザについては、Ray-Ban は、パソコンでは hover イベントの時点で、モバイル デバイスでは PLP の最初の 4 つのタイルに対してリソースをプリフェッチすることにしました。

事前レンダリング用の Speculation Rules API の実装は、Ray-Ban の e コマース プラットフォームにとって画期的な変化をもたらしました。こうした革新的な戦略により、Ray-Ban はパソコンとモバイルの両方で LCP を 43% 改善し、ユーザー エクスペリエンスを大幅に向上させました。

この最適化により、ページの読み込みがほぼ瞬時に行われるようになっただけでなく、特に PDP などの重要なページで、現在の MPA アーキテクチャを維持しながら SPA スタイルのアーキテクチャの多くのメリットを享受できるようになりました。

ビジネスの観点から見ると、A/B テストで確認されたように、この改善は画期的なものでした。

  • コンバージョン率の向上:
    • PDP でのモバイル コンバージョン率は101.47% と大幅に増加しました。
    • パソコンでのコンバージョン率は、さらに驚異的な 156.16% の増加を記録しました。
  • ユーザー エンゲージメントの向上:
    • セッションあたりの平均ページビュー数は、モバイルで 51.95%、パソコンで 65.30% 増加しました。これは、よりスムーズなナビゲーションとユーザーの継続的な関心の高まりを示しています。注: 有効にされていないプリレンダリングされたページは「閲覧済み」と見なされませんでした。
  • 離脱率の低下:
    • 離脱率（ページのページビュー数に対する、そのページから離脱したユーザーの割合）は、モバイルで 13.25%、パソコンで 13.18% 減少し、重要なショッピングのタイミングでの維持率が向上しました。

ユーザーの即時ナビゲーションをさらに提供できるよう拡大

PDP のプリレンダリングで得られた優れた結果を踏まえ、Ray-Ban はメニュー内の PLP リンクもプリレンダリングすることで、Speculation Rules API の可能性をさらに最大化することにしました。このアプローチにより、カタログ ページと商品ページの両方の読み込み速度（および LCP）を大幅に改善できます。

プリレンダリングは将来のナビゲーションに役立ちますが、Ray-Ban では PLP と PDP の間を頻繁に行き来するユーザーも多く見られます。プリレンダリング テストの結果から、ユーザー ナビゲーションの最適化がビジネス指標の向上に直接つながることが明らかになったため、レイバンはバックフォワード キャッシュ（bfcache）も検討しました。

bfcache は、ブラウザ履歴内の対象ページのスナップショットをメモリに保持し、ネットワークを経由せずに復元することで、前のページと次のページにすぐに移動できるようにブラウザを最適化する機能です。Ray-Ban の PDP と PLP が bfcache の対象となるように、いくつかの簡単な更新を行いました。

  • unload イベントを無効にし、Permissions-Policy ヘッダー値 unload=(), bluetooth=(), andaccelerometer=() を使用して、デバイスの Bluetooth API と 加速度計 API へのアクセスを制限します。
  • pagehide イベントで RTC 接続と IndexedDB 接続を閉じます。
  • Cache-Control: no-store レスポンス ヘッダーを不必要に使用しないでください。

バック/フォワード ナビゲーションがトラフィックの最大 40% を占め、bfcache ヒット率が 0 だった PLP で bfcache のサポートを有効にすると、LCP がほぼ 30%、CLS が 83% 改善されました。

指標 2024-10-13 > 2024-11-9 2024-11-24 > 2024-12-21 Delta
LCP 3725 ミリ秒 2674 ミリ秒 -28.21%
INP 521 ミリ秒 395 ミリ秒 -24.18%
CLS 0.46 0.08 -82.61%
バックフォワード キャッシュのヒット率 0.02% 72.90% +72.87pp
ソース: 女性用サングラス ページの CrUX URL レベルのデータ。

まとめ

これらの結果は、プリレンダリングによって e コマース サイトのパフォーマンスを大幅に改善できる可能性を示しています。レイバンは、ユーザーの行動に基づいてページをプリレンダリングすることで、ウェブに関する主な指標を改善しただけでなく、ユーザー エンゲージメントの向上と売り上げの増加も実現しました。このメリットにより、Ray-Ban は、今後のナビゲーションだけでなく、bfcache によって提供される前後ナビゲーションでもスムーズなナビゲーションを提供するための取り組みを強化しています。

このケーススタディでは、最新のウェブ パフォーマンス手法を使用して技術指標とビジネスの KPI のギャップを埋め、ユーザー エクスペリエンスと e コマースの成功の新しいベンチマークを設定する方法について説明します。

この作業に協力してくれた Lorenzo Bartomioli、Gilberto Cocchi、Alejandro Baeza Redondo、Barry Pollard、Jeremy Wagner の各氏に感謝します。