このページは Cloud Translation API によって翻訳されました。

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

Milica Mihajlija

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

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

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

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

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

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

document
font
image
media
other
script
stylesheet
third-party
total

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

Lighthouse レポートの予算セクション — </ph> 「予算」セクション（Lighthouse レポートのセクション）

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

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

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

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

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

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

Webpack のバンドルサイズの警告 — </ph> Webpack バンドルサイズに関する警告 PAY️

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

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

Webpack のパフォーマンス最適化の推奨事項 — </ph> おまけの機能: Webpack は警告だけでなく、バンドルのサイズを縮小するための推奨事項も示してくれます。💁

セットサイズ

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

Bundlesize CLI

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

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

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

CI の Bundlesize

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

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

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

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

Lighthouse Bot

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

サイトをステージングサーバーにデプロイした後、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 リクエストに更新されたスコアのコメントを付加します。これは、コード変更の際にパフォーマンスについて話し合うきっかけとなる便利な機能です。

pull リクエストに対する Lighthouse レポートスコア — </ph> Lighthouse レポートスコア（pull リクエスト 💬?）

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

概要

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