Core Web Vitals完全ガイド｜LCP・INP・CLSの改善方法

① Core Web Vitalsとは何か

Core Web Vitalsは、Googleがユーザー体験を測る上で重視する3つの指標「LCP」「INP」「CLS」の総称です。2024年3月に、それまでの指標だった「FID（First Input Delay）」が廃止され、「INP（Interaction to Next Paint）」に置き換わりました。

② LCP（Largest Contentful Paint）の改善

LCPは、ページ内で最も大きな要素（多くの場合はメイン画像やヒーロー画像、見出しテキスト）が表示されるまでの時間です。「ページが読み込まれた」とユーザーが体感するタイミングに最も近い指標とされています。

主な悪化原因

具体的な改善策

実装例

<!-- LCP画像への設定例 -->
<img src="hero.jpg" fetchpriority="high" width="1200" height="600" alt="メインビジュアル">

<!-- 画面外の画像（LCP対象外）には遅延読み込みを付ける -->
<img src="below-fold.jpg" loading="lazy" width="800" height="400" alt="補足画像">

③ INP（Interaction to Next Paint）の改善

INPは、ユーザーがクリック・タップ・キー入力などの操作を行ってから、画面に視覚的な反応が返るまでの時間です。訪問中に発生した全ての操作のうち、ほぼ最悪値（高いパーセンタイル）が採用されるため、「1回でも重い処理があると悪化する」厳しい指標です。

主な悪化原因

具体的な改善策

実装例：長いタスクの分割

// 悪い例：1つの重い処理でメインスレッドを占有
function heavyProcess(items) {
  items.forEach(item => process(item)); // 数千件を一気に処理
}

// 改善例：処理を分割してブラウザに制御を返す
function processInChunks(items, index = 0) {
  const chunkSize = 50;
  const chunk = items.slice(index, index + chunkSize);
  chunk.forEach(item => process(item));
  if (index + chunkSize < items.length) {
    setTimeout(() => processInChunks(items, index + chunkSize), 0);
  }
}

④ CLS（Cumulative Layout Shift）の改善

CLSは、ページ読み込み中に要素が突然動く（レイアウトがずれる）度合いを数値化した指標です。「読もうとしたら広告が挿入されてボタンを誤タップした」といった経験を防ぐための指標といえます。

主な悪化原因

具体的な改善策

実装例

/* フォント切り替え時のずれを防ぐ */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

/* 動的挿入要素の領域を事前確保 */
.ad-slot { min-height: 250px; }

/* aspect-ratioで画像比率を保持（width/height指定が難しい場合） */
img.responsive { width: 100%; height: auto; aspect-ratio: 16 / 9; }

⑤ 測定ツールの使い分け

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

ラボデータは、決められた条件（回線速度・端末スペックを固定）で1回だけ測定したシミュレーション値です。再現性が高く、改善前後の比較に向いています。

フィールドデータは、実際にサイトを訪れた人のブラウザから集計された実測値（Chrome UX Reportが元データ）です。過去28日間の集計のため反映に時間差があり、訪問者の回線環境やデバイスに数値が左右されます。

⑦ よくある改善の落とし穴

⑧ よくある質問（FAQ）

関連コンテンツ