Core Web Vitalsとは？LCP・INP・CLSの意味と目標値

はじめに

「Core Web Vitals（コアウェブバイタル）」はGoogleが定義したWebサイトのユーザー体験を測定する3つの指標です。2021年にSEOのランキング要因として採用されて以降、Web制作・運用の現場で必須の概念となりました。

本記事では、Core Web VitalsのLCP・INP・CLSそれぞれの定義・目標値・悪化する原因・改善方向を解説します。

Core Web Vitalsとは

Core Web Vitals（コアウェブバイタル）は、Googleが「良好なWebユーザー体験」を定量的に測定するために定義した指標群です。2020年に発表され、2021年6月からSEOのPage Experienceシグナルとして検索ランキングの評価要因に採用されました。

2025年時点では以下の3つの指標で構成されています。

• LCP（Largest Contentful Paint）：読み込みパフォーマンス

• INP（Interaction to Next Paint）：インタラクティビティ

• CLS（Cumulative Layout Shift）：視覚的安定性

Googleは「良好・要改善・不良」の3段階で各指標を評価し、SEOの評価に活用しています。

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

定義

LCPとは、ページの読み込み開始からビューポート（画面の見える範囲）内で最も大きなコンテンツ要素が描画されるまでの時間です。「最大のコンテンツ」は多くの場合、ヒーローセクションの画像・大きな見出しテキスト・動画のサムネイル等になります。

LCPはユーザーが「ページのメインコンテンツが読み込まれた」と感じる体験に最も近い指標として採用されています。

目標値

LCPが悪化する主な原因

原因1：サーバー応答時間（TTFB）が長い

サーバーの処理・ネットワーク遅延でHTMLの受け取りに時間がかかると、その後のすべての処理が遅れます。

原因2：レンダリングをブロックするリソース

CSS・JavaScriptが読み込まれるまでHTMLの描画が始まらない状態（レンダリングブロック）が発生しています。

原因3：LCP要素の画像が大きすぎる・最適化されていない

ヒーロー画像が圧縮されていない・WebP形式に変換されていない・適切なサイズでない場合、ダウンロードに時間がかかる。

原因4：LCP要素の優先度が低いです

ファーストビューの最大コンテンツであるにもかかわらず、遅延読み込み（lazy loading）が設定されていたり、優先度が低く設定されていたりします。

LCP改善の方向性

• 画像をWebP形式に変換し、適切なサイズに最適化します

• LCP要素の画像にはfetchpriority="high"を設定する（またはloading="eager"）

• サーバーの応答速度（TTFB）を改善します

• CDN・エッジ配信を活用してユーザーに近い場所から配信します

• Next.jsのnext/imageコンポーネントとpriorityプロパティを活用します

INP（Interaction to Next Paint）：次のペイントへのインタラクション

定義

INPとは、ユーザーがページ上でインタラクション（クリック・タップ・キーボード入力）を行ったときから、その操作に応じた画面の更新（次のペイント）が完了するまでの時間です。

2024年3月に旧指標のFID（First Input Delay）から置き換えられました。FIDが「最初の操作への応答遅延のみ」を測定したのに対し、INPはページ滞在中のすべてのインタラクションを通じた応答性を評価します。

目標値

INPが悪化する主な原因

原因1：メインスレッドの長いタスク

JavaScriptの実行がメインスレッドを長時間占有すると、ユーザーのインタラクションへの応答が遅れます。50ミリ秒を超えるタスクを「長いタスク（Long Task）」と呼ぶ。

原因2：重いサードパーティスクリプト

広告スクリプト・チャットウィジェット・分析ツール等のサードパーティスクリプトが大量のJavaScriptを実行し、メインスレッドをブロックすることがあります。

原因3：大量のDOMノード

ページに含まれるHTML要素（DOMノード）が多すぎると、操作のたびにブラウザの再レンダリングコストが高くなります。

INP改善の方向性

• 長いJavaScriptタスクを分割する（setTimeout・requestAnimationFrame等で非同期化）

• サードパーティスクリプトの数を最小限にします

• ReactのuseTransition・useDeferredValueでUI更新の優先度を制御します

• DOMのサイズを削減します

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

定義

CLSとは、ページの読み込み中にコンテンツが予期せず移動する「レイアウトシフト」の累積スコアです。読んでいた文章が突然ずれたり、タップしようとしたボタンが動いてしまったりする現象を数値化します。

CLSスコアは「シフトした要素のサイズ（ビューポートに占める割合）×移動距離（ビューポートに占める割合）」の積を累積したものです。0に近いほど良くなります。

目標値

CLSが悪化する主な原因

原因1：サイズを指定していない画像・動画

HTMLで画像のwidth・heightを指定しないと、画像が読み込まれたときにその分のスペースが突然確保されてレイアウトシフトが発生します。

原因2：Webフォントの切り替え

フォールバックフォント（デフォルトフォント）でテキストを表示した後、Webフォントが読み込まれてフォントサイズが変わりレイアウトシフトが発生します（FOUT: Flash of Unstyled Text）。

原因3：動的に挿入されるコンテンツ

広告・バナー・チャットウィジェット・クッキー同意バナーが、ページ読み込み後に挿入されて既存コンテンツを押し下げます。

原因4：アニメーション・トランジション

top・left・width・heightプロパティを使ったアニメーションはレイアウトシフトを引き起こす。代わりにtransform・opacityを使うことでGPUで処理され、レイアウトシフトを発生させません。

CLS改善の方向性

• <img>タグに必ずwidthとheightを指定する（またはCSSのaspect-ratioを使用）

• Webフォントにはfont-display: optionalまたはfont-display: swapを適切に設定する

• 動的コンテンツ（広告等）のスペースを事前に確保する

• アニメーションにはtransform・opacityを使用する

• next/fontを使用してフォントの最適化を自動化する

Field Data vs Lab Data：2種類のCore Web Vitals計測

Core Web Vitalsには2種類の計測データがあります。

Field Data（実フィールドデータ）

実際のユーザーのブラウザから収集されたデータです。Googleはこちらを検索ランキングの評価に使用します。

• 確認場所：Google Search Console「Core Web Vitals」レポート

• 特徴：実際のユーザー環境・通信速度・デバイスを反映しています

• 遅延：データの収集・反映には数週間かかる

Lab Data（ラボデータ）

PageSpeed InsightsやLighthouseが特定の条件（仮想のモバイルデバイス・通信速度）でシミュレーションした計測データです。

• 確認場所：PageSpeed Insights・Chrome DevToolsのLighthouse

• 特徴：即座に確認できる・再現性が高いです

• 注意：実際のユーザーのField Dataとは値が異なることがあります

Search ConsoleのCore Web Vitalsレポートを「良好」にすることが、SEO的な目標になります。PageSpeed InsightsのスコアはLab Dataとして参考にしながら、最終的にはField Dataの改善を目指します。

Core Web VitalsとSEO：実際の影響度

Googleは「コンテンツの関連性と品質が最優先であり、Core Web Vitalsはタイブレーカー（同等のコンテンツ間での差別化要因）」と述べています。

つまり「Core Web Vitalsが良好なだけで上位表示できる」わけではないが、コンテンツの質が拮抗する競合との差別化において、Core Web Vitalsのスコアが決定的な役割を果たすことがあります。

まとめ

Core Web VitalsはLCP（読み込み速度・目標2.5秒以下）・INP（操作応答性・目標200ms以下）・CLS（視覚安定性・目標0.1以下）の3指標で構成されます。

SEOランキングの直接的な評価要因であるとともに、ユーザー体験の品質を表す指標として、Webサイトの競争力を判断する基準になっています。

次の記事では、Core Web Vitalsを計測するGoogleのツール「Lighthouse」の使い方を解説します。