パフォーマンスの基本

なぜパフォーマンスが重要なのか？

Webパフォーマンスはユーザー体験、SEO、ビジネス成果に直結します。

Core Web Vitals

Core Web VitalsはGoogleが定義する、 ユーザー体験を測定するための3つの重要な指標です。

LCP の目標値:
  良好:   2.5秒以下
  改善必要: 2.5秒 〜 4.0秒
  不良:   4.0秒以上

LCP に影響する要素:
  - <img> 要素
  - <video> のポスター画像
  - background-image を持つ要素
  - テキストブロック（<h1>, <p> など）

INP（Interaction to Next Paint）の目標値:
  良好:   200ms以下
  改善必要: 200ms 〜 500ms
  不良:   500ms以上

INP が悪化する原因:
  - 重い JavaScript の実行
  - メインスレッドのブロック
  - 大量のDOM操作
  - 長いイベントハンドラ

CLS の目標値:
  良好:   0.1以下
  改善必要: 0.1 〜 0.25
  不良:   0.25以上

CLS が悪化する原因:
  - サイズ未指定の画像・動画
  - 動的に挿入されるコンテンツ（広告など）
  - Web フォントの読み込み（FOIT / FOUT）
  - DOM を動的に変更する処理

主要な計測ツール

パフォーマンスを改善するには、まず正確に計測することが重要です。 代表的なツールを紹介します。

■ ラボデータ（開発者ツール）
  - Lighthouse: Chrome DevTools に内蔵。スコア形式で総合評価
  - WebPageTest: 様々な条件でのテストが可能（回線速度、地域）
  - Chrome DevTools Performance タブ: 詳細なプロファイリング

■ フィールドデータ（実ユーザー計測）
  - Google Search Console: Core Web Vitals の実測レポート
  - Chrome UX Report (CrUX): 実ユーザーデータの集計
  - web-vitals ライブラリ: 自サイトで RUM を実装

■ 使い分けのポイント
  - 開発中 → Lighthouse で素早くチェック
  - 詳細分析 → Performance タブでプロファイリング
  - 本番 → フィールドデータで実ユーザーの体験を監視

web-vitals ライブラリで計測する

Googleが提供する web-vitals ライブラリを使うと、 実ユーザーのCore Web Vitalsを簡単に計測できます。

// web-vitals ライブラリのインストール
npm install web-vitals

// 計測コード
import { onLCP, onINP, onCLS } from 'web-vitals';

// LCP を計測
onLCP((metric) => {
  console.log('LCP:', metric.value, 'ms');
  // 分析サービスに送信
  sendToAnalytics({ name: 'LCP', value: metric.value });
});

// INP を計測
onINP((metric) => {
  console.log('INP:', metric.value, 'ms');
  sendToAnalytics({ name: 'INP', value: metric.value });
});

// CLS を計測
onCLS((metric) => {
  console.log('CLS:', metric.value);
  sendToAnalytics({ name: 'CLS', value: metric.value });
});

// 分析サービスへの送信例
function sendToAnalytics(data: { name: string; value: number }) {
  // Google Analytics, Datadog, 自前APIなどに送信
  fetch('/api/analytics', {
    method: 'POST',
    body: JSON.stringify(data),
  });
}

パフォーマンスバジェット

パフォーマンスバジェットとは、 サイトのパフォーマンスに設ける「予算」です。この上限を超えないようにチームで管理します。

// パフォーマンスバジェットの例
{
  "budgets": [
    {
      "resourceType": "script",
      "budget": 300,        // JS は 300KB まで
      "unit": "kb"
    },
    {
      "resourceType": "image",
      "budget": 500,        // 画像は 500KB まで
      "unit": "kb"
    },
    {
      "resourceType": "total",
      "budget": 1500,       // ページ全体で 1.5MB まで
      "unit": "kb"
    },
    {
      "metric": "lcp",
      "budget": 2500,       // LCP は 2.5秒以内
      "unit": "ms"
    },
    {
      "metric": "cls",
      "budget": 0.1         // CLS は 0.1 以下
    }
  ]
}

// Lighthouse CI でバジェットを自動チェック
// lighthouserc.js
module.exports = {
  ci: {
    assert: {
      assertions: {
        'largest-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
        'total-byte-weight': ['warn', { maxNumericValue: 1500000 }],
      },
    },
  },
};

まとめ

• パフォーマンスはUX、SEO、ビジネス成果に直結する重要な要素
• Core Web Vitals（LCP、INP、CLS）の3指標を理解する
• ラボデータ（Lighthouse）とフィールドデータ（web-vitals）を使い分ける
• web-vitalsライブラリで実ユーザーの体験を計測できる
• パフォーマンスバジェットを設定してチームで品質を維持する