チームはランディング ページへの 1,000 万件のアクセスからのデータを分析したところ、Largest Contentful Paint とコンバージョン率には強い相関関係があることがわかりました。
Groupe Renault はフランスの多国籍自動車メーカーで、130 か国以上で事業を展開しています。Renault のような自動車グループの場合、ユーザー エンゲージメントとコンバージョンを高める、パフォーマンスの高いブランド サイトはビジネスの拡大を意味します。すべてのブランドサイトは、ローカライズされたサイト向けのコンテンツと機能の柔軟性を維持しながら、優れたユーザー エクスペリエンスを大規模に提供することを目指しています。この状況において、グローバル プラットフォームの開発とメンテナンスを担当するカスタマー エクスペリエンス チームにとって、パフォーマンス モニタリングは重要な役割を担っています。
Core Web Vitals のビジネスへの影響を測定する
Google アナリティクスでの測定
Renault は、グローバル データ パートナーである fifty-five と協力して、web-vitals ライブラリを設定しました。これにより、実際のユーザーからのすべての Web Vitals の指標を、Chrome での測定方法や他の Google ツールへの報告方法に正確に沿った形で Google アナリティクスに送信できるようになりました。
以下の分析は、2020 年 12 月から 2021 年 3 月までの 4 か月間にこれらのツールを使用して取得したデータセットを示しています。
最適化された LCP はユーザー エンゲージメントやビジネス指標と強い相関関係がある
調査チームは、以下の図に示すように、Largest Contentful Paint（LCP）が低いことと、直帰率およびコンバージョン率との間には特に強い相関関係があることを特定しました。
このデータセットは 4 か月間に 33 か国で 1,000 万件以上の訪問を記録しており、LCP の測定値が低いことと以下の相関関係を示しています。
- 直帰率の低下
- コンバージョン数の増加（リードフォームの入力完了）
興味深いことに、このウェブサイトはシングルページ アプリケーション（SPA）として実行されているため、これらの測定はすべてランディング ページでのみキャプチャされます。このデータから、LCP が 1 秒未満になるまでウェブサイトを最適化する価値があることがわかります。グループのブランドサイトも最適化しすぎない！
このデータセットは、LCP とビジネス指標の間の負の相関を示すだけでなく、最もパフォーマンスの高いランディング ページ間のパフォーマンスの差異も明らかにします。このウェブサイトの状況では、LCP が 1 秒未満になると、コンバージョン数が大幅に増加し、直帰を減らすことができます。
fifty-five、コンサルタント Eja Rakotoarimanana 氏
LCP が 1 秒改善すると、直帰率が 14% 低下し、コンバージョン数が 13% 増加する可能性があります。
| LCP が 1 秒向上 | 結果 |
|---|---|
| LCP: 約 1 秒 | CVR 13% 向上 |
| 1.6 秒未満の LCP | 直帰率が 14 ポイント低下 |
| LCP が 1.6 秒超 | 直帰率が 5 ポイント低下 |
Core Web Vitals を大規模に最適化する Renault のアプローチ
2020 年初頭以降、ブランドのヨーロッパ 5 大市場において、ルノー ドメインの 2.5 秒未満の高速 LCP を経験した訪問者の数が平均 22 ポイント向上し（51% から 73% に）なりました。
その取り組みをご紹介します。
SPA の一元的な最適化
プラットフォームの観点から見ると、パフォーマンスは長年にわたって最優先事項であり、主要な指標として Core Web Vitals を含めることはスムーズなプロセスでした。中核チームが包括的なモニタリング ソリューション（Google Lighthouse と Chrome UX Report API を使用）を設定し、組織全体にパフォーマンス文化を確立しました。シングルページ アプリケーションを最適化するには、次のようないくつかの戦略がありました。
- サーバーサイド レンダリング（SSR）により、First Contentful Paint（FCP）を高速化します。
- コード分割: ランディング ページに必要な JS チャンクと CSS チャンクのみを配信する（LCP と FID を改善する）
- 高度なリソース キャッシュを備えた CDN（不要なクエリ パラメータの並べ替えと削除を行うための Lambda@Edge など）。これにより、SSR の欠点（サーバー処理による TTFB の低速化）を回避し、コンテンツを最終ユーザーの近くで配信すること（TTFB と LCP を改善）に役立ちました。
- brotli を使用して圧縮を最適化し、コードサイズを小さくする。
- HTTP2: リクエストとレスポンスの多重化を有効にします。
- WebP サポート、
srcset属性、sizes属性によるレスポンシブ画像を使用して、ユーザーに最適な画像サイズと形式を提供します。 IntersectionObserverと FPO（1 KB の小さなサムネイル）を使用した画像、動画、iframe の遅延読み込み。- ブロッキング スクリプトを削除し、ブラウザ ターゲットへのトランスパイルを調整して、JS ファイルサイズを削減します（不要なポリフィルを回避します）。
- Google タグ マネージャー コンテナのサイズを縮小し、必要な場合にのみサードパーティのスクリプトを読み込むようにします。
- カスタム フォントの数を減らす: woff/woff2 形式と unicode-range を使用、
font-display:swapを使用して、フォント ファイルサイズを縮小し、カスタム フォントが利用できない場合でもできるだけ早くテキストを表示できるようにします。 - ヒーロー画像のプリロード（多くの場合 LCP 要素）。
現在、担当チームが次のような改善に取り組んでおります。
- サーバー プッシュ: CSS をより迅速に配信することで FCP を改善します。（AWS サポートの欠如とサポート終了の提案のためスタンバイ中）。
- 段階的な水分補給で FID を改善。
- ES6 モジュールのサポート: 最新のブラウザ向けの ES6 ビルドを使用することで、より高速なエクスペリエンスを提供できます。
SPA アプローチは、ユーザーがページ間を移動する際にページ全体を再読み込みする必要がないため、パフォーマンスの向上に役立ちます。とはいえ、SPA における現在の Core Web Vitals の測定手法は、ルートの遷移が測定されていないため、マイナス面として受け止められる可能性があります。そのため、UI キャッシュによるセッション内でのページ読み込みが比較的速いことは考慮されません。また、Core Web Vitals は、Multi Page Application の競合他社のウェブサイトと比較することが難しくなります。この場合、ウォーム キャッシュによって、ユーザーがセッション中に閲覧する各ページの測定値が下がります。詳しくは、Web Vitals SPA のよくある質問をご覧ください。
これらは既知の制限事項であり、Chrome プロダクト チームが現在調査中です。SPA での測定を改善するための CLS 指標の更新がすでにリリースされています。
さまざまな技術チームがパフォーマンスに影響を与える可能性があるため、パフォーマンスを継続的にモニタリングする必要があります。SPA での測定方法には制限がありますが、Core Web Vitals を使用すると、チームが取る措置の影響を追跡できます。ルートの移行は、近日中に考慮される予定です。
Renault、テクニカル リーダー Cedric Bazureau 氏
パフォーマンスの最適化を共同責任として促進するローカル ガイドライン
パフォーマンスは、グローバル（中央）の責任とローカルの責任の両方として伝達される。各地域のコンテンツ所有者が守るべきベスト プラクティスをまとめています。ガイドラインの例をいくつか示します。
- ローカルの Google タグ マネージャー コンテナを最適化して、サイトのパフォーマンスを向上させる（特定のタグを条件付きでトリガーするなど）。
- 動画コンテンツのサイズを制限するには、内部ツールを使用してコンテンツを圧縮するか、外部プラットフォーム（YouTube など）でホストします。
- Google タグ マネージャーを使用して写真をアップロードすることは避けてください。
デジタル パフォーマンスに関する深い理解は、当社のブランドサイトを継続的に最適化するうえで重要です。FireEye のカスタマー・エクスペリエンス・チームのアプローチは、現地のチームのビジネス成果にプラスの影響を与えるグローバルなプラットフォームを提供し、優れたパフォーマンスを維持するためのガイドラインとベスト・プラクティスを提供することです。
ルノー、パフォーマンス責任者 Alexandre Perruche 氏
まとめると、ウェブサイトのパフォーマンスは、ルノーにとって常に最優先事項であり、ウェブサイトのプラットフォームは継続的に最適化されています。Core Web Vitals をビジネス指標と並べて測定することで、このトピックをグローバルに共有する責任として推進することができ、地域のガイドラインによって、チームはこの有益な取り組みに参加できるようになります。