コアウェブバイタル改善施策とは？LCP・INP・CLSの対策と計測法
2026年05月10日
「サイトが重い」「Googleのページエクスペリエンス評価が低い」「競合より検索順位が伸びない」——そう感じているWebマーケティング担当者の方に、コアウェブバイタル（Core Web Vitals）の改善は最も効果的なSEO施策の一つです。コアウェブバイタルはGoogleが2021年に正式にランキング要因として導入したページ体験指標で、LCP・INP・CLSの3指標から構成されます。これらをすべて「良好」に保つことは、検索順位の維持と向上に直結します。
この記事では、コアウェブバイタルの各指標の定義と閾値、具体的な改善施策、そしてPageSpeed InsightsやCrUXを使った計測・モニタリング方法を体系的に解説します。エンジニアリングの専門知識がなくても施策の優先度を判断できるよう、マーケティング責任者の視点で整理しています。
この記事を読み終えると、自社サイトのコアウェブバイタルのどの指標に課題があるかを特定し、エンジニアチームへの改善依頼を具体的に出せるようになります。また、改善サイクルを月次で回す体制の作り方まで理解できます。
こんな方にオススメ
- Core Web Vitals（LCP・CLS・INP）のスコア改善に取り組んでいるフロントエンド担当者の方
- PageSpeed InsightsやCrUXのデータを使って改善優先度を決めたいSEO担当者の方
- 表示速度改善・レイアウトシフト解消・インタラクション遅延削減の技術的手法を知りたい方
この記事を読むと···
- Core Web Vitalsの3指標（LCP・CLS・INP）の定義・測定方法・目標値を理解できます
- スコア低下の原因診断と指標別の具体的な改善技法（画像最適化・キャッシュ・フォント等）がわかります
- 改善ロードマップの作り方とSEO評価への影響をモニタリングする仕組みを習得できます
あなたに関連しそうなCreative Driveの機能・サポート一覧
機能・サポート一覧を見る →
目次
コアウェブバイタルとは何か
定義とSEOへの影響
コアウェブバイタルとは、Googleが設定したページ体験の中核指標群です。ユーザーが実際にページを操作する際の体験品質——読み込み速度・インタラクティビティ・視覚的安定性——を数値化したものです。2021年6月のPage Experience Updateで正式にランキングシグナルとなり、それ以降はコアウェブバイタルが「良好」なサイトは検索結果での優遇を受けやすくなっています。Googleのリサーチでは、コアウェブバイタルが良好なページはそうでないページと比較して離脱率が平均24%低いというデータも公開されています。つまり、SEO効果だけでなくUX改善・CV率向上にも直結する指標です。
2024年以降の変化：FIDからINPへ
2024年3月、GoogleはFID（First Input Delay）を廃止し、新たにINP（Interaction to Next Paint）をコアウェブバイタルの正式指標として採用しました。FIDは最初のインタラクションの応答遅延のみを計測していましたが、INPはページ滞在中のすべてのインタラクション（クリック・タップ・キーボード入力）の応答時間の分布を測定します。この変更によって、ページ全体にわたるインタラクティビティの品質が評価されるようになったため、JavaScriptが多いSPAやインタラクション豊富なランディングページでは特に対応が急務となっています。FIDで合格していたサイトでも、INPでは「改善が必要」と判定されるケースが出ているため、改めて計測し直すことをおすすめします。
| 指標 | 良好 | 要改善 | 低評価 | 主な改善施策 |
|---|---|---|---|---|
| LCP | 2.5秒以内 | 2.5〜4.0秒 | 4.0秒超 | 画像最適化・サーバー応答改善・レンダリングブロック解消 |
| INP | 200ms以内 | 200〜500ms | 500ms超 | JavaScript実行時間削減・イベントハンドラー最適化 |
| CLS | 0.1以下 | 0.1〜0.25 | 0.25超 | 画像・広告サイズ指定・動的コンテンツのスペース確保 |
| TTFB | 800ms以内 | 800ms〜1.8秒 | 1.8秒超 | CDN導入・サーバーキャッシュ設定・DBクエリ最適化 |
| FCP | 1.8秒以内 | 1.8〜3.0秒 | 3.0秒超 | クリティカルCSS抽出・フォント最適化・プリロード設定 |
LCP（最大コンテンツ描画）の改善方法
LCPの仕組みと低下原因
LCP（Largest Contentful Paint）は、ページのビューポート内で最も大きなコンテンツ要素（通常はヒーロー画像・見出しテキスト・動画サムネイル）が画面に描画されるまでの時間を計測します。良好な閾値は2.5秒以内です。LCPが低下する主な原因は4つあります。①サーバー応答時間（TTFB）が遅い、②レンダリングブロックするCSSやJavaScriptが多い、③ヒーロー画像のファイルサイズが大きい・最適化されていない、④クライアントサイドレンダリング（CSP/JavaScript描画）に依存していることです。これらのどれが支配的な原因かは、PageSpeed Insightsの「LCP要素の特定」セクションで確認できます。
LCP改善の具体的施策
最も効果が大きい施策は画像最適化です。ヒーロー画像をWebPまたはAVIF形式に変換するだけで、PNGやJPEGと比較してファイルサイズを30〜50%削減できます。あわせて`<img>`タグに`fetchpriority=”high”`属性を付与してブラウザに優先読み込みを指示し、`<link rel=”preload”>`でヘッダーからの早期取得を促します。サーバー応答速度の改善にはCDN（コンテンツデリバリーネットワーク）の導入が有効で、CloudflareやAmazon CloudFrontを使うことでTTFBを200ms以下に抑えることが可能です。レンダリングブロックの解消には、クリティカルCSS（ファーストビューに必要なスタイルのみ）を`<head>`内にインライン化し、非クリティカルなCSSは非同期ロードに変更します。
INP（インタラクション応答）の改善方法
INPを悪化させるJavaScript実行パターン
INPが200msを超える主な原因はJavaScriptのメインスレッドブロックです。具体的には、①重い同期処理（大量DOM操作・複雑な計算）をイベントハンドラー内で実行している、②サードパーティスクリプト（チャットボット・広告タグ・アナリティクス）がメインスレッドを占有している、③大規模なReact/Vue/AngularアプリでVirtual DOM差分計算に時間がかかっているケースが挙げられます。ChromeのDevToolsにあるPerformanceパネルを使えば、どのJavaScript関数が何ms消費しているかをウォーターフォール図で確認できます。Longest Task（50ms超の長タスク）を特定し、それを優先的に分割・最適化することがINP改善の基本戦略です。
INP改善の実装テクニック
最も効果的な手法は「Long TaskのChunking（分割）」です。50ms超の処理を`setTimeout(() => {}, 0)`や`requestIdleCallback()`を使って複数の小タスクに分割することで、ブラウザがその間にユーザー入力を処理できるようにします。Webワーカーを活用して計算処理をメインスレッド外に移す方法も有効です。サードパーティスクリプトについては、Partytown等のライブラリを使ってWebワーカー実行に切り替えるか、`<script async defer>`属性でロードを遅延させます。Reactアプリであれば`useDeferredValue`や`useTransition`フックを活用して非緊急な状態更新の優先度を下げることが推奨されます。
CLS（累積レイアウトシフト）の改善方法
CLSが発生するよくある原因
CLS（Cumulative Layout Shift）は、ページ表示後にコンテンツが予期せず動く（レイアウトがズレる）現象の累積スコアです。0.1以下が良好とされています。CLSが高くなる代表的な原因は4つです。①幅・高さが指定されていない画像や動画要素——ブラウザが読み込み前にスペースを確保できないため、描画時にコンテンツが押し下げられます。②遅延ロードされる広告バナー——スクロール中に広告が挿入されてページが動きます。③Webフォントのロード完了時のフォントスワップ——システムフォントから目的フォントへの切り替え時にテキストがリフローします。④動的に挿入されるバナーやクッキー同意UI——ファーストビューの上部に割り込むと大きなCLSスコアになります。
CLS改善の実装方法
最も基本的な対策は画像・動画要素への`width`と`height`属性の明示的指定です。HTMLに`width=”800″ height=”450″`と記述するか、CSSで`aspect-ratio: 16/9`を設定することで、ブラウザが事前にスペースを確保します。広告枠については最大サイズの`min-height`を事前に確保するコンテナを用意します。Webフォントには`font-display: optional`（または`swap`）を設定し、フォールバックフォントとのメトリクス差を`size-adjust`プロパティで調整することでフォントスワップ時のリフローを最小化できます。クッキーバナーや通知バーは`position: fixed`または`sticky`で実装し、ドキュメントフローを乱さない設計にすることが重要です。
計測ツールの使い方
PageSpeed Insights（PSI）の読み方
PageSpeed Insights（PSI）はGoogleが提供する無料の計測ツールで、URLを入力するだけでLCP・INP・CLSのスコアとともに改善提案を確認できます。PSIのデータは「フィールドデータ（実ユーザーの計測値）」と「ラボデータ（Lighthouseによるシミュレーション）」の2種類があります。SEOへの実際の影響はフィールドデータ（過去28日間のCrUXデータ）が基準となるため、まずフィールドデータの3指標をすべて「良好（緑）」にすることを目標にします。ラボデータは改善施策の即時効果確認に使いますが、フィールドデータへの反映には28日程度かかるため、施策を打ったら4週間後に再計測する運用サイクルが理想です。
CrUXとSearch Consoleでの継続監視
Chrome User Experience Report（CrUX）はGoogleが公開する実ユーザー体験データベースで、Googleサーチコンソールの「ページエクスペリエンス」レポートからも参照できます。サーチコンソールでは「コアウェブバイタル」セクションでモバイル・PCそれぞれのURL別スコアを一覧確認でき、「低評価」「改善が必要」と判定されているURLのリストをエクスポートして優先対応リストを作成できます。また、BigQueryを使えばCrUXデータをより詳細に分析することも可能です。月次でサーチコンソールのレポートをチェックし、新たに「低評価」に転落したURLがないかを監視する体制を整えることが継続改善の基本です。
継続的な改善サイクルの設計
優先度マトリクスの作り方
コアウェブバイタルの改善は、「対象URLの流入数×指標の悪化度」で優先度を決めます。流入数が多い上位ランディングページでLCPが4秒超であれば最優先、流入がほとんどないページでCLSが0.2程度であれば後回しというように、インパクトベースで作業順序を決めます。サーチコンソールのクリック数データとコアウェブバイタルのURLリストをスプレッドシートで紐付けることで、この優先度マトリクスを30分程度で作成できます。エンジニアリングリソースは有限なため、1スプリントあたり1指標・3〜5URL程度に絞って集中的に改善するアプローチが実際には最も効果的です。
エンジニアとの協業フローの整備
マーケターがコアウェブバイタル改善をエンジニアに依頼する際は、「PSIのURL・指標名・スコア・Lighthouseの改善提案テキスト」をセットでチケット化することが重要です。「サイトが遅い」という曖昧な依頼ではなく、「https://example.com/lp のLCPが5.2秒。PSIの提案では『LCP要素（ヒーロー画像600KB）の最適化』が指摘されている。WebP変換とpreloadを対応してほしい」という具体性が必要です。改善後は同じURLで再度PSIを実行し、ラボデータでのスコア向上を確認してからリリース、28日後にフィールドデータでの最終確認を行うフローを標準化します。
よくある質問
- Q. コアウェブバイタルが低いと必ず検索順位が下がりますか？
- 必ずしも順位が下がるわけではありませんが、コンテンツの質・被リンク等の他要因が同等の場合に不利になります。Googleは「コアウェブバイタルはタイブレーカー」と表現しており、コンテンツ品質の高さが前提のうえで差別化要因として機能します。競合と品質が拮抗しているキーワードでは特に影響が出やすいため、改善しておくことが望ましいです。
- Q. スマートフォンとPCのどちらを優先して改善すればよいですか？
- Googleはモバイルファーストインデックスを採用しているため、モバイルのコアウェブバイタルを優先してください。特にBtoCサイトやメディアサイトではモバイルからの流入が70〜80%を占めることが多く、モバイルの改善効果が大きいです。ただし、BtoBサイトでPC流入が多い場合はPCも並行して対応します。
- Q. WordPressサイトでコアウェブバイタルを改善する手軽な方法はありますか？
- WP Rocket・LiteSpeed Cache等のキャッシュプラグインと、ShortPixel・Imagifyなどの画像最適化プラグインの組み合わせが最も手軽です。これだけでLCPとCLSを大幅改善できるケースが多いです。ただし、プラグインだけで対応できない場合（テーマのコード問題・JavaScriptの問題等）はエンジニアによる個別対応が必要です。
- Q. 改善後、検索順位への反映にはどのくらいかかりますか？
- CrUXのフィールドデータへの反映に約28日かかります。その後Googleがクロール・インデックス・評価を行うため、実際の順位変動が見えてくるまでは改善施策実施から1〜2ヶ月程度かかると想定してください。短期間で効果を期待するより、コンテンツ施策と並行して継続的に改善する姿勢が重要です。
まとめ
コアウェブバイタル（LCP・INP・CLS）はGoogleの公式ランキングシグナルであり、SEO効果とUX改善の両面で重要な指標です。LCPは画像最適化とサーバー応答速度改善、INPはJavaScriptの長タスク分割、CLSは要素サイズの事前確保が主要な改善アプローチです。計測にはPageSpeed InsightsとGoogleサーチコンソールを使い、フィールドデータのスコアをすべて「良好（緑）」にすることを目標に、月次の改善サイクルを回してください。流入数×指標悪化度の優先度マトリクスでエンジニアリングリソースを集中投下することが、最短で成果を出す方法です。
