Core Web Vitals 完全ガイド：LCP・INP・CLSの計測方法とSEOに効く改善手法
エバープレイ編集部Core Web Vitalsとは
Core Web Vitals（コア・ウェブ・バイタルズ）は、Google が提示するウェブページの「ユーザー体験（UX）」を定量化するための一連の指標群です。ページ読み込みや表示、ユーザー操作に関する実際の体感を数値化し、検索結果のランキング要因（ページ エクスペリエンス）にも組み込まれています。もともとは Largest Contentful Paint（LCP）、First Input Delay（FID）、Cumulative Layout Shift（CLS）の3指標で構成されていましたが、ユーザー操作の評価指標として INP（Interaction to Next Paint）への移行が進められています。
なぜ重要か
従来のパフォーマンス指標（例えば総読み込み時間やリクエスト数）だけではユーザーの実際の体感を十分に表せません。Core Web Vitals は「見た目」「操作の応答性」「レイアウトの安定性」に着目することで、ユーザーがページを使って感じる快適さを直接評価します。検索ランキングへの影響に加え、コンバージョン率・直帰率・滞在時間といったビジネス指標にも直結するため、フロントエンド最適化の主要なターゲットになっています。
主要指標の詳細
-
Largest Contentful Paint（LCP）
ページの主要なコンテンツ（大きな画像やテキストブロックなど）が表示されるまでの時間を測定します。ユーザーが「ページは読み込まれている」と感じる指標です。
目安（暫定的・Google 推奨）: 良好 ≤ 2.5 秒、改善の余地 2.5–4.0 秒、悪い > 4.0 秒。
-
First Input Delay（FID） と Interaction to Next Paint（INP）
FID は最初のユーザー操作（クリックやキーボード入力など）に対する応答遅延を測る指標でした。主に最初のインタラクションに焦点を当てます。目安は良好 < 100 ms など。
しかし、FID は「最初の操作のみ」を対象とするため、継続的な操作の体験を評価しきれないという課題があり、Google は INP（Interaction to Next Paint）を推奨指標として導入しています。INP はページ上での様々なインタラクション全体を評価し、遅延の分布を基にしたスコアで「ユーザーが操作した際の平均的な応答性」を表します。閾値は測定方法やバージョンで変動するため公式ドキュメントを参照してください。
-
Cumulative Layout Shift（CLS）
ページの読み込み中や動作中に予期せずレイアウトがずれる量（視覚的な安定性）を示す指標です。画像の読み込みによるシフトや動的挿入コンテンツ、広告の差し込みなどが主な原因です。
目安: 良好 < 0.1、改善の余地 0.1–0.25、悪い > 0.25。
計測の種類：フィールドデータ vs ラボデータ
Core Web Vitals は「現実のユーザー（フィールド）」から得られるデータと、開発環境で再現する「ラボ」での計測の両方があります。
- フィールドデータ：Chrome UX Report (CrUX) が代表で、実際のユーザー環境（端末・回線・利用状況）の分布に基づく実測値。Search Console の Core Web Vitals レポートや PageSpeed Insights の実ユーザーデータで確認できます。
- ラボデータ：Lighthouse や WebPageTest などで固定の環境（例えば低速モバイル）を再現して測定。再現性が高くデバッグに有効ですが、実際のユーザー環境を完全には反映しません。
測定ツール（代表例）
- Google PageSpeed Insights（ラボ + フィールド）
- Lighthouse（Chrome DevTools 内）
- Chrome User Experience Report（CrUX）/ BigQuery（フィールドデータの集計）
- Search Console の Core Web Vitals レポート
- WebPageTest（詳細なラボ計測）
- web-vitals JavaScript ライブラリ（LCP/CLS/INP 等をクライアントで計測）
改善の具体的な手法
以下は代表的な最適化手法です。実際のボトルネックを特定するため、まずはツールで計測して原因を把握してください。
LCP 改善（表示速度向上）
- サーバー応答時間の短縮（FastCGI キャッシュ、Redis、APCu、動的処理の最適化）。
- CDN の利用で距離遅延を低減。
- 重要なリソース（Hero 画像、フォント、CSS）をプリロード（preload）する。
- レンダーブロッキングリソースの削減（CSS の最小化、Critical CSS の抽出、JS の遅延読み込み）。
- 画像の最適化（適切なフォーマット（WebP/AVIF）、サイズレスポンシブ、遅延読み込みの活用）。
- クライアント側でのレンダリング負荷を下げる（不要な JavaScript 処理を削減、サーバーサイドレンダリングを検討）。
INP / FID 改善（応答性向上）
- メインスレッドの長時間タスク（Long Tasks）を分割する。Webpack や Rollup でコード分割を行う。
- 重たい処理を Web Worker に移す。
- サードパーティスクリプトの影響を評価し、遅延読み込みまたは非同期化する。
- イベントハンドラのコストを下げる（同期で重い処理を行わない）。
- Input responsiveness を改善するためにポリシー（requestIdleCallback, requestAnimationFrame の適切な利用）を検討する。
CLS 改善（レイアウトの安定化）
- 画像や動画のタグに width/height 属性を設定し、CSS でアスペクト比を保持する。
- 広告や埋め込みコンテンツのためにプレースホルダーの領域を確保する。
- DOM 操作でのコンテンツ挿入位置に注意し、既存コンテンツを押し下げない方法を採る。
- アニメーションは transform（translate/scale）を使い、レイアウトの再計算を引き起こさないようにする。
実務上の注意点
- 「最小化」だけを追うと機能性やアクセシビリティを損なう恐れがあるため、ユーザー体験全体のバランスを考えること。
- フィールドデータは幅のあるユーザー分布（遅い回線や古い端末）を含むため、ラボで良くても実ユーザーが悪いケースがある。CrUX を必ず確認する。
- サードパーティスクリプト（広告、解析、チャット等）は予期せぬ遅延やレイアウトシフトを引き起こすことが多く、継続的な監視と最適化が必要。
- 指標の仕様や閾値は更新されるため、Google の公式ドキュメントを定期的に確認する。
SEO との関係
Google は Core Web Vitals を含む「ページ エクスペリエンス」を検索ランキング要因の一部として導入しています（最初の導入は 2021 年ごろ）。ただし、コンテンツの関連性が依然として最も重要な要素であり、Core Web Vitals は順位決定の一側面に過ぎません。最終的な目標は検索順位の上昇だけでなく、ユーザーの満足度とコンバージョン向上です。
まとめ
Core Web Vitals はユーザーが実際に感じるページの「速さ」「反応性」「安定性」を定量化する強力な指標群です。正確な原因特定にはフィールドデータとラボデータの両方を使い分け、優先度をつけて改善を進めることが重要です。技術的な対策（画像最適化、サーバー改善、JSの分割・最適化、レイアウトの安定化）を継続的に実施することで、ユーザー体験とビジネス成果の両方を高められます。
参考文献
- Core Web Vitals — web.dev
- Page experience | Search Central (Google)
- Largest Contentful Paint (LCP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev
- Interaction to Next Paint (INP) — web.dev
- Lighthouse — Google Developers
- Chrome User Experience Report (CrUX) — Google Developers
- web-vitals — GitHub
投稿者プロフィール
