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を使って手軽に何度も試せるようにしておくと良さそう。

参考

• ベーシック認証でもLighthouseがしたい！