Core Web Vitals完全ガイド — LCP・INP・CLSの閾値と改善方法

この記事でできるようになること

LCP・INP・CLSの閾値と測定方法を理解し、ボトルネックに応じた改善を実行できるようになります。

前提知識の確認

テクニカルSEOの基礎を理解していない場合は、先にテクニカルSEOチェックリストを読んでください。

本文

概念説明

Core Web Vitals（CWV）は、ウェブページのユーザー体験を測定するGoogleの指標セットです。実際のユーザーデータの75パーセンタイルで評価されます。CWVはGoogleのランキング要因（タイブレーカー）であり、コンテンツ品質が競合と類似している場合に差がつきます。

判断基準

現在の指標と閾値:

指標	良好	改善が必要	不良
LCP（Largest Contentful Paint）	≤2.5秒	2.5〜4.0秒	>4.0秒
INP（Interaction to Next Paint）	≤200ms	200〜500ms	>500ms
CLS（Cumulative Layout Shift）	≤0.1	0.1〜0.25	>0.25

重要な事実

• INPは2024年3月12日にFIDを完全に置き換えました。FIDは2024年9月9日にすべてのChromeツールから削除されています。
• 閾値は当初の定義から変更されていません。「閾値が厳格化された」というSEOブログの主張は誤りです。
• 2025年12月コアアップデートでモバイルCWVのウェイトが増加した可能性があります。
• 2025年10月時点：デスクトップの57.1%、モバイルの49.7%が全3指標をパスしています（HTTP Archive CrUX）。

LCPのサブパート分析（2025年2月CrUX追加）

サブパート	測定内容	目標
TTFB	サーバーレスポンス時間	<800ms
Resource Load Delay	TTFBからリソースリクエスト開始まで	最小化
Resource Load Time	LCPリソースのダウンロード時間	サイズに依存
Element Render Delay	リソース読み込みからレンダリングまで	最小化

LCP = TTFB + Resource Load Delay + Resource Load Time + Element Render Delay

実行手順

一般的なボトルネックに応じて改善を実行します。

LCP（Largest Contentful Paint）

• 未最適化のヒーロー画像 → 圧縮、WebP/AVIF使用、preload追加
• レンダーブロッキングCSS/JS → defer、async、クリティカルCSSインライン化
• 遅いサーバーレスポンス → エッジCDN、キャッシュ使用
• サードパーティスクリプトのブロッキング → アナリティクス・チャットウィジェットの遅延読み込み
• Webフォントの読み込み遅延 → font-display: swap + preload

INP（Interaction to Next Paint）

• メインスレッドの長いJavaScriptタスク → 50ms未満のタスクに分割
• 重いイベントハンドラー → debounce、requestAnimationFrame使用
• 過大なDOMサイズ → 1,500要素以上は要注意
• サードパーティスクリプトによるメインスレッド占有
• 同期XHRやlocalStorage操作

CLS（Cumulative Layout Shift）

• width/heightが未設定の画像/iframe
• 既存コンテンツの上に動的に挿入されるコンテンツ
• レイアウトシフトを起こすWebフォント → font-display: swap + preload
• スペースが確保されていない広告/埋め込み

測定ツール: フィールドデータ（CrUX、PageSpeed Insights、Search Console）はGoogleがランキングに使用。ラボデータ（Lighthouse、WebPageTest）はデバッグに有用。

パフォーマンスツールの更新（2025年）:

• Lighthouse 13.0（2025年10月）：パフォーマンスカテゴリの再構成とスコアリングウェイト更新
• CrUX VisがCrUXダッシュボードを置き換え（2025年11月）
• Google Search Console 2025機能：AI搭載の自動分析、ブランド/非ブランドクエリフィルタ、時間単位データ

よくある間違いと対処法

• FIDをまだ測定している: 2024年9月に完全削除。INPに置き換え済み。
• 閾値が厳格化されたと信じている: 閾値は変更されていない。LCP≤2.5秒、INP≤200ms、CLS≤0.1のまま。
• ラボデータだけで判断する: ランキングに使われるのはCrUX等のフィールドデータ。ラボはデバッグ用。
• LCPだけ改善すればよい: 3指標すべてがランキング要因。INP・CLSも並行して改善する。

実行チェックリスト

1. PageSpeed InsightsまたはSearch Consoleで現状スコアを確認する
2. LCP不良時: ヒーロー画像の最適化、レンダーブロッキングの解消、TTFB改善
3. INP不良時: メインスレッドのタスク分割、イベントハンドラーの軽量化
4. CLS不良時: 画像/iframeにwidth/heightを設定、動的挿入コンテンツのスペース確保

次にやること

PageSpeed CWVモニタリングガイドで継続測定を設定し、テクニカルSEOチェックリストで全体監査を進めてください。