ストーリー

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

パフォーマンスバジェットとは、Webサイトやアプリケーションのパフォーマンス指標に対して設定する上限値です。

バジェットの種類

// パフォーマンスバジェットの定義例
interface PerformanceBudget {
  // 量的バジェット
  quantity: {
    totalPageWeight: string;    // ページ総サイズ: 400KB以下
    maxJavaScript: string;      // JS合計: 200KB以下
    maxCSS: string;             // CSS合計: 50KB以下
    maxImages: string;          // 画像合計: 150KB以下
    maxFonts: string;           // フォント: 100KB以下
    maxThirdParty: number;      // サードパーティスクリプト: 3個以下
  };

  // 時間的バジェット
  timing: {
    timeToFirstByte: string;    // TTFB: 200ms以下
    firstContentfulPaint: string; // FCP: 1.5秒以下
    largestContentfulPaint: string; // LCP: 2.5秒以下
    timeToInteractive: string;  // TTI: 3.5秒以下
    totalBlockingTime: string;  // TBT: 200ms以下
  };

  // API バジェット
  api: {
    p50ResponseTime: string;    // p50: 100ms以下
    p99ResponseTime: string;    // p99: 500ms以下
    errorRate: string;          // エラー率: 0.1%以下
  };
}

バジェットの設定方法

1. 競合分析に基づく設定

// 競合サイトのパフォーマンスを基準にする
const competitorAnalysis = {
  competitor1: { lcp: 2.8, fcp: 1.2, pageWeight: 450 },
  competitor2: { lcp: 3.5, fcp: 1.8, pageWeight: 600 },
  competitor3: { lcp: 2.1, fcp: 0.9, pageWeight: 320 },
};

// 目標: 競合の上位25%以上を目指す
function setBudgetFromCompetitors(
  competitors: typeof competitorAnalysis
): PerformanceBudget {
  const lcpValues = Object.values(competitors).map(c => c.lcp);
  const targetLCP = percentile(lcpValues, 25); // 上位25%
  // → 最速の競合より速く設定する
  return { /* ... */ };
}

2. ユーザー環境に基づく設定

低速回線・低スペックデバイスのユーザーも考慮します。

3. ビジネス要件に基づく設定

// コンバージョン率との相関から逆算
// 例: LCPが1秒改善するとコンバージョン率が3%向上
const businessRequirements = {
  targetConversionRate: 5.0,     // 目標コンバージョン率
  currentConversionRate: 3.5,    // 現在のコンバージョン率
  requiredLCPImprovement: 0.5,   // 必要なLCP改善量（秒）
  currentLCP: 3.0,               // 現在のLCP
  targetLCP: 2.5,                // 目標LCP
};

バジェットの運用

CI/CDへの組み込み

// パフォーマンスバジェットのチェック関数
interface BudgetCheckResult {
  passed: boolean;
  violations: BudgetViolation[];
}

interface BudgetViolation {
  metric: string;
  budget: number;
  actual: number;
  overage: string; // "15% over budget"
}

function checkBudget(
  metrics: Metrics,
  budget: PerformanceBudget
): BudgetCheckResult {
  const violations: BudgetViolation[] = [];

  if (metrics.lcp > budget.timing.largestContentfulPaint) {
    violations.push({
      metric: 'LCP',
      budget: 2500,
      actual: metrics.lcp,
      overage: `${Math.round((metrics.lcp / 2500 - 1) * 100)}% over budget`,
    });
  }

  // 他の指標もチェック...

  return {
    passed: violations.length === 0,
    violations,
  };
}

バジェット超過時のアクション

バジェット管理のベストプラクティス

1. 段階的に導入する — 最初は緩めに設定し、徐々に厳しくする
2. 全員が見える化する — ダッシュボードでリアルタイムに表示
3. 定期的に見直す — 四半期ごとにバジェットを再評価
4. トレードオフを意識する — 新機能追加時にバジェットとの兼ね合いを議論

まとめ

チェックリスト

• パフォーマンスバジェットの概念を理解した
• 量的バジェットと時間的バジェットの違いを把握した
• バジェットの設定方法を3つ知った
• CI/CDへの組み込み方を理解した

次のステップへ

次は「計測の原則」を学びます。“推測するな、計測せよ” — パフォーマンスエンジニアリングの金言です。

推定読了時間: 25分