Core Web Vitals は LCP / INP / CLS の 3 指標で UX を測る

なぜこれを学ぶか

Core Web Vitals は Google が「ページ体験」をランキングに組み込む際の主要シグナル。 ここを無視すると、コンテンツが良くてもユーザーがすぐに離脱して順位が伸びないし、競合と僅差の SERP では Core Web Vitals のスコアが順位の決め手になる。

EC・メディア・大規模サイトでは特に効果が大きく、改善 1 つで CTR と CV 率が同時に上がる「無料の UX 投資」として優先度が高い。

学ばないと起きること

学ぶメリット

• ユーザーの離脱を減らして、コンテンツ品質をフルに評価される土台を作れる
• Google のページ体験評価で他サイトより優位を取れる
• Search Console の Core Web Vitals レポートを正しく読み解いて、改善優先度が判断できる
• 「LCP は読み込み / INP は応答性 / CLS は視覚安定性」と即答できれば技術 SEO の基礎力を示せる

仕組み

3 指標の概要

「良好」評価には、ページのフィールドデータ（実ユーザーアクセス）の 75 パーセンタイルが基準値以下 になっている必要がある。

LCP（Largest Contentful Paint）

ページ内で最大の要素（多くの場合ヒーロー画像 / 大見出し / 動画サムネイル）が viewport 内に表示されるまでの時間。

INP（Interaction to Next Paint）

ユーザーがクリック / タップ / キー入力した時、画面が次に更新されるまでの時間。 2024 年 3 月に旧指標 FID（First Input Delay）を置き換えた。

CLS（Cumulative Layout Shift）

ページ読み込み中に要素が想定外に動くことで起きる視覚的不安定さの累積スコア。

キー概念

Core Web Vitals は「ページ体験」の一部

Google 公式立場: Core Web Vitals は単一のランキングシグナルではなく、ページ体験全体の中の 1 要素。

ページ体験を構成する他の要素:

• HTTPS 化されているか
• モバイル対応されているか
• 邪魔なインタースティシャル（ポップアップ）がないか
• 広告がコンテンツを邪魔していないか
• メインコンテンツとそれ以外が見分けやすいか

計測の 2 つの方法

開発時は Lab、SEO 評価は Field。両者は乖離することがあり、Field データが Search Console の判定に使われる。

完璧スコアを SEO 目的で追わない

Google 公式の警告:

Search Console の Core Web Vitals レポートで良い結果を得ても、検索結果のトップに必ず出るわけではない。スコアは SEO のためというより、ユーザー全体の体験を改善するためのもの。

Core Web Vitals は 順位を保証する指標ではなく、悪いと足を引っ張る守備指標。完璧スコアを目指すより、不良判定を避ける方が ROI が高い。

モバイル / デスクトップで別評価

Core Web Vitals はデバイス別に測定される。モバイルファーストインデックスにより、Google はモバイル版のスコアを主要シグナルとして使う。 モバイルが弱い場合、デスクトップが良好でも順位への影響はモバイルが優先する。

よくある誤解

実務での適用

改善優先順位の決め方

1. Search Console の Core Web Vitals レポートで「不良」「改善必要」の URL を特定
2. PageSpeed Insights で各 URL の Field データを確認、3 指標のどれが原因か特定
3. テンプレート単位で問題を切り分け（記事ページ全体 / 商品ページ全体 / トップページのみなど）
4. テンプレート単位で修正して、影響が広い順に対処

LCP 改善のクイックウィン

<!-- ヒーロー画像に fetchpriority -->
<img src="hero.webp" fetchpriority="high" alt="...">

<!-- preload で重要リソースを先取り -->
<link rel="preload" as="image" href="hero.webp">

<!-- WebP / AVIF に変換 -->
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="...">
</picture>

INP 改善のクイックウィン

// 重い処理は分割
async function processLargeData(items) {
  for (let i = 0; i < items.length; i++) {
    process(items[i]);
    if (i % 100 === 0) {
      // 100 件ごとにブラウザに制御を返す
      await new Promise(r => setTimeout(r, 0));
    }
  }
}

// React なら useDeferredValue
const deferredValue = useDeferredValue(searchQuery);

CLS 改善のクイックウィン

<!-- 必ず width / height を指定 -->
<img src="article.jpg" width="800" height="450" alt="...">

<!-- 広告枠は固定サイズで予約 -->
<div style="width: 300px; height: 250px;" id="ad-slot"></div>

トラブル別の対処

公式ソース

• Core Web Vitals と Google 検索結果について
• ページ エクスペリエンスについて
• LCP の最適化（web.dev）
• INP の最適化（web.dev）
• CLS の最適化（web.dev）
• Search Console Core Web Vitals レポート

自己テスト

これらの内容を採点付きで挑戦したい場合は、本ドメインのプロ試験で 5 問形式で確認できる。