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

Milica Mihajlija

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Bundlesize

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

Bundlesize CLI

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

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

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

CI の Bundlesize

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

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

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

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

Lighthouse Bot

Lighthouse Bot は、Travis CI と統合され、Lighthouse の 5 つの監査カテゴリのいずれかに基づいて予算を適用します。たとえば、Lighthouse のパフォーマンス スコアの予算を 100 に設定できます。個々のアセットの予算を管理するよりも、1 つの数値を管理する方が簡単な場合もあります。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 リクエストの統合がブロックされる可能性があります。⛔

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

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

概要