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

Milica Mihajlija

高速化を実現するために苦労してきたので、Lighthouse Bot を使用してパフォーマンス テストを自動化し、高速化を維持しましょう。

Lighthouse は、アプリを 5 つのカテゴリで評価します。そのうちの 1 つがパフォーマンスです。コードを編集するたびに 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

セットアップ中に、コンソールから一連の質問が表示されます。

  • 機能の選択を求められたら、[ホスティング] を選択します。
  • デフォルトの Firebase プロジェクトとして、Firebase コンソールで作成したプロジェクトを選択します。
  • 公開ディレクトリとして「public」と入力します。
  • シングルページ アプリとして構成しない場合は「N」と入力します。

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

おめでとうございます。デプロイの準備が整いました。次のコマンドを実行します。

firebase deploy

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

3. Travis の設定

Travis でアカウントを登録し、プロファイルの [設定] セクションで GitHub Apps 統合を有効にする必要があります。

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 がアプリを Firebase にデプロイするには、承認が必要です。その方法は、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 の設定

Friendly Lighthouse Bot は、アプリの Lighthouse スコアを更新します。リポジトリへの招待状が必要です。

GitHub で、プロジェクトの設定に移動し、「lighthousebot」を共同編集者として追加します（[Settings] > [Collaborators]）。

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

pull リクエストを作成して、Travis で Lighthouse Bot テストをトリガーする

Lighthouse Bot は pull リクエストのみをテストするため、今すぐメインブランチに push すると、Travis ログに「This script can only be run on Travis PR requests」と表示されます。

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 のコメントを取得しないようにすることもできます。