Core Web Vitalsの理解

Core Web Vitalsは、Googleが提唱する、優れたユーザー体験を提供するためのWebパフォーマンス指標です。2024年現在、主に3つの指標があります。

LCP (Largest Contentful Paint)

LCPは、ページの主要なコンテンツが表示されるまでの時間を測定します。

良好なLCPの基準

良好: 2.5秒以下
改善が必要: 2.5秒〜4.0秒
不良: 4.0秒以上

LCPを改善する方法

// 画像の遅延読み込み
const images = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      imageObserver.unobserve(img);
    }
  });
});
 
images.forEach(img => imageObserver.observe(img));

FID (First Input Delay) / INP (Interaction to Next Paint)

FIDは、ユーザーが最初にページと対話してから、ブラウザがその対話に応答するまでの時間を測定します。2024年3月から、INPがFIDに代わってCore Web Vitalsの指標となりました。

良好なINPの基準

良好: 200ミリ秒以下
改善が必要: 200〜500ミリ秒
不良: 500ミリ秒以上

INPを改善する方法

// 長いタスクを分割
async function processLargeArray(array) {
  const chunkSize = 100;
  
  for (let i = 0; i < array.length; i += chunkSize) {
    const chunk = array.slice(i, i + chunkSize);
    await processChunk(chunk);
    
    // ブラウザに制御を返す
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

CLS (Cumulative Layout Shift)

CLSは、ページの読み込み中に発生する予期しないレイアウトシフトの量を測定します。

良好なCLSの基準

良好: 0.1以下
改善が必要: 0.1〜0.25
不良: 0.25以上

CLSを改善する方法

/* 画像のアスペクト比を設定 */
img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}
 
/* フォントの読み込み中のレイアウトシフトを防ぐ */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
}

測定ツール

Chrome DevTools

DevToolsを開く（F12）
Performanceタブを選択
録画を開始してページをリロード
Core Web Vitalsの指標を確認

Lighthouse

# CLIでLighthouseを実行
npm install -g lighthouse
lighthouse https://example.com --view

Web Vitals JavaScript Library

import {getLCP, getFID, getCLS} from 'web-vitals';
 
getCLS(console.log);
getFID(console.log);
getLCP(console.log);

まとめ

Core Web Vitalsの改善は、ユーザー体験の向上だけでなく、SEOにも大きな影響を与えます。各指標の意味を理解し、適切な改善策を実施することが重要です。

次章では、画像の最適化について詳しく解説します。