Core Web Vitals によるビジネス インパクト
Core Web Vitals の採用について、ステークホルダーをなかなか説得できなかったり、実際にビジネスに役立つかどうか疑問に思ったりしていませんか？この記事では、すでにユーザーやビジネスに好影響が出ている企業の例を紹介し、Core Web Vitals と重要なビジネス指標にどのような相関関係があるのかをわかりやすく説明します。
動画で見たい方は、Google I/O のこちらのトークをご覧ください（日本語字幕付き）。
Core Web Vitals がユーザーやビジネスにとって重要な理由 #
組織では、ステークホルダーによって優先度が異なる場合があります。Core Web Vitals を導入すると、ユーザー中心の指標の最適化と、その結果としてのビジネスの成長に重点を置くことで、全員で共通の認識を持つことができます。
Core Web Vitals のスコアを上げるまでの道のりは、サイトのパフォーマンスが現在どの段階にあるか、デザインがどれだけ複雑かによって、サイトごとに異なります。すぐにたやすく取り組めて有意義な結果につながる場合もあれば、複雑なソリューションを実装して困難な問題を解決しなければならない場合もあります。意思決定者は、費やす時間にかかわらず、これをビジネスの成長のための長期的な投資として扱うべきです。高速でシームレスなナビゲーション体験を提供すれば、ユーザーは喜び、忠実なリピーターになります。プロダクト マネージャーにとって、パフォーマンスは新しいプロダクト機能の質と成功を定義する重要な基準です。また、優れたプロダクトを生み出すことや、やりがいのある課題に取り組むことは、デベロッパーの満足度の向上にもつながります。
ランキング シグナルとしての Core Web Vitals は、パフォーマンスに時間をかけて取り組むもう 1 つの動機となりますが、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% 増加しました。
テクニック #
- 広告ユニットのサイズ変化を減らして、UI で固定サイズの広告スロットをあらかじめ割り当てる
- 広告スクリプト読み込みロジックを最適化してヘッダー入札を優先する、重要でない JS の遅延読み込みをする
重要な教訓 #
フィルレートに影響が出る可能性があるが、広告の視認性が上がるにつれて収益が向上する
Tokopedia #
Tokopedia は、LCP を 55% 改善することで、平均セッション時間が 23% 増加しました。
テクニック #
- LCP 要素をサーバー側でレンダリング（SSR）
- LCP 要素のプリロード
- イメージ最適化（圧縮、WebP、重要でないイメージの遅延読み込み）
重要な教訓 #
- パフォーマンス モニタリング ダッシュボードを構築し、すべてのチームの進捗と影響を監視
- さまざまなレンダリング テクニックの実験（例 : LCP 要素を SSR、スクロールせずに見える範囲を SSR、フル クライアント側 レンダリング）
以上のケーススタディから、ベスト プラクティスを採用してすばやく成果を上げることで、大きな効果が得られることがわかります。この点に関する実例を、さらにいくつか紹介します。
以上の結果は、以下のようなすぐにたやすく行えることを実施した結果です。
| イメージ最適化 | JavaScript 最適化 | 広告と動的コンテンツ |
|---|---|---|
| WebP 画像形式の利用 | サードパーティ JS の遅延読み込み | スクロールせずに見える範囲の広告スペースを予約 |
| イメージ CDN の利用 | レンダリングをブロックする未使用 JS の削除 | 動的コンテンツの高さを設定 |
| 圧縮 | 重要でない JS の遅延読み込み | |
| 重要でないイメージの遅延読み込み | 重要な JS のプリロード | |
| ヒーロー イメージのプリロード | ||
| アスペクト比の指定 |
その他のベスト プラクティスについては、Web Vitals ガイダンスを参照してください。PageSpeed Insights を使うと、ウェブサイトを監査して即座に実用的な推奨事項を確認できます。
ほかにもいくつものグローバル ブランドが Core Web Vitals に投資して、そのメリットを享受しています。
- Tencent Video は、Core Web Vitals の基準を満たすことで、動画の CTR が 70% 向上
- Cdiscount は、3 つの指標すべてを改善し、Black Friday セールでの収益が 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 分の 1 に改善することで、読まれたコミックの数が 2-3 倍に増加
- Yahoo! Japan は、パフォーマンスの低いページの CLS を修正して 98% 削減することで、セッションあたりのページビューが 15% 増加
- AliExpress は、CLS を 10 分の 1 に、LCP を半分に改善することで、直帰率が 15% 減少
対応を始めるには #
ステップ 1: 測定を始める #
最初に、フィールド ツールを使ってサイトを計測しましょう。Google を含むプロバイダが、さまざまなツールを公開しています。
Google 製ツール #
- Search Console
- PageSpeed Insights
- web-vitals JS
- Chrome ユーザー エクスペリエンス レポート
サードパーティ製ツール #
- Cloudflare
- New Relic
- Akamai
- Calibre
- WebPageTest
- Blue Triangle
- Sentry
- SpeedCurve
皆さんにとって最適なツールを選択してください。もう一歩踏み込んで Google アナリティクス 4 を組み込むことで、Core Web Vitals とビジネス指標の相関関係を確認することもできます。
ステップ 2: ステークホルダーを説得する #
- Core Web Vitals を採用してユーザー エクスペリエンスを改善することの重要性と、それが企業のビジネス指標に関連していることを、ステークホルダーに説明する
- 社内で支援者を募り、小規模な実験を始める
- すべてのチームで Core Web Vitals を改善するために、すべてのステークホルダーで共通の目標を定める
ステップ 3: 以下のヒントを活用して実装を成功に導く #
- 優先度 : 有意義な結果につなげるため、トラフィックが高いページやコンバージョンへの影響が大きいページを選択する（広告ランディング ページ、コンバージョン ページ、人気のページなど）
- A/B テスト : レンダリング コストの発生を避けるためにサーバー側でのテストを利用し、最適化したバージョンと最適化していないバージョンの結果を比較する
- 監視 : 継続的なモニタリングをし、リグレッションを防ぐ
最後になりますが、Google では、パフォーマンスは目的ではなく過程であると考えています。そのため、注目すべき最新のケーススタディを紹介できるように、今後もこの記事を更新する予定です。ビジネスですばらしい成功を収め、この記事で取り上げてほしい事例がある方は、コンテンツの提案をお送りください。
Reviewed by Eiji Kitamura - Developer Relations Team
