この記事では、ユーザーとビジネスにすでに好影響をもたらしている企業の例を紹介し、Core Web Vitals が主要なビジネス指標とどのように関連しているかを説明します。
Core Web Vitals の導入を関係者に説得するのが難しいですか？それとも、実際にビジネスに役立つのか疑問に思っていますか？この記事では、ユーザーとビジネスにすでにプラスの影響をもたらしている企業の例を紹介し、Core Web Vitals が主要なビジネス指標とどのように関連しているかを説明します。
動画をご希望の場合は、Google I/O でのこの講演をご覧ください。
ウェブに関する主な指標がユーザーとビジネスにとって重要な理由
組織内のステークホルダーによって優先順位が異なる場合があります。ウェブに関する主な指標は、ユーザー重視の指標の最適化とその結果としてのビジネスの成長に焦点を当てることで、すべての関係者を同じページにまとめることができます。
Core Web Vitals の改善に向けた取り組みは、パフォーマンス改善の段階やサイトのデザインの複雑さによって、サイトごとに異なります。取り組みには、簡単な改善で有意な結果を得ることから、複雑な問題を解決する複雑なソリューションの実装まで、さまざまなものがあります。費やす時間にかかわらず、意思決定者はこれをビジネスの成長に向けた長期的な投資と見なす必要があります。高速でシームレスなナビゲーション エクスペリエンスを提供することで、ユーザーの満足度を高め、リピーターになってもらうことができます。プロダクト マネージャーにとって、パフォーマンスは新しいプロダクト機能の品質と成功を定義する重要な基準である必要があります。優れたプロダクトと興味深い課題に取り組むことで、デベロッパーの満足度も向上します。
ランキング シグナルとしての Core Web Vitals は、パフォーマンスに時間を費やす動機付けとなりますが、Core Web Vitals を導入することで、ランキング以外の短期的および長期的なメリットも数多く得られます。ユーザー エクスペリエンスに重点を置いて Core Web Vitals を導入した（ランキングに影響する前）グローバル ブランドとローカル ブランドのケーススタディをいくつか見てみましょう。
事例紹介
Vodafone
Vodafone（イタリア）は LCP を31%改善し、売上を 8% 増加させました。
手法
- 重要な HTML をサーバーサイドでレンダリングします。
- レンダリングをブロックする JavaScript を減らす。
- 画像の最適化手法。
- ヒーロー画像のサイズを変更し、重要でないリソースを遅らせる。
主なポイント
- 有意な影響を測定する最善の方法は A/B テストです。
- A/B はサーバーサイドのものである必要があります。
iCook
iCook は CLS を 15% 改善し、広告収入を 10% 増やしました。
手法
- 広告ユニットのサイズのばらつきが小さく、管理画面で事前に割り当てられた固定サイズの広告スロット。
- 広告スクリプトの読み込みロジックを最適化し、ヘッダー入札を優先し、クリティカルでない JS を遅らせるようにしました。
主なポイント
広告の視認性が向上することで、収益は最終的に増加しますが、インプレッション率は影響を受ける可能性があります。
Tokopedia
Tokopedia では、LCP が 55% 改善され、平均セッション時間が 23% 向上しました。
手法
- サーバーサイド レンダリング（SSR）LCP 要素。
- LCP 要素をプリロードします。
- 画像の最適化（圧縮、WebP、重要でない画像の遅延読み込み）。
主なポイント
- パフォーマンス モニタリング ダッシュボードを構築して、チーム全体の進捗状況と影響をモニタリングしました。
- さまざまなレンダリング手法（SSR LCP 要素、上部コンテンツの SSR、完全なクライアントサイド レンダリングなど）をテストしました。
Redbus
コアウェブ バイタルの修正により、モバイル コンバージョン率（mCVR）が 80 ～ 100% 向上し、Redbus のグローバル市場プロパティ全体でドメインのランキングが大幅に上昇しました。
手法
- ページ コンポーネントのスロットを修正し、最適化されていないタグ挿入スクリプトを削除することで、CLS が改善されました。
- サードパーティ スクリプトを最適化し、単一責任の原則に基づいてマイクロサービスを構築することで、TTI と TBT が大幅に短縮されました。
主なポイント
- CLS を 1.65 から 0 に減らすことで、ドメインのランキングが全世界で大幅に向上しました。
- TTI を 8 秒前後から 4 秒前後に、TBT を 1,200 ミリ秒前後から 700 ミリ秒前後に短縮したことで、世界中のプロパティで mCVR が 80 ～ 100% 増加しました。
- RUM ツールの使用により、下位市場の実際のパフォーマンス指標を把握できました。
- パフォーマンスの低下を回避するには、パフォーマンス重視の文化を導入することが非常に重要です。また、コードの最適化、リリースの迅速化、本番環境の問題の減少により、チームの生産性も向上します。
上記の事例は、ベスト プラクティスを導入し、すぐに成果を上げることで、多くのことを達成できることを示しています。以下に、この点に関する実際の例をいくつか示します。
上記の結果は、次のような簡単に実行できる対策を講じることで達成されました。
| 画像の最適化 | JavaScript の最適化 | 広告と動的コンテンツ |
|---|---|---|
| WebP 画像形式を使用する | サードパーティの JS の遅延読み込み | スクロールせずに見える範囲の広告スペースの確保 |
| 画像 CDN の使用 | レンダリングを妨げる JS と未使用の JS の削除 | 動的コンテンツの高さの設定 |
| 圧縮 | クリティカルでない JS の遅延読み込み | |
| 重要でない画像の遅延読み込み | クリティカルな JS のプリロード | |
| ヒーロー画像のプリロード | ||
| アスペクト比を指定する |
その他のベスト プラクティスについては、ウェブ バイタルに関するガイダンスをご覧ください。PageSpeed Insights を使用してウェブサイトを監査し、すぐに実用的な推奨事項を入手しましょう。
ウェブに関する主な指標への投資が功を奏したグローバル ブランドは他にも多数あります。
- Tencent Video は、Core Web Vitals に合格したことで、動画のクリック率が 70% 向上しました。
- Cdiscount は 3 つの指標すべてを改善し、ブラック フライデー セールで収益を 6% 増加させました。
- Wix では、Core Web Vitals を満たすモバイル オリジンが前年比で 250% 以上増加しました。
- Nykaa では、LCP を 40% 改善したことで、T2/T3 都市からのオーガニック トラフィックが 28% 増加しました。
- NIKKEI STYLE では LCP が 18% 改善され、セッションあたりのページビュー数が 9% 増加しました。
- NDTV は、LCP を半分に減らし、他のプロダクトを変更した後、離脱率が 50% 改善しました。
- Agrofy Market の LCP が 70% 改善したことで、読み込みを諦めるユーザーが 76% 減少しました。
- Flipkart は、Core Web Vitals 指標を改善することで、直帰率を 2.6% 低減しました。
- Ameba Manga は CLS スコアを 10 倍に改善し、漫画の閲覧回数を 2 ～ 3 倍に増やしました。
- Yahoo! 日本では CLS を修正し、問題のあるページを 98% 削減し、セッションあたりのページビュー数を 15% 増加させました。
- AliExpress では、CLS が 10 倍、LCP が 2 倍に改善され、直帰率が 15% 低下しました。
- GEDI では、CLS が 77% 低下し、直帰率が 8% 低下しました。
すぐに始めるにはどうすればよいですか？
ステップ 1: 測定を開始する
まず、Real User Monitoring（RUM）ツールを使用して、サイトのフィールドデータを測定します。Google とサードパーティ（3P）のさまざまな RUM ツールがすでに利用可能です。
Google RUM ツール
- Search Console
- PageSpeed Insights
- web-vitals JavaScript ライブラリ
- Chrome ユーザー エクスペリエンス レポート（CrUX）
サードパーティの RUM ツール
- Cloudflare
- New Relic
- Akamai
- Calibre
- 青い三角形
- Sentry
- SpeedCurve
- Raygun
最適なツールを選択してください。さらに一歩進んで Google アナリティクス 4 と統合すると、Core Web Vitals とビジネス指標を関連付けることができます。
ステップ 2: ステークホルダーを説得する
- ユーザー エクスペリエンスの向上と、企業のビジネス指標との関連性向上のために Core Web Vitals を導入することの重要性を関係者に説明します。
- 社内でスポンサーを獲得して、小規模なテストを開始します。
- 関係者間で共有目標を設定し、チーム全体で Core Web Vitals を改善します。
ステップ 3: 以下のヒントを参考にして実装を成功させる
- 優先順位をつける: 有意な結果を得るために、トラフィックやコンバージョンの重要度が高いページ（広告のランディング ページ、コンバージョン ページ、人気ページなど）を選択します。
- A/B テスト: サーバーサイド テストを使用して、レンダリング費用を回避します。最適化されたバージョンと最適化されていないバージョンの結果を比較します。
- モニタリング: 継続的なモニタリングを使用して、リグレッションを防ぎます。
最後に、パフォーマンスは目的ではなくプロセスであると考えています。なお、この記事は最新のケーススタディのハイライトを反映して更新していく予定です。ビジネスで大きな成果を上げ、この記事に掲載されたい場合は、コンテンツの提案を送信してください。