Webフロントエンド - 基礎

Core Web Vitals こあうぇぶばいたるず

LCPFIDCLSINPページエクスペリエンスSEO

Core Web Vitalsについて教えて

簡単に言うとこんな感じ！

Googleが決めた「Webサイトの快適さを測る3つの通知表」だよ！「表示が速いか」「操作に反応するか」「ページがガタつかないか」を数値で採点して、SEOの順位にも影響するんだ！

Core Web Vitalsとは

Core Web Vitals（コアウェブバイタルズ） とは、Googleが2020年に発表した「Webページのユーザー体験（UX）を定量的に測るための指標セット」です。「Vital（バイタル）」は生命兆候・健康状態を意味する医療用語で、Webサイトの健康状態を診断するものとしてこの名前が付けられました。

具体的には LCP（Largest Contentful Paint）・FID（First Input Delay）・CLS（Cumulative Layout Shift） の3指標で構成されていましたが、2024年3月からFIDに代わり INP（Interaction to Next Paint） が正式採用されています。これらは「ページの読み込み速度」「操作への応答性」「視覚的な安定性」という、ユーザーが実際に感じる体験を数値化したものです。

重要なのは、2021年6月よりGoogleの検索順位アルゴリズム「ページエクスペリエンスシグナル」に組み込まれた 点です。つまりCore Web Vitalsのスコアが低いサイトは、SEO（検索エンジン最適化）の観点でも不利になります。システム発注やサイトリニューアルを検討する際に、必ず確認すべき品質基準のひとつです。

3つの指標の意味と基準値

各指標には「良好／要改善／不良」の3段階の評価基準があります。

指標	正式名称	測定対象	良好	要改善	不良
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超

各指標のイメージをつかむ

LCP（エルシーピー）：「ページを開いてメインの写真や文章が見えるまでの時間」。新聞を開いて一面記事が見えるまでの速さ、と考えるとわかりやすい
INP（アイエヌピー）：「ボタンを押してから画面が変わるまでの全体的な速さ」。自動ドアに手をかざしてから扉が動くまでのタイムラグのイメージ
CLS（シーエルエス）：「読もうとしたら突然ページがずれて別のリンクを押してしまった」という体験を数値化したもの。値が低いほど安定

「75パーセンタイル」ルール

Core Web Vitalsの評価は、サイトへの全アクセスのうち 上位75%（最も遅い側から数えた75番目） の値で判定されます。つまり「一部のユーザーだけ快適」ではなく、大多数のユーザーに良い体験を届けられているか が問われます。

歴史と背景

2018年頃：Googleが「Speed Update」を導入し、モバイルでの読み込み速度を検索順位の要因に追加
2020年5月：GoogleがCore Web Vitalsを発表。LCP・FID・CLSの3指標を定義
2021年6月：「ページエクスペリエンスアップデート」としてCore Web VitalsがGoogleの検索順位アルゴリズムに正式組み込み
2022年〜：INP（Interaction to Next Paint）が「実験的指標」として追加。FIDの後継候補として検討開始
2024年3月：INPが正式指標となり、FIDを置き換え。現在の3指標（LCP・INP・CLS）体制へ

背景として、モバイルインターネットの普及により「遅いWebサイト」がユーザー離れを招くビジネスリスクとして顕在化したことがあります。Googleは「Webを速く・快適にする」というミッションのもと、これらの指標を検索順位と連動させることで、Web全体の品質底上げを狙っています。

測定ツールと改善の進め方

Core Web Vitalsは複数のツールで無料測定できます。

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

ラボデータ：ツールが人工的な環境でシミュレーションした値。素早く計測でき開発中の確認に向く。ただしSEO評価には直接使われない
フィールドデータ：実際のユーザーがChromeでアクセスした際の実測値をGoogleが収集したもの。Googleの検索順位判定に使われるのはこちら

発注時・リニューアル時のチェックポイント

発注する立場として、以下を確認・要件定義に盛り込むことを推奨します：

✅ PageSpeed Insightsで現行サイトのスコアを事前確認
✅ 納品物の要件に「LCP 2.5秒以内」等の数値目標を明記
✅ 画像はWebP形式・適切なサイズで納品されるか確認
✅ 広告や外部スクリプトのCLS影響を考慮しているか確認
✅ 納品後のSearch ConsoleモニタリングをKPIに含める

規格・仕様	内容
W3C Paint Timing	LCPの計測に使われるブラウザAPI仕様
W3C Event Timing API	INP・FIDの計測に使われるブラウザAPI仕様
W3C Layout Instability API	CLSの計測に使われるブラウザAPI仕様