Core Web Vitals (LCP/CLS/INP) を整理する

Core Web Vitals は、Google が定めた「ユーザー体験を測る3つの指標」です。LCP（読み込み速度）/ CLS（視覚的安定性）/ INP（応答性）の3つで、これらは検索順位の評価要素にも組み込まれています。この記事では各指標の意味、計測ツール、改善の優先順位を整理します。

Core Web Vitals とは

Google は「Web Vitals」というシリーズで様々なパフォーマンス指標を提供していますが、その中でも特に重要視される3つが「Core Web Vitals」です。2024年3月以降、FID（First Input Delay）に代わり INP（Interaction to Next Paint）が正式採用されました。

1. LCP（Largest Contentful Paint）— 読み込み速度

ページの主要コンテンツが表示されるまでの時間。具体的には、ビューポート内で最も大きい画像 or テキストブロックがレンダリングされる時刻です。

評価	基準
良好	2.5秒以下
改善が必要	2.5〜4.0秒
不良	4.0秒超

LCP の主な原因

大きすぎる画像（特にヒーロー画像）
遅いサーバーレスポンス（TTFB > 600ms）
レンダリングをブロックする JS/CSS
遅延読み込みされたフォント

LCP の改善策

ヒーロー画像を WebP/AVIF にして適切にサイズ調整、<link rel="preload"> で先読み
クリティカル CSS をインライン化、その他は遅延読み込み
CDN・ブラウザキャッシュの活用
フォントは font-display: swap または事前ロード
サーバー応答時間の改善（PHP の処理高速化、DBクエリの最適化）

2. CLS（Cumulative Layout Shift）— 視覚的安定性

読み込み中にレイアウトがどれだけ動くかを示すスコア。突然画像が読み込まれて文章が下にズレる、広告が後から挿入されてボタンの位置が変わる、などの「ガクッ」とした動きを数値化します。

評価	基準
良好	0.1以下
改善が必要	0.1〜0.25
不良	0.25超

CLS の主な原因

画像・iframe にサイズ属性（width/height）が無い
Web フォントの読み込みで文字幅が変わる
動的に挿入される広告・バナー
ユーザーアクション後に挿入されるコンテンツ（モーダル等）

CLS の改善策

<img width="..." height="..."> を必ず指定、または CSS で aspect-ratio
iframe（YouTube 等）には固定サイズを CSS で確保
Web フォントには size-adjust やフォールバックでサイズ整合
広告枠は最初から固定の高さを確保しておく
動的コンテンツの挿入は CSS transform でレイアウトに影響させない

3. INP（Interaction to Next Paint）— 応答性

ユーザー操作（クリック・タップ・キー入力）から、画面が次に更新されるまでの時間。2024年3月にFIDから置き換えられた新しい指標で、ページ訪問中の全インタラクションを評価します。

評価	基準
良好	200ms以下
改善が必要	200〜500ms
不良	500ms超

INP の主な原因

重い JavaScript の処理がメインスレッドを占有
サードパーティスクリプト（解析・広告タグ）の同期実行
イベントハンドラ内での大量計算
レンダリングを引き起こす DOM 操作

INP の改善策

重い処理を requestIdleCallback や setTimeout(..., 0) で分割
Web Worker でメインスレッドから切り離す
サードパーティスクリプトを defer / async で遅延読み込み
イベント処理を requestAnimationFrame で適切なタイミングに
不要な DOM 操作（querySelectorAll を毎フレームで呼ぶ等）を削減

計測ツール

1. PageSpeed Insights（Google）

URL を入れるだけで、ラボデータ（実測）とフィールドデータ（実ユーザー）の両方が見られます。改善提案も具体的。

URL: https://pagespeed.web.dev/

2. Lighthouse（Chrome DevTools）

ローカル環境で計測できる開発ツール。Chrome の DevTools → Lighthouse タブから実行。

計測条件をモバイル/PC、低速回線、CPUスロットリングなど細かく設定できる。

3. Search Console「ウェブに関する主な指標」

自分のサイトを Google Search Console に登録すると、実ユーザーのフィールドデータが表示されます。ページごとに良好/改善が必要/不良のステータスが分かります。

4. Web Vitals 拡張機能

Chrome 拡張機能で、訪問中のページの Core Web Vitals 値がリアルタイムに表示されます。開発中の確認に便利。

改善の優先順位

1位: 重い画像の最適化

LCP に直接効くだけでなく、CLS にも CFLS への効果あり。最大コスパ。

2位: サードパーティスクリプトの遅延読み込み

Google Analytics・SNS埋め込み・広告タグはほぼ全サイトでINPを悪化させます。async / defer を徹底するだけで効果大。

3位: 画像・iframe のサイズ指定

CLS への即効性あり。コーディング規約として徹底するのが理想。

4位: クリティカル CSS のインライン化

LCP の最大ボトルネックは「render-blocking」リソース。Above-the-fold の CSS だけインライン化すると初期描画が早まる。

5位: Web フォントの読み込み戦略

font-display: swap で「読み込み中もフォールバックで表示」が安全。Preload と組み合わせるとさらに高速化。

WordPress サイトでの定番改善メニュー

キャッシュプラグイン: W3 Total Cache, WP Rocket, LiteSpeed Cache 等
画像最適化プラグイン: Smush, ShortPixel, EWWW Image Optimizer
遅延読み込み: WP 標準のlazy loading（5.5以降）を活用
CDN: Cloudflare, BunnyCDN 等で配信を分散
サーバー選び: PHPバージョン、サーバースペック、HTTP/2対応

注意点

Core Web Vitals は「ランキング要素のひとつ」だが、コンテンツの質が前提
「スコア100点」を目指す必要はない。「良好（緑）」を維持できれば十分
サードパーティタグを大量に入れている場合、ある程度のスコア低下は避けられない
モバイルとデスクトップは別評価。モバイルが優先される

まとめ

Core Web Vitals は「速い・崩れない・反応する」というユーザー体験を数値化したものです。これらは検索順位だけでなく、直帰率・滞在時間・コンバージョン率にも影響します。「コンテンツの質」と並んで意識すべき、現代Webサイトの基本品質です。まずは PageSpeed Insights で自分のサイトを計測してみることから始めましょう。