Zenn
⚡

フロントエンドパフォーマンス測定の基本：Core Web Vitalsの3つの指標とChromeでの計測方法

に公開
Chrome
JavaScript
TypeScript
Web
webvitals
tech

はじめに

フロントエンドのパフォーマンス測定について調べてみると、情報が断片的で「何をどう測定すればいいのか」が分かりにくいと感じませんか？

本記事では、Googleが重視するフロントエンドパフォーマンスの3つの指標「Core Web Vitals」について、概要→測定方法→改善例の順で分かりやすく解説します。

Core Web Vitalsとは？Googleが重視する3つの指標

Googleが2020年に発表した「Core Web Vitals」は、ユーザー体験を測定する3つの重要な指標です。

1. LCP（Largest Contentful Paint）- 読み込み速度

何を測定？
ページの主要コンテンツ（大きな画像やテキスト）が表示されるまでの時間

良好な値

  • 良好：2.5秒以下
  • 要改善：2.5秒〜4.0秒
  • 不良：4.0秒超

主な影響要因

  • サーバーの応答時間
  • 画像サイズ・形式
  • CSS・JavaScriptの読み込み

2. INP（Interaction to Next Paint）- 応答性

何を測定？
ユーザーがクリックやタップした時の応答速度

良好な値

  • 良好：200ミリ秒以下
  • 要改善：200ミリ秒〜500ミリ秒
  • 不良：500ミリ秒超

主な影響要因

  • JavaScriptの処理時間
  • メインスレッドの占有状況
  • DOM操作の複雑さ

3. CLS（Cumulative Layout Shift）- 視覚的安定性

何を測定？
ページ読み込み中の予期しないレイアウト変化

良好な値

  • 良好：0.1以下
  • 要改善：0.1〜0.25
  • 不良：0.25超

主な影響要因

  • サイズ未指定の画像
  • 動的に挿入される広告
  • Webフォントの読み込み

Chromeでの測定方法

1. Chrome DevToolsで詳細分析

基本的な使い方

  1. F12でDevToolsを開く
  2. 「Performance」タブをクリック
  3. 記録ボタン（●）を押してページをリロード
  4. 結果を確認

何が分かる？

  • 各指標の詳細な内訳
  • 問題の原因特定
  • 改善すべき優先順位

2. PageSpeed Insightsで全体評価

使い方

  1. PageSpeed Insightsにアクセス
  2. URLを入力して分析実行

何が分かる？

  • 実際のユーザーデータ（フィールドデータ）
  • 改善提案
  • モバイル・デスクトップ別の評価

3. Web Vitals Chrome拡張機能でリアルタイム監視

使い方

  1. Chrome Web Storeから「Web Vitals」拡張機能をインストール
  2. ページを開くだけで自動測定

何が分かる？

  • リアルタイムの指標値
  • 色分けによる状態表示（良好/要改善/不良）

実際の改善例

LCPの改善例

画像最適化

<!-- 改善前 -->
<img src="large-image.jpg" alt="画像">

<!-- 改善後 -->
<img src="optimized-image.webp" 
     width="800" height="600"
     fetchpriority="high"
     alt="画像">

重要リソースのプリロード

<link rel="preload" as="image" href="hero-image.webp" fetchpriority="high">
<link rel="preload" as="font" href="main-font.woff2" crossorigin>

INPの改善例

長いタスクの分割

// 改善前：重い処理でブロック
function processData(data) {
  data.forEach(item => heavyProcess(item));
}

// 改善後：処理を分割
async function processData(data) {
  for (let i = 0; i < data.length; i++) {
    heavyProcess(data[i]);
    
    // 50個ごとにメインスレッドを解放
    if (i % 50 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

デバウンス処理

// 検索入力の最適化
function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

const debouncedSearch = debounce(performSearch, 300);
searchInput.addEventListener('input', debouncedSearch);

Web Workerで重い処理をバックグラウンド実行

// メインスレッド側
const worker = new Worker('calculation-worker.js');

function processLargeData(data) {
  // 重い処理をWeb Workerに移譲
  worker.postMessage({ type: 'PROCESS', data });
}

worker.onmessage = (event) => {
  const { result } = event.data;
  // UI更新はメインスレッドで実行
  updateUI(result);
};

// calculation-worker.js
self.onmessage = (event) => {
  const { type, data } = event.data;
  
  if (type === 'PROCESS') {
    // 重い計算処理をバックグラウンドで実行
    const result = data.map(item => performHeavyCalculation(item));
    self.postMessage({ result });
  }
};

CLSの改善例

画像サイズの事前指定

/* 改善前 */
img {
  width: 100%;
}

/* 改善後 */
img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

フォント読み込み最適化

@font-face {
  font-family: 'MainFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* フォールバック表示 */
}

効果的な測定・改善のワークフロー

1. 現状把握

  • PageSpeed Insightsで全体評価
  • 最も問題のある指標を特定

2. 詳細分析

  • Chrome DevToolsで原因を特定
  • 改善すべき優先順位を決定

3. 改善実装

  • 効果の高い改善から着手
  • 一つずつ改善して効果を確認

4. 継続監視

  • Web Vitals拡張機能で日常監視
  • 定期的にPageSpeed Insightsで評価

まとめ

Core Web Vitalsの3つの指標を理解し、適切な測定方法と改善手法を実践することで、ユーザー体験を大幅に向上させることができます。

重要なポイント

  • LCP（読み込み速度）：画像最適化とプリロードが効果的
  • INP（応答性）：JavaScriptの処理分割とデバウンス処理
  • CLS（視覚的安定性）：要素サイズの事前指定

パフォーマンス改善は継続的な取り組みです。まずは測定から始めて、一つずつ改善していきましょう。

参考文献

Core Web Vitals report - Search Console Help
Chrome DevTools Performance Overview

Discussion