【2025年版】Core Web Vitals完全ガイド｜LCP・FID・CLSの改善方法

1. Core Web Vitalsとは

Core Web Vitals（コアウェブバイタル）は、Googleが定めたウェブページのユーザー体験を測定する3つの指標です。

3つの指標

Core Web Vitalsの3指標

LCP（Largest Contentful Paint）：最大コンテンツの表示時間 → 読み込み速度
FID（First Input Delay）：初回入力の遅延時間 → インタラクティブ性
CLS（Cumulative Layout Shift）：レイアウトのずれ → 視覚的安定性

合格基準

Googleが定める「良好」の基準は以下の通りです：

LCP：2.5秒以内（4秒以上は「不良」）
FID：100ミリ秒以内（300ミリ秒以上は「不良」）
CLS：0.1以下（0.25以上は「不良」）

これらの基準を75%以上のページビューで達成する必要があります。

SEOへの影響

Core Web Vitalsは2021年6月から検索ランキング要素の一つになりました。ただし、コンテンツの質が最も重要であることに変わりはありません。

同等のコンテンツ品質のページ同士では、Core Web Vitalsが優れているページが上位表示される傾向があります。

INPへの移行（2024年3月〜）

2024年3月から、FIDに代わってINP（Interaction to Next Paint）が正式な指標となりました。INPはすべてのインタラクション（クリック、タップ、キー入力）の応答性を測定します。

INP合格基準：200ミリ秒以内

2. LCP（Largest Contentful Paint）の改善方法

LCPは、ページ内で最も大きなコンテンツ（画像やテキストブロック）が表示されるまでの時間を測定します。ユーザーが「ページが読み込まれた」と感じるタイミングに近い指標です。

LCPが遅くなる原因

サーバー応答時間が遅い：TTFB（Time to First Byte）が長い
レンダリングをブロックするリソース：CSSやJavaScriptの読み込み
リソースの読み込み時間：大きな画像やフォント
クライアントサイドレンダリング：JavaScriptによるコンテンツ生成

改善方法1：サーバー応答の高速化

CDN（コンテンツ配信ネットワーク）の利用：地理的に近いサーバーから配信
キャッシュの活用：サーバーサイドキャッシュ、ブラウザキャッシュ
サーバースペックの向上：より高速なホスティングへ移行
データベースクエリの最適化：WordPressなどCMS利用時

改善方法2：画像の最適化

LCPの要素が画像の場合（多くのサイトで該当）、画像の最適化が効果的です。

WebP形式の使用：JPEGより25-35%軽量
適切なサイズで配信：srcset属性でレスポンシブ画像
圧縮：画質を落とさず容量を削減
preloadの使用：LCP画像を優先的に読み込む

<link rel="preload" as="image" href="hero-image.webp">

改善方法3：レンダリングブロックの解消

CSSのインライン化：クリティカルCSSを<head>に直接記述
JavaScriptの遅延読み込み：defer属性やasync属性を使用
不要なCSSの削除：使用していないスタイルを除去

3. FID（First Input Delay）の改善方法

FIDは、ユーザーが最初にページを操作（クリック、タップなど）してから、ブラウザがその操作に応答するまでの時間を測定します。

※2024年3月からINPに置き換わりましたが、改善方法は同様です。

FID/INPが遅くなる原因

長いJavaScriptタスク：メインスレッドをブロック
大きなJavaScriptバンドル：解析・実行に時間がかかる
サードパーティスクリプト：広告、アナリティクスなど

改善方法1：JavaScriptの最適化

コード分割（Code Splitting）：必要な部分だけを読み込む
不要なJavaScriptの削除：使っていないコードを除去
圧縮（Minify）：ファイルサイズを削減
Tree Shaking：未使用のコードを自動削除

改善方法2：長いタスクの分割

50ミリ秒以上かかるタスクは「長いタスク」とみなされ、FID/INPに悪影響を与えます。

タスクを小さく分割：setTimeout、requestIdleCallbackの活用
Web Workerの使用：重い処理をバックグラウンドで実行
遅延読み込み：必要になってから実行

改善方法3：サードパーティスクリプトの管理

本当に必要か見直す：使っていないスクリプトを削除
遅延読み込み：ページ読み込み後に実行
ファサードパターン：ユーザー操作まで読み込まない

4. CLS（Cumulative Layout Shift）の改善方法

CLSは、ページ読み込み中にレイアウトが予期せずずれる度合いを測定します。ボタンをクリックしようとしたら位置がずれて別のボタンを押してしまった、という経験はCLSが原因です。

CLSが発生する原因

サイズ未指定の画像・動画：読み込み後にスペースが確保される
動的に挿入されるコンテンツ：広告、バナー、通知
Webフォントの読み込み：FOUT（Flash of Unstyled Text）
非同期で読み込まれる要素：後から表示される埋め込みコンテンツ

改善方法1：画像・動画のサイズ指定

すべての画像と動画にwidth属性とheight属性を指定します。

<img src="image.jpg" width="800" height="600" alt="説明">

またはCSSでアスペクト比を指定：

.image-container {
  aspect-ratio: 16 / 9;
}

改善方法2：広告・埋め込みコンテンツのスペース確保

プレースホルダーの設置：広告枠のサイズを事前に確保
固定サイズの広告枠：動的なサイズ変更を避ける
遅延読み込みの位置に注意：ファーストビュー外で読み込む

改善方法3：Webフォントの最適化

font-display: swap：システムフォントを先に表示
フォントのpreload：優先的に読み込む
フォントのサブセット化：使用する文字だけを読み込む

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

改善方法4：動的コンテンツの制御

上部に動的コンテンツを挿入しない：既存コンテンツを押し下げない
transform属性でアニメーション：レイアウトに影響を与えない
ユーザー操作起点のみ許可：自動で表示される要素を避ける

5. Core Web Vitalsの測定方法

Core Web Vitalsを測定するためのツールを紹介します。

フィールドデータ（実際のユーザーデータ）

実際のユーザーが体験した値を収集したデータです。最も信頼性が高いです。

Google Search Console：「ウェブに関する主な指標」レポート
PageSpeed Insights：「実際のユーザーの環境で評価する」セクション
Chrome UX Report（CrUX）：Googleが収集した実データ

ラボデータ（シミュレーション）

ツールが模擬的に測定したデータです。開発・デバッグに有用です。

PageSpeed Insights：「パフォーマンスの問題を診断する」セクション
Lighthouse：Chrome DevToolsで実行可能
Web Vitals拡張機能：Chromeブラウザ拡張

測定手順（PageSpeed Insights）

PageSpeed Insightsにアクセス
URLを入力して「分析」をクリック
モバイル/デスクトップのスコアを確認
「診断」セクションで改善ポイントを確認

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

フィールドデータ：実際のユーザー体験（Googleが使用）
ラボデータ：標準環境でのシミュレーション（デバッグ用）

SEO的にはフィールドデータが重要ですが、改善作業ではラボデータも活用します。

6. 改善の優先順位と進め方

すべてを一度に改善するのは難しいため、優先順位をつけて取り組みましょう。

優先順位の考え方

「不良」を「改善が必要」に：まず最低ラインをクリア
影響の大きいページから：トップページ、主要なランディングページ
効果の大きい施策から：画像最適化、キャッシュ設定

効果が大きい改善施策TOP5

優先的に取り組むべき施策

画像の最適化：WebP変換、圧縮、サイズ指定（LCP・CLS改善）
不要なJavaScriptの削除：使っていないコードを除去（FID改善）
CDNの導入：サーバー応答の高速化（LCP改善）
キャッシュの設定：ブラウザキャッシュ、サーバーキャッシュ（全体改善）
サードパーティスクリプトの見直し：不要なものを削除（FID・LCP改善）

改善の進め方

現状を計測：PageSpeed Insightsでスコアを確認
問題を特定：「診断」セクションで改善ポイントを把握
施策を実行：優先度の高いものから対応
効果を測定：改善後に再度計測
繰り返す：目標スコアに達するまで継続

WordPressサイトの場合

WordPressを使用している場合は、以下のプラグインが有効です：

WP Rocket：キャッシュ、遅延読み込み（有料）
Autoptimize：CSS/JavaScript最適化（無料）
ShortPixel：画像最適化、WebP変換
Perfmatters：不要な機能の無効化（有料）

まとめ

Core Web Vitalsは、ユーザー体験を数値化した重要な指標であり、SEOにも影響します。

3つの指標と改善のポイントをまとめると：

LCP（2.5秒以内）：画像最適化、サーバー高速化、レンダリングブロック解消
FID/INP（100/200ミリ秒以内）：JavaScript最適化、長いタスクの分割
CLS（0.1以下）：画像サイズ指定、広告枠の事前確保、フォント最適化

まずはPageSpeed Insightsで現状を確認し、「診断」で指摘された項目から優先的に対応していきましょう。地道な改善の積み重ねが、ユーザー体験とSEOの両方を向上させます。

よくある質問

Core Web Vitalsとは何ですか？

Core Web Vitals（コアウェブバイタル）は、Googleが定めたウェブページのユーザー体験を測定する3つの指標です。LCP（読み込み速度）、FID（インタラクティブ性）、CLS（視覚的安定性）から構成され、2021年からGoogleの検索ランキング要素の一つとなっています。

Core Web Vitalsの合格基準は？

Googleが定める合格基準は、LCP（Largest Contentful Paint）が2.5秒以内、FID（First Input Delay）が100ミリ秒以内、CLS（Cumulative Layout Shift）が0.1以下です。これらを75%以上のページビューで達成する必要があります。

Core Web Vitalsを測定する方法は？

PageSpeed Insights、Google Search Console、Chrome DevTools、Lighthouse、Web Vitals拡張機能などで測定できます。PageSpeed InsightsとSearch Consoleでは実際のユーザーデータ（フィールドデータ）も確認できます。

Core Web VitalsはSEOにどう影響しますか？

Core Web Vitalsは2021年からGoogleの検索ランキング要素の一つです。ただし、コンテンツの質が最も重要であることに変わりはありません。同等のコンテンツ品質のページ間では、Core Web Vitalsが優れているページが上位表示される傾向があります。

サイト高速化でお困りの方へ

Core Web Vitalsの改善をサポートします。お気軽にご相談ください。

無料相談する

目次