Chris Anstey
Bojan Pavic
速度を最適化しても、すぐに元通りになることがよくあります。これは、ウェブサイトのパフォーマンスは身体の健康と同じく、一度改善すればよいというものではなく、改善した状態を維持するための土台を作ることが重要であるためです。
その方法の一つに、パフォーマンス バジェットがあります。パフォーマンス バジェットとは、サイト パフォーマンスに影響する指標に一連の限度を定めるものです。このコンセプトは金銭上の予算と似ています。つまり、上限を設けてその中に収めるということです。一般的に、種類の異なる指標をいくつか組み合わせてパフォーマンス バジェットを設定すると効果的です。たとえば、商品ページのパフォーマンス バジェットは次のようになります。
| 低速の 3G での Time To Interactive | 次より小さい | 5 秒 |
| 低速の 3G での First Contentful Paint | 次より小さい | 2 秒 |
| Lighthouse のパフォーマンス スコア | 次より大きい | 80 |
| JavaScript の合計サイズ | 次より小さい | 170 KB |
パフォーマンス バジェットを設定したら、バジェットに沿った運用を開始します。たとえばLighthouse などのツールを継続的インテグレーション環境に組み込むことが可能で、たとえば、設定した制限値を下回る指標があるとビルドを不合格とするようにテストを設計できます。また、ダッシュボードや概要レポートで定期的にレポートを作成することで、可視性とアカウンタビリティを高めることができます。Pinterest は、パフォーマンス バジェットを導入して高速なユーザー エクスペリエンスを維持しているほか、Experian では毎月のエグゼクティブ KPI レポートでサイト速度を主要指標として使用しています。
パフォーマンス バジェットについて詳しくは、こちらをご覧ください。パフォーマンス文化をさらに定着させ、すべての関係者がスピード指標を可視化、実体化できるようにする方法については、こちらのガイドをご覧ください。