コアウェブバイタル対策ガイド｜LCP・CLS・INPの改善方法

コアウェブバイタルとは何か？なぜ重要なのか？

コアウェブバイタル（Core Web Vitals）とは、Googleが定めた「ユーザーがWebページ上で得る体験の品質」を測定するための3つの指標です。2021年にランキング要因として導入されて以降、年々その重要性が増し、2026年現在ではSEO対策において必須の取り組みとなっています。

Googleの公式発表によると、コアウェブバイタルの基準を満たしているページは、そうでないページと比較して直帰率が24%低下するというデータが示されています。さらに、ページの読み込み速度が1秒から3秒に低下するだけで、直帰率は32%増加するとも言われています。

つまり、コアウェブバイタルの改善は「Googleのため」ではなく「ユーザーのため」であり、結果としてコンバージョン率の向上、離脱率の低下、SEO順位の改善につながるのです。

3つの指標を詳しく理解する

コアウェブバイタルは以下の3つの指標で構成されています。それぞれの意味と基準値を正確に理解しましょう。

LCP（Largest Contentful Paint）：最大コンテンツの描画

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

良好（Good）：2.5秒以内
改善が必要（Needs Improvement）：2.5秒〜4.0秒
不良（Poor）：4.0秒超

LCPの対象となる要素には、<img>要素、<video>要素のポスター画像、CSSのbackground-imageで表示される画像、テキストブロック（<h1>、<p>など）が含まれます。対象要素はGoogleが自動的に判定します。

CLS（Cumulative Layout Shift）：累積レイアウトシフト

CLSは、ページの読み込み中にレイアウトがどれだけ「ずれる」かを数値化した指標です。広告やWebフォントの遅延読み込み、画像のサイズ未指定などが原因で、読んでいたテキストが突然ずれたり、クリックしようとしたボタンの位置が動いたりする現象を測定します。

良好（Good）：0.1以下
改善が必要（Needs Improvement）：0.1〜0.25
不良（Poor）：0.25超

CLSはユーザーの誤クリックやストレスに直結するため、コンバージョン率への影響が特に大きい指標です。あるECサイトの事例では、CLSを0.25から0.05に改善したことで、カート追加率が15%向上したという報告があります。

INP（Interaction to Next Paint）：インタラクション遅延

INPは2024年3月にFID（First Input Delay）に代わって導入された新しい指標です。FIDが「最初のインタラクションの遅延」だけを測定していたのに対し、INPはページ滞在中のすべてのインタラクション（クリック、タップ、キーボード入力）の遅延を測定し、最も遅延の大きいインタラクションをスコアとして報告します。

良好（Good）：200ミリ秒以内
改善が必要（Needs Improvement）：200ミリ秒〜500ミリ秒
不良（Poor）：500ミリ秒超

INPはFIDよりも厳しい指標であり、導入直後は多くのサイトで「改善が必要」と判定されました。特にJavaScriptが重いサイトやサードパーティスクリプト（広告、チャットウィジェット、アナリティクスなど）が多いサイトで問題が顕著です。

コアウェブバイタルの測定ツール

改善を始める前に、現状を正確に測定する必要があります。以下の主要ツールを目的に応じて使い分けましょう。

PageSpeed Insights（PSI）

Googleが提供する無料の測定ツールで、URLを入力するだけでコアウェブバイタルのスコアが確認できます。重要なのは、PSIには「フィールドデータ」と「ラボデータ」の2種類があることです。

フィールドデータ：実際のユーザーが体験した数値（Chrome User Experience Reportから取得）。SEOに影響するのはこちらです。
ラボデータ：シミュレーション環境での測定値。開発時のデバッグに使用します。

Google Search Console

「ページエクスペリエンス」レポートで、サイト全体のコアウェブバイタルの状況を一覧で確認できます。「良好」「改善が必要」「不良」のURL数がグラフ表示され、問題のあるURLグループを特定できます。

Chrome DevTools

Chromeブラウザの開発者ツールの「Performanceパネル」「Lighthouseパネル」で、詳細なパフォーマンス分析が可能です。LCPの対象要素の特定、CLSが発生している箇所の可視化、INPの原因となるJavaScript処理の特定に利用します。

Web Vitals Chrome拡張機能

リアルタイムでコアウェブバイタルのスコアを表示するChrome拡張機能です。ページを閲覧しながらスコアを確認できるため、開発・テスト時に便利です。

LCPの改善方法

LCPが2.5秒を超えている場合、以下の対策を優先順位の高い順に実行しましょう。

画像の最適化（最も効果的）

LCPの対象要素が画像の場合、画像の最適化が最も効果的な改善策です。

次世代フォーマットの使用：WebPやAVIFフォーマットに変換し、ファイルサイズを30〜50%削減。<picture>タグでフォールバックを設定します。
適切なサイズの画像を配信：srcset属性でデバイスの画面幅に適した画像を配信。4K画面用の画像をスマホに配信するのは無駄です。
LCP画像のプリロード：<link rel="preload" as="image" href="hero.webp">でヒーロー画像の読み込みを優先させます。
遅延読み込みの適用範囲に注意：ファーストビュー内の画像にlazy loadingを設定してしまうとLCPが悪化します。LCP対象の画像にはloading="lazy"を設定しないでください。

サーバー応答時間の短縮

TTFB（Time to First Byte）が遅い場合、LCPも必然的に遅くなります。サーバーサイドの改善策として、CDN（Content Delivery Network）の導入、サーバーのスペック向上、データベースクエリの最適化、サーバーサイドキャッシュの活用が有効です。

CSSの最適化

レンダリングブロッキングCSSを最小化するため、クリティカルCSS（ファーストビューの表示に必要なCSS）をインライン化し、残りのCSSは非同期で読み込みます。未使用CSSの除去も効果的です。Chrome DevToolsのCoverageパネルで未使用CSSの割合を確認できます。

CLSの改善方法

CLSの改善は比較的取り組みやすく、効果が大きい施策です。

画像・動画のサイズ指定

すべての画像と動画にwidth属性とheight属性を明示的に指定します。CSSのaspect-ratioプロパティを使えば、レスポンシブデザインでもアスペクト比を維持しながらサイズを可変にできます。

Webフォントの最適化

Webフォントの読み込み遅延はCLSの主要原因の一つです。font-display: swapを指定し、フォント読み込み完了前はシステムフォントで代替表示させます。さらに、<link rel="preload" as="font">でフォントファイルをプリロードすることで、フォント切り替え時のレイアウトシフトを最小化できます。

広告枠・動的コンテンツの領域確保

広告バナーや動的に読み込まれるコンテンツ（レコメンドウィジェット、SNSの埋め込みなど）には、あらかじめ表示領域をCSS（min-height）で確保しておきます。これにより、コンテンツが読み込まれた際のレイアウトシフトを防止できます。

INPの改善方法

INPの改善はやや技術的な知識が必要ですが、効果は非常に大きいです。

JavaScript処理の最適化

INP悪化の主原因は、重いJavaScript処理がメインスレッドをブロックすることです。

長いタスクの分割：50ミリ秒以上のタスク（Long Task）をrequestIdleCallbackやsetTimeoutを使って分割し、メインスレッドのブロックを解消します。
不要なJavaScriptの排除：Chrome DevToolsのCoverageパネルで未使用のJavaScriptを特定し、削除またはコード分割します。
サードパーティスクリプトの遅延読み込み：広告、チャットウィジェット、アナリティクスなどのスクリプトをdeferやasyncで遅延読み込みします。

イベントハンドラーの効率化

クリックやスクロールイベントのハンドラー内で重い処理を行わないようにします。アニメーションにはrequestAnimationFrameを使い、スクロールイベントにはデバウンス処理を適用しましょう。

WordPress固有の対策

WordPressサイトでINPが悪化しやすい原因と対策は以下の通りです。

プラグインの過剰利用：不要なプラグインを削除し、必要なプラグインも軽量な代替品がないか検討。
重いテーマ：ページビルダー系テーマは便利ですが、大量のJavaScriptを生成します。パフォーマンスを重視するならブロックエディタベースの軽量テーマに移行を検討。
キャッシュプラグインの活用：WP Super CacheやW3 Total Cacheで静的HTMLを生成し、サーバー処理を軽減。

改善の優先順位と進め方

コアウェブバイタルの改善は、以下の優先順位で進めるのが最も効率的です。

まずCLSを改善：画像サイズ指定やフォント最適化など、比較的簡単な施策で効果が大きい。
次にLCPを改善：画像最適化とプリロードでほとんどのケースで改善可能。
最後にINPを改善：JavaScript最適化が必要で技術難易度は高いが、ユーザー体験への影響は最も大きい。

改善作業は「測定→原因特定→改善→再測定」のサイクルで進めます。一度に複数の変更を行うと、何が効果的だったのか判断できなくなるため、一つずつ変更し、その都度効果を検証することが重要です。

コアウェブバイタルの改善にお困りの方は、VOLTのリニューアルサービスをご検討ください。パフォーマンスを重視した高速表示のWebサイトを構築いたします。まずは無料お見積もりからお気軽にどうぞ。