フロントエンド性能予算を先に決めるべき理由
ページの最初のコンテンツが表示される瞬間であるFCP(First Contentful Paint)は、ユーザーが感じる速度を左右する重要な指標です。JS・CSSバンドルが大きいほどダウンロードとパース・実行にかかる時間が増え、FCPが遅くなり離脱率が上がります。パフォーマンスバジェットは、目標FCPを先に決め、その時間内に収めるために許容できるリソースサイズを逆算する考え方です。
この計算機は目標FCP、ネットワーク速度、端末性能(低・中・高)を入力として受け取り、ダウンロード時間とパース・実行時間の両方を考慮した合計バンドル予算を算出します。一般的にJSはCSSよりパース・実行コストがはるかに大きいため、予算の70%をJSに、30%をCSSに配分するのを基準値として使用します。新しいライブラリを導入する時やコード分割戦略を立てる時に、目標に対してどれだけ余裕があるか確認する参考指標として活用してください。
よくある質問
パフォーマンスバジェットがなぜ重要ですか?
バンドルが大きいほどダウンロード・パース時間が増えてFCPが遅くなるため、目標時間に合わせて予算を先に決めておくと性能劣化を防げます。
JSとCSSの比率がなぜ70対30ですか?
JSはダウンロード後のパース・実行コストがCSSよりはるかに大きいため、予算の大部分をJSに、少ない比率をCSSに配分するのが実務基準です。