#225
インタラクション・アニメーション
#225ぱふぉーまんすばじぇっと
パフォーマンスバジェット
別名・表記:Performance Budgetパフォーマンス予算
UIXHERO Definition
「速度の家計簿」。画像サイズやJavaScript容量、表示完了時間（LCPなど）に制限を設けること。
概要
「速さ」は機能（Feature）である。 どんなに素晴らしいデザインでも、表示に10秒かかればユーザーは去ってしまう。 パフォーマンスバジェットを設定することで、デザイナーとエンジニアが「このリッチなアニメーションを入れるなら、代わりに画像を減らそう」といった建設的なトレードオフの議論ができるようになる。100msの遅延で売上が低下（Amazon事例）、400msの遅延で検索回数減少（Google実験）など代表的事例がある。
UXでの活用
- 離脱率の低下: 読み込み速度と直帰率は正の相関がある。バジェットを守ることは、ユーザーを維持することに直結する。
- 公平性: 高スペックなマシンと高速ネット回線を持つ開発者環境だけでなく、低スペックなスマホや遅い回線を使うユーザーにとっても快適な体験を保証する。パフォーマンスとアクセシビリティの関係も検討する。
💡 使いどころ
プロジェクトの初期段階。機能追加によってサイトが重くなるのを防ぎたい時。
⚠️ 注意点・誤用
予算を超えたからといって、必要な機能を削りすぎると本末転倒になる。予算は絶対的なルールではなく、チームで議論するための基準（きっかけ）として使うべき。
具体例
- 「初回のJavaScript読み込み量は200KB以内にする」
- 「トップページの描画完了（LCP）は2.5秒以内にする」
- 「画像は全てWebP形式にし、1枚あたり100KB以下にする」
出典・参考文献:
- Grigorik, I. (2013). High Performance Browser Networking. O'Reilly Media.
- Google. (2020). Web Vitals.
- Nielsen, J. (1993). Usability Engineering. Academic Press.
- Souders, S. (2007). High Performance Web Sites. O'Reilly Media.
関連する解説記事
関連する記事詳細が見つかりませんでした。