Basic認証のかかったサイトでLighthouseを実行する

Lighthouseを使うことでサービスの品質スコアをチェックできる。

改善対応を行う際に本番反映前にステージング環境でテストを行いたい。

ただ、ステージング環境にはBasic認証がかかっているのでChrome拡張のLighthouseの場合はエラーになってしまう。

lighthouse/authenticated-pages.mdにいくつか方法が記載されているが、npmのlighthouseを使うと手軽に解決できた。

  • lighthouseをインストール
npm install -g lighthouse
  • デバッグ用のブラウザを立ち上げる
chrome-debug
✨  Chrome debugging port: 62915
  • サイトを開いてBasic認証情報を入力

  • lighthouseを実行

lighthouse --view https://basic-auth-test-url.your-host --port 62915
  • レポートが表示される
    • lighthouse実行ディレクトリ以下にhtmlが保存される

これでBasic認証のかかったサイトでもlighthouseでの品質チェックができるようになった。

Chrome拡張版だと何度も実行するとAPI制限に引っかかってしうので、cli版のlighthouseを使って手軽に何度も試せるようにしておくと良さそう。

参考