Core Web Vitalsとは

Core Web Vitals（コアウェブバイタルズ）は、Googleが定義するWebページのユーザー体験を測る3つの指標です。Googleは2021年からこの指標を検索ランキングの評価要素として使用しています。

指3つの指標と「良好」の基準値

指標 何を測るか 良好の基準
LCP
Largest Contentful Paint		 ページの読み込み速度。メインコンテンツが表示されるまでの時間 2.5秒以下
INP
Interaction to Next Paint		 ページの応答性。ユーザー操作に対する反応速度 200ミリ秒以下
CLS
Cumulative Layout Shift		 ページの視覚的安定性。表示中にレイアウトがどれだけズレるか 0.1以下

出典: web.dev — Web Vitals（Google公式ドキュメント）

補足: INPは2024年にFID（First Input Delay）に代わって導入された指標です。FIDが「最初の操作だけ」を測っていたのに対し、INPはページ滞在中のすべての操作の応答性を測定します。古い記事でFIDが言及されている場合はINPに読み替えてください。

Googleはこれらの指標を実際のユーザーデータの75パーセンタイルで評価しています。つまり、訪問者の75%以上が「良好」の基準を満たしている必要があります。

方法①: Chrome DevTools（Lighthouse）

最も手軽な方法は、Chromeに標準搭載されているDevToolsのLighthouseタブを使う方法です。追加インストールは不要です。

手DevToolsでの確認手順

  1. 確認したいページをChromeで開く
  2. F12キー（Macは⌘ + Option + I）でDevToolsを開く
  3. 上部タブから「Lighthouse」を選択
  4. カテゴリで「Performance」にチェック
  5. デバイスを「Mobile」または「Desktop」から選択
  6. 「Analyze page load」をクリック
  7. 30秒〜1分ほどで結果が表示される

結果の見方: Lighthouseレポートの上部にパフォーマンススコア（0〜100）が表示されます。その下に各指標の値が色付きで表示されます。

注意点: Lighthouseは「ラボデータ」（Lab data）を使用しています。実際のユーザー環境とは異なる結果になることがあります。ネットワーク速度やデバイス性能をシミュレーションしているため、実際のフィールドデータ（実ユーザーデータ）とは乖離が生じる場合があります。特にINPはユーザーの操作が必要なため、Lighthouseでは代替指標のTBT（Total Blocking Time）で近似します。

方法②: PageSpeed Insights（Google公式ツール）

Googleが提供する無料のWeb分析ツールPageSpeed Insightsでは、実際のユーザーデータ（フィールドデータ）とラボデータの両方を確認できます。

手PageSpeed Insightsでの確認手順

  1. pagespeed.web.dev にアクセス
  2. 確認したいURLを入力
  3. 「分析」をクリック
  4. 「実際のユーザーの環境で評価する」セクション（上部）でCWVのフィールドデータを確認
  5. 「パフォーマンスの問題を診断する」セクション（下部）でLighthouseベースの診断を確認

フィールドデータとラボデータの違い:

比2種類のデータの使い分け

種別 データソース 特徴
フィールドデータ CrUX（Chrome User Experience Report）— 実際のChromeユーザーから匿名収集 実際のユーザー体験を反映。Googleの検索ランキング評価に使われるのはこちら
ラボデータ Lighthouse — シミュレーション環境で測定 再現性が高く、開発時のデバッグに有用。ただし実環境とは異なる場合がある

注意点: フィールドデータは、サイトに十分なトラフィックがある場合にのみ表示されます。新規サイトや低トラフィックのサイトでは「データが不十分です」と表示されることがあります。その場合はラボデータを参考にしてください。

方法③: Chrome拡張を使う

繰り返し確認する場合は、Chrome拡張をインストールしておくと効率的です。

拡CWV確認に使えるChrome拡張

拡張 開発元 特徴
Web Vitals Google CWV 3指標をリアルタイム表示。ブラウジング中に常時確認可能
PagePulse Pulse Digital CWV関連チェック（画像最適化・render-blocking検出等）に加え、SEO・アクセシビリティ・構造も一括診断

Google公式のWeb Vitals拡張は、ページを開くだけで LCP・INP・CLS の値がリアルタイムでバッジに表示されます。ページ移動のたびにリセットされるため、ページ単位での確認に向いています。

PagePulseはCWV関連の「原因」を診断するのに向いています。画像にwidth/height属性が設定されているか（CLS対策）、render-blockingなスクリプトがないか（LCP対策）、画像のlazy loadingが適切か（LCP対策）を一括でチェックできます。

ECサイト特有のCWV課題

ECサイトはCWVの改善が特に難しいジャンルの一つです。商品画像の多さ、外部スクリプト（決済・チャット・広告タグ）の読み込みなど、パフォーマンスに悪影響を与える要素が構造的に多いためです。

課ECサイトで頻出するCWV問題

  • LCPの悪化: 商品メイン画像のファイルサイズが大きい、またはlazy loadingの設定ミスでファーストビュー内の画像にも遅延読み込みが適用されている（下記コード例参照）
  • CLSの悪化: 商品画像にwidth/height属性がなく、読み込み完了時にレイアウトがズレる。カルーセル（スライダー）の高さが動的に変わるケースも多い
  • INPの悪化: 決済系・チャットウィジェット・広告タグなどのサードパーティスクリプトがメインスレッドをブロックしている

例lazy loadingの設定ミスと修正

ファーストビュー（最初に画面に見える領域）内の商品メイン画像に loading="lazy" が付いていると、LCPが悪化します。

<!-- ❌ ファーストビューの画像にlazy loadingを付けてはいけない -->
<img src="product-main.jpg" loading="lazy" alt="商品名">

<!-- ✅ ファーストビューの画像はeagerまたは属性省略 -->
<img src="product-main.jpg" width="600" height="600" alt="商品名">

<!-- ✅ ファーストビュー外の画像にはlazy loadingを付ける -->
<img src="related-product.jpg" loading="lazy"
     width="300" height="300" alt="関連商品">

ECプラットフォームのテンプレートによっては、すべての商品画像に一括でlazy loadingが設定されている場合があります。ファーストビュー内のメイン画像だけは除外する設定を確認してください。

改善の優先順位

すべてを一度に改善するのは現実的ではありません。Googleの公式ガイドを参考に、効果の大きい順に取り組むのが合理的です。

  1. LCPの画像最適化 — ファーストビューの画像にはlazy loadingを付けない。次世代フォーマット（WebP / AVIF）への変換も有効
  2. CLSの画像サイズ指定 — すべての<img>タグにwidthとheight属性を指定する
  3. サードパーティスクリプトの遅延読み込み — 決済やチャットのスクリプトにasyncまたはdefer属性を付ける

3つの方法の使い分けまとめ

使目的別おすすめの方法

目的 おすすめの方法 理由
今すぐ1回だけ確認したい DevTools Lighthouse インストール不要、ブラウザだけで完結
実ユーザーのデータを見たい PageSpeed Insights CrUXの実データ + 改善提案が一度に得られる
日常的に複数ページを確認 Chrome拡張（Web Vitals / PagePulse） ページ遷移のたびにリアルタイムで確認可能

Core Web Vitalsは「改善すればすぐに検索順位が上がる」という銀の弾丸ではありません。ただし、ユーザー体験の品質を客観的に測る指標として、また検索ランキングの評価要素の一つとして、現状を把握しておくことには大きな価値があります。

まずは自サイトの現状を確認するところから始めてみてください。

📝 関連記事: