Core Web Vitals完全ガイド2026

Core Web Vitals（CWV）は、実際のユーザー体験を測るGoogleの指標群です。読み込み速度、操作への反応、表示の安定性を対象とします。2021年5月からページエクスペリエンスの一部となり、検索順位にも影響します。

3つの指標はいずれもURL単位で評価されます。トップページのスコアが良くても、商品ページの評価は上がりません。Googleが使うのは、ラボのシミュレーションではなくChromeユーザーエクスペリエンスレポート（実ユーザーのデータ）です。

zoom_in

Core Web Vitalsとは

歴史：FIDからINPへ

GoogleがCore Web Vitalsを導入したのは2020年で、指標はLCP、FID（First Input Delay）、CLSの3つでした。FIDが測るのは最初のタップの遅延だけです。有用ではあるものの、ページの操作性の一部しか捉えていませんでした。

LCP — Largest Contentful Paint

LCPは、ページ内で最も大きなコンテンツ要素の描画が完了した時点を記録します。多くの場合は、メインビジュアルの画像、記事のカバー画像、大きなH1見出しのいずれかです。

LCPが遅くなる主な原因

• TTFBが遅い（サーバー、CDN、キャッシュなし）。LCP時間の最大40%を占めます
• メインビジュアルの画像が優先されていない（fetchpriority="high"がない）
• メインビジュアルの画像をプリロードしていない（<link rel="preload">）
• レンダリングをブロックするCSS/JSで最初の描画が遅れる
• 画像が大きすぎる（WebP/AVIFを使っていない、srcsetがない）
• LCP要素がJavaScriptの描画待ちになっている（LCPの時点でReactのSSRが完了していない）

<!-- Prioritise the LCP image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

<img
  src="/hero.webp"
  alt="Hero"
  fetchpriority="high"
  loading="eager"
  decoding="async"
  width="1280"
  height="720"
/>

INP：Interaction to Next Paint（操作への反応）

INPは、ユーザーの操作（クリック、キー入力、タップ）から、画面が次に描画されるまでの遅延を測ります。FIDと違い、セッション中のすべての操作を追跡し、最も悪い値を採用します（外れ値は除外）。

INPを悪化させる要因

• 50ミリ秒を超えるLong Taskがメインスレッドを占有し、入力を処理できない
• 重いイベントハンドラー（Reactの同期的なsetState、DOMの一括更新など）
• scheduler.yield()やsetTimeout(0)でLong Taskを分割していない
• サードパーティスクリプト（チャット、広告、アクセス解析）がメインスレッドを使う
• CSSのtransform/opacityではなくJavaScriptでアニメーションしている

// Breaking up a Long Task with scheduler.yield()
async function processLargeList(items) {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i]);
    // Yield to the main thread every 50 items
    if (i % 50 === 0) {
      await scheduler.yield();
    }
  }
}

CLS — Cumulative Layout Shift

CLSは単位のない指標で、ページ要素が予期せず動いた量の合計を表します。計算式は影響範囲 × 移動距離です。ユーザーが押したボタンの移動はカウントされず、ユーザーの操作と無関係に動いた要素だけが対象です。

CLSの主な発生源

• widthとheight属性のない画像。読み込み前にブラウザーがサイズを把握できない
• font-display: optionalやswapを指定していないウェブフォント。FOUTでテキストがずれる
• 動的に挿入されるバナーやページ上部のCookie通知
• transformではなくtop/left/marginを変えるCSSアニメーション
• スペースを確保していない広告（コンテナーにmin-heightがない）

/* Reserve space for an ad slot */
.ad-container {
  min-height: 250px;
  width: 100%;
}

/* Animation without CLS: transform and opacity only */
.card:hover {
  transform: translateY(-4px);
  /* Wrong: margin-top: -4px — this shifts layout */
}

検索順位への影響

GoogleはCWVについて、検索順位に関わるページエクスペリエンスのシグナルの1つだと認めています。ただし同点時の決め手であって、主要な要因ではありません。コンテンツが優れていてCWVが悪いページは、CWVが優れていてコンテンツが弱いページより上位に表示されます。

間接的な効果のほうが重要です。速いページは直帰率を下げ、セッションの深さとコンバージョンを高めます。CWVはSEOよりも、ビジネス面の根拠のほうが強力です。Amazonの調査では、LCPが100ミリ秒遅くなると売上が1%減少したとされています。

Core Web Vitalsの測定方法

データには2種類あります。ラボデータ（シミュレーション：Lighthouse、WebPageTest）とフィールドデータ（実ユーザー：CrUX、GSC）です。Googleが順位の判断に使うのはフィールドデータで、ラボデータは診断用です。

診断ツール

// web-vitals v4 — collect real CWV
import { onLCP, onINP, onCLS } from 'web-vitals';

function sendToAnalytics({ name, value, id }) {
  // Send to GA4
  gtag('event', name, {
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    metric_id: id,
    metric_delta: value,
  });
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

最適化チェックリスト

zoom_in

LCP

• メインビジュアルの画像にfetchpriority="high"を付け、loading="lazy"を外す
• <head>内に、メインビジュアル用の<link rel="preload" as="image">を追加する
• 画像をWebPまたはAVIFに変換し、srcsetを設定する
• TTFBを800ミリ秒以下に短縮する（CDN、キャッシュ、エッジSSR）
• レンダリングをブロックするスクリプトを<head>から外す（async/defer/module）
• 静的アセットにCache-Control: max-age=31536000を設定する

INP

• Chrome DevTools → Performance → Main ThreadでLong Taskを調べる
• 50ミリ秒を超えるタスクをscheduler.yield()やsetTimeout(0)で分割する
• input/scrollハンドラーをデバウンスする（16〜100ミリ秒）
• Reactを最適化する（useMemo、useCallback、React.memo、リストの仮想化）
• サードパーティスクリプトをWeb Workerへ移すか、LCPの後に読み込む
• CSSアニメーションはtransformとopacityだけにする

CLS

• すべての<img>要素にwidthとheightを指定し、ブラウザーにスペースを確保させる
• サイズが不明なコンテナーにはaspect-ratioを使う
• 重要なフォントにはfont-display: optionalを設定する
• 広告枠や動的コンテンツにmin-heightを確保する
• 通知（Cookie、バナー）はページ上部ではなく下部に置く
• FOUTを確認する（フォールバックのないフォントは読み込み時にテキストがずれる）