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