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

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 を 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 スコアに基づく予算。