Lighthouse Bot を使用してパフォーマンス バジェットを設定する

Milica Mihajlija

高速化を目指して懸命に取り組んだところで、次は自動化して高速化を実現しましょう。 Lighthouse Bot を使用したパフォーマンス テスト。

Lighthouse によるアプリの採点 5 つのカテゴリがあり その一つがパフォーマンスです覚えておいてください DevTools でパフォーマンスの変化をモニタリングする または Lighthouse CLI を 自分でコードを編集する必要はありません。面倒な作業をツールで処理できる 提供します。Travis CIは 新しいコードを push するたびに、クラウドでアプリのテストを自動的に実行します。

Lighthouse Bot は Travis CI と統合されており、パフォーマンス バジェット機能により 気づかずに誤ってパフォーマンスを低下させる心配はありません。Lighthouse スコアが設定したしきい値（96/100 未満など）を下回った場合に、プルリクエストのマージを許可しないようにリポジトリを構成できます。

GitHub での Lighthouse Bot チェックの失敗
GitHub での Lighthouse Bot チェック。
で確認できます。

localhost でパフォーマンスをテストできますが、多くの場合、サイトのパフォーマンスは本番環境のサーバーで異なります。より現実的な状況を把握するには、 サイトをステージング サーバーにデプロイ します。任意のホスティング サービスを使用できます。 Firebase Hosting について 回転させてください。

1. セットアップ

このシンプルなアプリは、3 つの数値を並べ替えるのに役立ちます。

GitHub からサンプルのクローンを作成する GitHub アカウントにリポジトリとして追加します。

2. Firebase にデプロイする

開始するには、Firebase アカウントが必要です。準備ができたら、[プロジェクトを追加] をクリックして、Firebase コンソールで新しいプロジェクトを作成します。

Firebase へのデプロイ

以下をデプロイするには、Firebase CLI が必要です。 。すでにインストールされている場合でも、 次のコマンドで CLI を最新バージョンに更新します。

npm install -g firebase-tools

Firebase CLI を承認するには、次のコマンドを実行します。

firebase login

次に、プロジェクトを初期化します。

firebase init

設定中にコンソールから次の質問に回答します。

  • 機能を選択するように求められたら、[Hosting] を選択します。
  • デフォルトの Firebase プロジェクトとして、Firebase コンソールで作成したプロジェクトを選択します。
  • 公開ディレクトリとして「public」と入力します。
  • 「N」と入力しますシングルページ アプリとして設定する必要はありません。

このプロセスにより、プロジェクト ディレクトリのルートに firebase.json 構成ファイルが作成されます。

これでデプロイの準備が整いました。次のコマンドを実行します。

firebase deploy

数秒でアプリが公開されます。

3. Travis の設定

Travis でアカウントを登録してから、 プロファイルの [Settings] セクションで GitHub Apps Integration を有効にします。

Travis CI での GitHub Apps の統合

アカウントを作成したら

プロフィールの下の [設定] に移動し、[アカウントを同期] ボタンをクリックして、 プロジェクト リポジトリが Travis に一覧表示されます。

継続的インテグレーションを開始するには、次の 2 つが必要です。

  1. ルート ディレクトリに .travis.yml ファイルを配置する
  2. 通常の git push を実行してビルドをトリガーする

lighthouse-bot-starter リポジトリには、すでに .travis.yml YAML ファイルがあります。

language: node_js
node_js:
  - "8.1.3"
install:
  - npm install
before_script:
  - npm install -g firebase-tools
script:
  - webpack

YAML ファイルは、すべての依存関係をインストールしてアプリをビルドするよう Travis に指示します。次は、サンプルアプリを独自の GitHub リポジトリに push します。まだ設定していない場合は、次のコマンドを実行します。

git push origin main

Travis の [Settings] でリポジトリをクリックして、プロジェクトの Travis を表示します。 できます。問題がなければ、数分以内にビルドが黄色から緑色に変わります。🎉

4. Travis を使用して Firebase のデプロイを自動化する

ステップ 2 では、Firebase アカウントにログインし、firebase deploy を使用してコマンドラインからアプリをデプロイしました。Travis がアプリを Google Cloud の 認可する必要があります。手順は次のとおりです。Firebase トークンを使用します。🗝️🔥

Firebase を承認する

トークンを生成するには、次のコマンドを実行します。

firebase login:ci

ブラウザ ウィンドウに新しいタブが開き、Firebase で確認が行われます。その後、コンソールに新しく作成されたトークンが表示されます。コピーして Travis に戻ります。

プロジェクトの Travis ダッシュボードで、[その他のオプション] >[設定] >環境変数。

トークンを値フィールドに貼り付け、変数に FIREBASE_TOKEN という名前を付けて追加します。

Travis の設定にデプロイを追加する

ビルドが成功するたびにアプリをデプロイするよう Travis に指示するには、次の行が必要です。 .travis.yml ファイルの末尾に追加します。🔚

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive

この変更を GitHub に push し、最初の自動デプロイを待機します。Travis ログを確認すると、すぐに ✔️ Deploy complete! と表示されます。

これで、アプリに変更を加えたら、その変更が Firebase に自動的にデプロイされるようになります。

5. Lighthouse Bot の設定

フレンドリーな Lighthouse Bot が、アプリの Lighthouse スコアをお知らせします。 リポジトリへの招待状のみが必要です。

GitHub でプロジェクトの設定に移動し、[lighthousebot] をコラボレータとして追加します（[設定] > [コラボレータ]）。

Lighthouse bot コラボレーターのステータス

これらのリクエストの承認は手動プロセスであるため、すぐに承認されるとは限りません。テストを開始する前に、lighthousebot が承認していることを確認してください ステータスが表示されます。その間に、別のキーを Travis 上の環境変数を使用します。メールアドレスを入力すると、受信トレイに Lighthouse Bot キーが届きます。📬

Travis で、この鍵を環境変数として追加し、名前を LIGHTHOUSE_API_KEY にします。

Lighthouse Bot をプロジェクトに追加する

次に、次のコマンドを実行して Lighthouse Bot をプロジェクトに追加します。

npm i --save-dev https://github.com/ebidel/lighthousebot

次の内容を package.json に追加します。

"scripts": {
  "lh": "lighthousebot"
}

Travis 設定に Lighthouse Bot を追加する

最後のヒントとして、プル リクエストのたびにアプリのパフォーマンスをテストします。

.travis.yml で、after_success に別のステップを追加します。

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive
  - npm run lh -- https://staging.example.com

指定した URL に対して Lighthouse 監査が実行されるため、https://staging.example.com はアプリの URL（your-app-123.firebaseapp.com）に置き換えてください。

標準を高く設定し、設定を調整して、変更を受け入れないようにする パフォーマンス スコアが 95 を下回るアプリ:

- npm run lh -- --perf=95 https://staging.example.com

Travis で Lighthouse Bot テストをトリガーする pull リクエストを送信する

Lighthouse Bot は pull リクエストのみをテストするため、メインブランチに push すると、 「このスクリプトは Travis PR リクエストでのみ実行できます」というメッセージが表示されます。を Travis ログ。

Lighthouse Bot テストをトリガーするには:

  1. 新しいブランチをチェックアウトします
  2. GitHub に push する
  3. pull リクエストを作成する

この pull リクエスト ページで少しお待ちください。Lighthouse Bot が歌うまでお待ちください。🎤

Lighthouse の合格スコア

GitHub のチェックに合格する

パフォーマンス スコアは非常に良好です。アプリは予算内ですが、チェックに合格しています。

Lighthouse のその他のオプション

Lighthouse では 5 種類のカテゴリがテストされていることを覚えていますか？特定のトピックに対してスコアを適用し、 Lighthouse Bot フラグ付きのもの:

--perf  # performance
--pwa   # progressive web app score
--a11y  # accessibility score
--bp    # best practices score
--seo   # SEO score

例:

npm run lh -- --perf=93 --seo=100 https://staging.example.com

パフォーマンス スコアが 93 未満に下落するか、SEO スコアが 100 未満に下落すると、PR は不合格になります。

--no-comment で Lighthouse Bot のコメントを受け取らないようにすることもできます。 選択します。