パフォーマンス予算：CI/CDで速度を強制する

パフォーマンス予算：ウェブサイトに速度制限を設定する

パフォーマンス予算とは、ウェブサイトのリソースに課す一連の制限です。コードに対する速度制限のようなものです。JavaScriptバンドルは200KBを超えてはならない、画像の合計は1MB以下、ページは2秒以内に読み込む必要がある、と決めます。これらの制限は、サイトが成長しても高速を維持するのに役立ちます。

予算が必要な理由

予算がないと、パフォーマンスは時間とともに低下する傾向があります。誰かが新しいライブラリを追加し、次に別のライブラリ、大きな画像、サードパーティのスクリプトを追加します。それぞれの追加は単独では小さく見えますが、一緒になるとサイトを遅くします。予算は、これらの追加が問題になる前に検出します。

予算はまた、何が許容可能かについての共通認識を生み出します。開発者が新しいライブラリを追加したい場合、予算内に収まるかどうかを確認できます。収まらない場合は、より小さい代替案を見つけるか、他の何かを最適化する必要があります。これにより、肥大化のゆっくりとした進行を防ぎます。

何に予算を割り当てるか

最も影響の大きいリソースから始めます：JavaScriptの総サイズ、CSSの総サイズ、画像の総サイズ、リクエストの総数。これらはページの読み込み速度に直接影響します。特定の指標に予算を設定することもできます：Largest Contentful Paint 2.5秒未満、First Input Delay 100ミリ秒未満、Cumulative Layout Shift 0.1未満。

より高度な予算には、サードパーティリクエストの数、ウェブフォントのサイズ、ページ読み込み時に実行されるJavaScriptの量が含まれる場合があります。重要なのは、ユーザーにとって重要なものを測定し、それに応じて制限を設定することです。

予算の強制

予算は強制されて初めて意味があります。最善の方法は、CIパイプラインに統合することです。誰かがプルリクエストを送信すると、CIは変更が予算を超えるかどうかをチェックします。超える場合、ビルドは失敗します。Lighthouse CI、bundlesize、webpackのパフォーマンスヒントなどのツールで自動化できます。

これによりフィードバックループが作成されます：開発者は変更の影響をすぐに確認し、マージ前に調整できます。時間の経過とともに、パフォーマンス意識の文化が構築されます。

現実的な制限の設定

まず現在のパフォーマンスを測定します。今どこにいますか？次に、野心的だが達成可能な目標を設定します。一般的な出発点は、30%の改善を目指すことです。それを達成したら、新しい目標を設定します。目標は、一度きりの最適化ではなく、段階的で持続可能な改善です。

典型的なコンテンツサイトの場合、妥当な予算は次のようになります：JavaScript 200KB（圧縮）、CSS 100KB、画像 1MB、リクエスト数20未満。より複雑なウェブアプリケーションの場合、数値は高くなる可能性があります。重要なことは、予算を設定し、それを守り、定期的に見直すことです。