高速化するには?

Chris Anstey
Chris Anstey
Bojan Pavic
Bojan Pavic

スピードを最適化したブランドは、すぐに後退してしまうことがよくあります。なぜなら、ウェブサイトのパフォーマンスは健康づくりによく似ているからです。1 回の努力だけでは不十分で、ライフスタイルを変えなければなりません。

パフォーマンス バジェットは、この問題を解決する方法の一つです。パフォーマンス バジェットとは、サイトのパフォーマンスに影響する指標に対する一連の制限です。このコンセプトは金融予算に似ています。限度額を設定して、その範囲内に収めることができます。一般的に、優れたパフォーマンス バジェットとは、さまざまな種類の指標を組み合わせたものです。たとえば、商品ページのパフォーマンス バジェットは次のようになります。

低速の 3G での Time to Interactive(操作可能になるまでの時間) 次より小さい 5 秒
低速 3G での First Contentful Paint 次より小さい 2 秒
Lighthouse のパフォーマンス スコア 次より大きい 80
JavaScript の合計サイズ 次より小さい 170 KB
パフォーマンス バジェットの例。

パフォーマンス バジェットを設定したら、その予算を適用する必要があります。たとえば、その予算をビルドプロセスとレポートに組み入れます。継続的インテグレーションには Lighthouse などのツールを含めることができます。また、主要な指標が設定したしきい値を下回った場合にビルドが失敗するテストを作成できます。さらに、ダッシュボードやサマリー レポートによる定期的なレポートが可視性とアカウンタビリティの向上に役立ちます。高速エクスペリエンスを維持するためにパフォーマンス バジェットを導入した企業の一例として Pinterest があります。また、Experian のようなブランドは現在、月次エグゼクティブ KPI レポートの主要指標としてサイトの速度を使用しています。

パフォーマンス バジェットについて詳しくは、こちらをご覧ください。パフォーマンス文化をさらに浸透させ、すべての関係者が速度の指標を可視化して具体的に理解できるようにする方法については、こちらのガイドをご覧ください。