Core Web Vitals

Core Web Vitals とは

Core Web Vitals は、Google が定義した Web ページのユーザー体験を測定する 3 つの指標である。Google 検索のランキング要因に含まれており、SEO に直接影響する。

3 つの指標

指標	測定対象	良好	要改善	不良
LCP (Largest Contentful Paint)	最大コンテンツの表示速度	≤ 2.5 秒	≤ 4.0 秒	> 4.0 秒
INP (Interaction to Next Paint)	インタラクションの応答速度	≤ 200 ミリ秒	≤ 500 ミリ秒	> 500 ミリ秒
CLS (Cumulative Layout Shift)	レイアウトのずれ	≤ 0.1	≤ 0.25	> 0.25

LCP の改善

LCP は「ページの主要コンテンツが表示されるまでの時間」。

<!-- ✅ LCP 要素 (ヒーロー画像) を優先読み込み -->
<img src="hero.webp" fetchpriority="high" alt="Hero" />

<!-- ✅ プリロードで早期取得 -->
<link rel="preload" as="image" href="hero.webp" />

画像を WebP/AVIF に変換してファイルサイズを 30〜50% 削減する、fetchpriority="high" で LCP 要素を優先取得する、CDN (CloudFront) でレイテンシを削減する、SSG/SSR でサーバーで HTML を生成するといった改善策がある。

INP の改善

INP は「ユーザーの操作 (クリック、タップ) から画面が更新されるまでの時間」。

// ❌ メインスレッドをブロック
button.onclick = () => {
  const result = heavyComputation(); // 500ms ブロック
  updateUI(result);
};

// ✅ Web Worker で分離
button.onclick = () => {
  worker.postMessage(data);
};
worker.onmessage = (e) => updateUI(e.data);

CLS の改善

CLS は「ページ読み込み中にレイアウトがずれる量」。

/* ✅ 画像のサイズを事前に確保 */
img { width: 100%; aspect-ratio: 16 / 9; }

/* ✅ フォントの読み込みでレイアウトがずれない */
@font-face {
  font-family: 'MyFont';
  src: url('font.woff2');
  font-display: swap;
  size-adjust: 100%;
}

測定ツール

ツール	種類	データ
PageSpeed Insights	ラボ + フィールド	CrUX データ
Chrome DevTools (Lighthouse)	ラボ	シミュレーション
web-vitals (npm)	フィールド	実ユーザーデータ
Search Console	フィールド	CrUX データ

CloudFront での最適化

Brotli 圧縮で HTML/CSS/JS のサイズを削減し、HTTP/2 で並列リクエストを実現する。キャッシュで TTFB を短縮し、エッジロケーションでレイテンシを削減する。

全体像を把握するには関連書籍も有用。