フレームワーク活用ガイドひとことで言うと#
Webサイトの読み込み速度やリソースサイズに上限値（バジェット）を設定し、CIで自動チェックすることでパフォーマンス劣化を防ぐフレームワーク。
押さえておきたい用語#
- Performance Budget（パフォーマンス バジェット）
- ページの読み込み速度やリソースサイズの許容上限値のこと。超過したらリリースをブロックする。
- Core Web Vitals
- LCP・INP・CLSの3指標でユーザー体験を測るGoogleの品質指標を指す。SEOランキングにも影響する。
- LCP（Largest Contentful Paint）
- ページ内の最大コンテンツが表示されるまでの時間。2.5秒以下が良好。
- Bundle Size（バンドルサイズ）
- JavaScriptやCSSをビルドした後のファイルサイズ合計。大きいほどダウンロード・パースに時間がかかる。
- Time to Interactive（TTI）
- ページが操作可能になるまでの時間。JavaScriptの実行完了が主なボトルネックになる指標である。
パフォーマンスバジェットの全体像#
こんな悩みに効く#
- 新機能を追加するたびにページの表示速度が少しずつ遅くなっている
- Core Web Vitalsのスコアが悪化してSEOに影響が出始めた
- 「パフォーマンスは大事」と言いながら、誰もチェックしていない
基本の使い方#
具体例#
月間500万PVのニュースメディア。記事ページのLCPが 4.2秒 で、Core Web VitalsがPoor評価。SEO経由のトラフィックが前年比 -12% に減少していた。
パフォーマンスバジェットを設定。
| 指標 | 現状 | バジェット |
|---|---|---|
| LCP | 4.2秒 | 2.5秒以下 |
| JS (gzip) | 680KB | 300KB以下 |
| 画像合計 | 2.4MB | 800KB以下 |
未使用のJavaScriptライブラリ削除 + 画像の遅延読み込み + WebP変換を実施。3ヶ月でLCPが 4.2秒 → 2.1秒 に改善。Core Web VitalsがGood評価になり、SEOトラフィックが前年比 +8% に回復した。
エンジニア35名のEC。新機能追加のたびにフロントエンドのバンドルサイズが増え、半年でJS合計が 250KB → 520KB に倍増。表示速度の劣化にリリース後まで気づけない状態だった。
Lighthouse CIをGitHub Actionsに統合し、PRごとにパフォーマンスをチェック。バジェット超過時はマージをブロックする運用を開始。
導入後6ヶ月で、バジェット超過で差し戻されたPRは 23件。差し戻し時に「不要なライブラリのインポート」「未圧縮画像」などが検出され、バンドルサイズは 520KB → 280KB に削減。パフォーマンスの「知らないうちに劣化」がゼロになった。
エンジニア20名のBtoB SaaS。営業がタブレットでデモするシーンが増えたが、ダッシュボードページの読み込みに 8秒 かかり、デモ中に「遅いですね」と言われることが頻発。
モバイル環境向けのパフォーマンスバジェットを新設。デスクトップ/モバイルで異なる閾値を設定した。
3rdパーティスクリプトが 12個 読み込まれていたことが判明。分析ツールを3つに整理し、グラフライブラリをサーバーサイドレンダリングに変更。ダッシュボードのモバイル表示が 8秒 → 2.8秒 に短縮され、営業チームの満足度が大きく向上した。
やりがちな失敗パターン#
- バジェットを設定しても強制しない — 「Warning」だけでは無視される。超過時はマージをブロックする設定にして初めて効果が出る
- デスクトップのWi-Fi環境だけで計測する — 実ユーザーはモバイル4Gが多い。Lighthouseのモバイルプリセット（Slow 4G + CPU 4x throttling）で計測する
- バジェットを最初から厳しくしすぎる — 現状LCP 5秒のサイトにいきなり2秒のバジェットを設定すると、全PRがブロックされる。段階的に厳しくする
- バンドルサイズの増加原因を分析しない — バジェット超過の通知だけでは対応できない。webpack-bundle-analyzerで「何が増えたか」を可視化する
まとめ#
パフォーマンスバジェットは時間・サイズ・数量の3種類でWebパフォーマンスの上限値を設定し、CIで自動チェックすることで劣化を防ぐフレームワーク。Lighthouse CIやbundlesizeをCI/CDに統合してPRごとにチェックし、バジェット超過時はマージをブロックする運用にすることで 「知らないうちに遅くなる」 問題を根本的に解消する。バジェットはビジネス要件と現状値の両方から設定し、段階的に厳しくしていくアプローチが現実的。