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

パフォーマンスバジェットトラッカーは、開発者やパフォーマンスエンジニアが Webパフォーマンスバジェットの定義、監視、可視化を行える無料のブラウザベースツールです。 パフォーマンスバジェットとは、ページリソースとタイミングメトリクスに対して チームが超えないことに合意する事前定義された制限のセットであり、 すべてのユーザーに対してサイトの高速性を確保します。

このツールでは9つの主要メトリクスに対してバジェットを設定できます： 合計ページサイズ、JavaScriptサイズ、CSSサイズ、画像サイズ、フォントサイズ、 HTTPリクエスト数、Time to First Byte（TTFB）、First Contentful Paint（FCP）、 Largest Contentful Paint（LCP）。名前、タイプ、サイズを指定して個々のリソース エントリを追加し、ページがバジェットに対してどの程度かを正確に確認できます。

ビジュアル比較ビューでは、インタラクティブな棒グラフと円グラフを通じて バジェット配分と実際の使用量を表示します。色分けされたインジケータにより、 どのカテゴリがバジェット内（緑）、制限に近づいている（黄）、またはバジェット超過（赤） かが即座にわかります。5つのプリセット — モバイルファースト、デスクトップ、 Fast 3G、Eコマース、ブログ — で業界標準のバジェットからスタートし、 カスタマイズできます。

すべての処理はブラウザ内で完全に行われます。パフォーマンスデータが デバイスから送信されることはなく、サーバーとの通信、ログ記録、入力の分析は ありません。機密性の高いパフォーマンスデータにも安全に使用できます。 バジェットプランをJSONとしてエクスポートしてCI/CDパイプラインと統合したり、 既存のバジェットをインポートして追跡を続けることができます。

1. バジェットプリセット（モバイルファースト、デスクトップ、Fast 3G、Eコマース、ブログ）を選択するか、各メトリクスのバジェット制限を手動で設定します。
2. バジェット制限セクションの数値フィールドを編集して、任意のバジェット制限を調整します。
3. 名前、タイプ（JavaScript、CSS、Image、Font、HTML、Other）、**サイズ（KB）**を入力してリソースエントリを追加し、追加をクリックまたはEnterを押します。
4. バジェット vs 実際チャートを確認します — チャートアイコンで棒グラフと円グラフを切り替えます。
5. バジェットステータステーブルで各カテゴリのバジェット、実際、残り、超過/未満のステータスの詳細を確認します。
6. JSONエクスポートをクリックしてダウンロード、またはJSONコピーでクリップボードにコピーします（ショートカット：Ctrl+Shift+C）。
7. JSONインポートをクリックして以前エクスポートしたファイルを選択し、既存のバジェットをインポートします。
8. クリアをクリックしてすべてのリソースエントリをリセットし、最初からやり直します。