パフォーマンス予算
無料のオンラインパフォーマンス予算追跡ツール、リソースサイズの監視
パフォーマンスバジェットとは
パフォーマンスバジェットは、Webリソース（JavaScriptバンドル、画像、フォント、CSS）のサイズと読み込み時間に上限を設定します。これらのバジェットを追跡することで、プロジェクトの成長に伴うパフォーマンス低下を防ぎます。一般的なバジェット：合計ページサイズ1MB以下、JavaScript 200KB以下。
リソースバジェットの追跡方法
リソースとその実際のサイズを追加し、バジェット上限を設定します。ツールが合計サイズを追跡し、バジェットを超えるリソースをフラグ付けします。開発中にこのツールを使用してパフォーマンス問題を早期に発見します。
▶良いパフォーマンスバジェットとは？
一般的な推奨：合計ページサイズ < 1MB、JavaScript < 200KB（圧縮後）、CSS < 50KB、画像 < 500KB、3GネットワークでTTI < 5秒。
▶実際のリソースサイズを測定するには？
Chrome DevToolsのネットワークパネルで転送サイズを確認します。バンドルアプリの場合はwebpack-bundle-analyzerなどのツールでバンドルの構成を検査します。
このツールがあなたに役立ったなら、私にコーヒーをご馳走することをお勧めします。
私にコーヒーを買ってください。