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

Milica Mihajlija

パフォーマンス バジェットを定義したら、それを管理するビルドプロセスを設定します。選択したパフォーマンス指標のしきい値を定義し、予算を超過した場合に警告できるツールはいくつかあります。お客様のニーズと現在の設定に最適なモデルを選択してください。🕵?️ ♀️

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

Lighthouse は、パフォーマンス、アクセシビリティ、おすすめの方法、プログレッシブ ウェブ アプリケーションとしてのサイトのパフォーマンスなど、いくつかの主要な領域についてサイトをテストする監査ツールです。

Lighthouse（v5 以降）のコマンドライン バージョンでは、以下に基づいたパフォーマンス バジェットを設定できます。

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

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

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

予算は JSON ファイルで設定します。予算を定義すると、上限を超えているかどうかが新しい [Over Budget] 列で確認できます。

Webpack のパフォーマンスに関するヒント

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

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

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

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

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

バンドルサイズ

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

バンドルサイズ CLI

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

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

Bundlesize を使用すると、色分けされたテスト結果が 1 行で出力されます。

CI のバンドルサイズ

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

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

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

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

Lighthouse bot

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

サイトをステージング サーバーにデプロイすると、Lighthouse Bot による監査が実行されます。.travis.yml で、Lighthouse の各カテゴリの予算（--perf、--a11y、--bp、--seo、--pwa のいずれか）を設定します。スコア 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 のスコアが低いために pull リクエストがブロックされていることがわかった場合は、Lighthouse CLI または Dev ツールで監査を行ってください。ボトルネックの詳細と、簡単な最適化のヒントが記載されたレポートが生成されます。

まとめ