パフォーマンスバジェット
Webサイトのパフォーマンスに関する予算(メトリクスの上限値)を定義し、リリース時に遵守することでパフォーマンスを継続的に良い状態に保つ仕組み。
メトリクスの種類は下記がある。
- Milestone : ページローディングの開始から完了までの時間
- First Contentful Paint
- Time to Interactive
- Speed Index
- Quantity : アセットや通信量
- JavaScriptのファイル合図
- HTTPリクエスト数
- クリティカルレンダリングパスの数
- Rules
- PageSpeed InsightsやLighthouseなどのスコア
CIにチェック機構を組み込むことで継続的に監視すると良い。
- GoogleChromeLabs/lighthousebot: Run Lighthouse in CI, as a web service, using Docker. Pass/Fail GH pull requests.
- siddharthkp/bundlesize: Keep your bundle size in check
- SpeedCurve: Monitor front-end performance