パフォーマンスバジェット計算機

パフォーマンスバジェット計算機は、フロントエンド開発者やパフォーマンス エンジニアがWebページの各アセットカテゴリがどれだけのウェイトを消費 できるかを計画・視覚化するための無料ブラウザベースツールです。 パフォーマンスバジェットとは、指定された接続速度で許容可能な時間内に サイトが読み込まれることを保証する、ページリソース（HTML、CSS、 JavaScript、画像、フォント、サードパーティスクリプト）の制限値のセットです。

まず、目標接続速度（Slow 3G、3G、4G、Fast 4G、WiFi、またはカスタム値） と目標読み込み時間（例：3秒）を選択します。ツールは速度（Mbps）× 時間（秒）× 125の式に基づいて、KB単位の総転送サイズバジェットを 計算します。次に、スライダーまたは数値入力を使用して、そのバジェットを HTML、CSS、JavaScript、画像、フォント、その他に配分します。リアルタイム のSVG円グラフが配分を視覚化し、残りバジェットインジケーターが制限を 超えた場合に警告します。

すべての処理はブラウザ内で完全に行われます。データがサーバーに送信される ことはないため、内部プロジェクトの詳細を参照するバジェットを自由に計画 できます。個々のアセットの圧縮サイズを確認したい場合は、 Code Minifierをお試しください。

1. プリセットボタン（Slow 3G、3G、4G、Fast 4G、WiFi）をクリックするか、カスタムMbps値を入力して接続速度を選択します。
2. スライダーまたは値の入力（例：3秒）で目標読み込み時間を調整します。
3. サマリーバーに表示される総バジェットを確認します — これはページの最大転送サイズです。
4. スライダーまたは数値入力を使用して、各カテゴリ（HTML、CSS、JavaScript、画像、フォント、その他）にウェイトを配分します。
5. 円グラフがリアルタイムで更新され、バジェット配分を視覚化します。
6. バジェットを超過すると、超過量とともに赤い警告が表示されます。
7. プリセットボタン（Blog、E-commerce、SPA、Landing Page、Dashboard）をクリックして推奨配分を読み込みます。
8. コピーまたはダウンロードボタンをクリックして、バジェットをJSONまたはMarkdownとしてエクスポートします。Ctrl+Shift+CでJSONとしてすばやくコピーできます。