パフォーマンス バジェットを構築プロセスに組み込む

Milica Mihajlija

パフォーマンス バジェットを定義したら、そのバジェットを追跡するビルドプロセスを設定します。選択したパフォーマンス指標のしきい値を定義し、予算超過が発生した場合に警告するツールがいくつかあります。ニーズと現在の設定に最適なものを選択する方法をご確認ください。🕵?️‍♀️

Lighthouse のパフォーマンス バジェット

Lighthouse は、パフォーマンス、ユーザー補助、ベスト プラクティス、プログレッシブ ウェブアプリとしてのサイトのパフォーマンスなど、いくつかの重要な分野でサイトをテストする監査ツールです。

Lighthouse（v5 以降）のコマンドライン バージョンでは、次の指標に基づいてパフォーマンス予算を設定できます。

  • リソースサイズ
  • リソース数

予算は、次のいずれかのタイプのリソースに設定できます。

  • document
  • font
  • image
  • media
  • other
  • script
  • stylesheet
  • third-party
  • total

予算は JSON ファイルで設定します。予算を定義すると、新しい [予算超過] 列に、上限を超えているかどうかが表示されます。

Lighthouse レポートの [予算] セクション
LightHouse レポートの [予算] セクション

Webpack のパフォーマンスのヒント

Webpack は、コードをユーザーに配信する方法を最適化するための強力なビルドツールです。また、アセットのサイズに基づくパフォーマンス バジェットの設定も可能です。

webpack.config.js でパフォーマンスのヒントを有効にすると、バンドルサイズが上限を超えた場合にコマンドラインの警告またはエラーが表示されます。これは、開発全体を通してアセットサイズに注意を払ううえで最適な方法です。

ビルドステップの後、webpack はアセットとそのサイズを色分けしたリストを出力します。予算を超過している項目は黄色でハイライト表示されます。

bundle.js がハイライト表示された Webpack の出力
ハイライト表示された bundle.js が予算を超えています

アセットとエントリポイントの両方のデフォルトの上限は 250 KB です。構成ファイルで独自のターゲットを設定できます。

Webpack バンドルサイズの警告
Webpack バンドルのサイズに関する警告 ⚠️

予算は未圧縮のアセットサイズと比較されます。圧縮されていない JavaScript のサイズは実行時間に関連しています。ファイルのサイズが大きい場合、特にモバイル デバイスでは実行に時間がかかることがあります。

Webpack のパフォーマンスの最適化に関する推奨事項
ボーナス機能: webpack は警告だけではなく、バンドルのサイズを縮小するための推奨事項を提示します。💁

Bundlesize

Bundlesize はシンプルな npm パッケージで、設定したしきい値に照らしてアセットサイズをテストします。ローカルで実行でき、CI と統合できます。

Bundlesize CLI

しきい値とテストするファイルを指定して、bundlesize CLI を実行します。

bundlesize -f "dist/bundle.js" -s 170kB

Bundlesize は、色分けされたテスト結果を 1 行に出力します。

bundlesize CLI テストが失敗する
bundlesize CLI テストに失敗 ❌
bundlesize CLI テストに合格
bundlesize CLI テストに合格 ✔️

CI の Bundlesize

bundlesize を CI と統合して、プル リクエストにサイズの上限を自動的に適用すると、bundlesize を最大限に活用できます。バンドルサイズ テストが失敗した場合、その pull リクエストはマージされません。GitHub のプルリクエストで Travis CI、CircleCI、Wercker、Drone を使用できます。

GitHub でのバンドルサイズのチェック ステータス
GitHub 上の Bundlesize チェック ステータス

アプリが高速でも、新しいコードを追加すると、その状態が変わることがあります。bundlesize を使用して pull リクエストを確認すると、パフォーマンスの低下を回避できます。Bootstrap、Tinder、Trivago など、多くの企業がこれを使用して予算を管理しています。

bundlesize を使用すると、ファイルごとにしきい値を個別に設定できます。これは、アプリケーションでバンドルを分割する場合に特に便利です。

デフォルトでは、圧縮されたアセットのサイズをテストします。圧縮オプションを使用して、brotli 圧縮に切り替えるか、完全に無効にすることができます。

Lighthouse Bot

Lighthouse Bot

Lighthouse Bot は、Travis CI と統合され、Lighthouse の 5 つの監査カテゴリのいずれかに基づいて予算を適用します。たとえば、Lighthouse のパフォーマンス スコアの予算を 100 に設定できます。個々のアセットの予算を管理するよりも、1 つの数値を管理する方が簡単な場合もあります。Lighthouse スコアは多くの要素を考慮に入れます。

Lighthouse スコア 💯
Lighthouse スコア 🛍?

Lighthouse Bot は、サイトをステージング サーバーにデプロイした後に監査を実行します。.travis.yml で、--perf、--a11y、--bp、--seo、--pwa のいずれかのオプションを使用して、特定の Lighthouse カテゴリの予算を設定します。スコアが 90 以上の緑色のゾーンに留まるようにします。

after_success:
  - ./deploy.sh # Deploy the PR changes to staging server
  - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test

GitHub の pull リクエストのスコアが設定したしきい値を下回ると、Lighthouse Bot によって pull リクエストの統合がブロックされる可能性があります。⛔

GitHub で Lighthouse Bot ステータスを確認
Lighthouse Bot のチェック ステータス（GitHub）

Lighthouse Bot が、更新されたスコアとともに pull リクエストにコメントします。これは、コードの変更時にパフォーマンスに関する会話を促進する便利な機能です。

pull リクエストの Lighthouse レポートのスコア
Pull リクエストでの Lighthouse レポートのスコア 💬

Lighthouse スコアが低いためにプル リクエストがブロックされている場合は、Lighthouse CLI または Dev Tools で監査を実行します。ボトルネックの詳細と簡単な最適化のヒントが記載されたレポートが生成されます。

概要

ツール CLI CI 概要
灯台 ✔️ ❌
  • サイズまたは数に基づいて、さまざまなタイプのリソースの予算。
webpack ✔️ ❌
  • Webpack によって生成されたアセットのサイズに基づいた予算。
  • 非圧縮サイズを確認します。
bundlesize ✔️ ✔️
  • 特定のリソースのサイズに基づく予算。
  • 圧縮サイズと非圧縮サイズを確認します。
Lighthouse Bot ❌ ✔️
  • Lighthouse のスコアに基づく予算。