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

Milica Mihajlija

パフォーマンス バジェットを定義したら、次はビルドプロセスを設定します 追跡できるようにすることですしきい値を定義できるツールは多数あります 予算を超過した場合は警告が表示されます調べて ニーズと現在の設定に最適なものを選択する方法をご紹介します🕵️‍♀️

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

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

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

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

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

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

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

</ph> <ph type="x-smartling-placeholder">をご覧ください。

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

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

webpack.config.js でパフォーマンスのヒントを有効にすると、バンドルサイズが上限を超えた場合にコマンドラインの警告またはエラーが表示されます。この方法では、開発のあらゆる段階でアセットのサイズに注意してください。

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

</ph> <ph type="x-smartling-placeholder">をご覧ください。

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

</ph> <ph type="x-smartling-placeholder">をご覧ください。

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

</ph> <ph type="x-smartling-placeholder">で確認できます。

セットサイズ

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

Bundlesize CLI

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

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

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

</ph> <ph type="x-smartling-placeholder">をご覧ください。

</ph> <ph type="x-smartling-placeholder">をご覧ください。

CI の Bundlesize

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

</ph> <ph type="x-smartling-placeholder">をご覧ください。

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

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

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

Lighthouse Bot

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

</ph> <ph type="x-smartling-placeholder">をご覧ください。

サイトをステージング サーバーにデプロイした後、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 リクエストのマージを防止できます。⛔

</ph> <ph type="x-smartling-placeholder">をご覧ください。

すると、Lighthouse Bot が pull リクエストに更新されたスコアのコメントを付加します。これは、コード変更の際にパフォーマンスについて話し合うきっかけとなる便利な機能です。

</ph> <ph type="x-smartling-placeholder">をご覧ください。

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

概要