Lighthouseで計測したパフォーマンススコアのばらつきを減らす方法
2023.09.20
ChromeのDevToolsでパフォーマンス計測をしたことがあるでしょうか？
その中の一つにLighthouseがありますが、何度も実行していると、同じ環境なのに出力されるパフォーマンススコアにばらつきが出ることがあります。
今回はそのばらつきを減らすための手法を紹介します。
Lighthouseのドキュメントを読む
ドキュメント：https://github.com/GoogleChrome/lighthouse/blob/main/docs/variability.md
Lighthouseのドキュメントで、スコアのばらつきについて言及されています。
色々な原因が説明されていますが、解決策としてはLighthouseを複数回実行し、計測したスコアの中央値を出すとのことでした。
ドキュメント内ではlighthouse-ciを利用した方法が紹介されているので、それを利用していきましょう。
lighthouse-ciを使う
ドキュメント内ではコマンドから利用する方法と、node上から利用する方法の2パターンが紹介されています。
特にスコア計測に対して細かい設定など必要ない場合はコマンドから利用するのが一番楽そうです。
ただnode上からの実行でもそこまで手間ではないので、好みのほうを使ってよさそうな気がします。
今回はコード上から利用する方法について紹介したいと思います。
lighthouse-ciのコマンドでスコアの中央値を出す
1 2 3 4 5 6 | # 5回計測する npx -p @lhci/cli lhci collect --url https://example.com -n 5 # 計測した結果を出力する npx -p @lhci/cli lhci upload --target filesystem --outputDir ./path/to/dump/reports # 計測した結果の中央値のスコアページを開く（uploadしてなくても開く） npx -p @lhci/cli lhci open |
コマンドのドキュメント：https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/configuration.md#open
uploadコマンドで出力されたmanifest.jsonは以下のようになっています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | [ { "url": "https://example.com/", "isRepresentativeRun": false, "htmlPath": "/Users/ryuto/path/to/dump/reports/example_com-_-2023_08_02_05_52_35.report.html", "jsonPath": "/Users/ryuto/path/to/dump/reports/example_com-_-2023_08_02_05_52_35.report.json", "summary": { "performance": 1, "accessibility": 0.92, "best-practices": 1, "seo": 0.91, "pwa": 0.3 } }, ... ] |
isRepresentativeRunがtrueになっているものが中央値なので、値を扱ってアレコレしたい場合はそこだけ抽出すればOKな感じですね。
中央値を抽出する
以下のmedian.jsファイルを作成し、 node median.js を実行することで中央値を使った処理を実行することが可能になります。
1 2 3 4 5 | const fs = require('fs'); const lhciManifest = require('./path/to/dump/reports/manifest.json'); const medianEntry = lhciManifest.find(entry => entry.isRepresentativeRun) const medianResult = JSON.parse(fs.readFileSync(medianEntry.jsonPath, 'utf-8')); console.log('Median performance score was', medianResult.categories.performance.score * 100); |
Tips
lighthouse-ciでは、lighthousercファイルを設定することによって、色々な設定を追加することができます。
https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/configuration.md#configuration-file
ドキュメント上だとわかりづらかったり、書いてあることが古い箇所が多かったので、いくつかよく使うであろう設定を紹介していきます。
今回はlighthouserc.jsをcollectコマンドを実行するディレクトリ直下に作成し、設定を追加していきます。
リクエストヘッダーの設定
Basic認証が導入されているページなどの検証に必要な設定です。
Basic認証の検証として以下サイトを利用してやってみましょう。
http://leggiero.sakura.ne.jp/xxxxbasic_auth_testxxxx/
lighthouserc.jsに以下を設定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | const id = "kaiin" const pass = "naisho" module.exports = { ci: { collect: { settings: { extraHeaders: { Authorization: `Basic ${btoa(`${id}:${pass}`)}` }, }, }, } } |
そして以下のコマンドで計測が成功することを確認してください。
1 | npx -p @lhci/cli lhci collect --url http://leggiero.sakura.ne.jp/xxxxbasic_auth_testxxxx/secret/kaiin_page_top.htm -n 5 |
レポートファイルを日本語にしたい
デフォルト設定の場合、uploadやopenコマンドで出力されるレポートファイルは英語になっています。
これを日本語にする方法です。
lighthouserc.jsに以下を設定します。
1 2 3 4 5 6 7 8 9 | module.exports = { ci: { collect: { settings: { locale: 'ja' }, }, } } |
再度collectコマンドを実行する必要があることに注意してください。
これでuploadやopenコマンドで出力されるものが日本語になります。
デスクトップ用（PC）のページで検証したい
デフォルトの場合、devtools上のLighthouseで言うところの「モバイル」での計測になっています。
これを「デスクトップ」で計測する方法です。
lighthouserc.jsに以下を設定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | module.exports = { ci: { collect: { settings: { formFactor: 'desktop', screenEmulation: { mobile: false, width: 1350, height: 940, deviceScaleFactor: 1, disabled: false, } }, }, } } |
collectを実行したあとのopenコマンドで表示される、レポート上の画像がデスクトップの大きさになっていることが確認できると思います。
UserAgentの設定
UserAgentによって表示が変わるページ向けの設定です。
以下のサイトで現在のUserAgentを表示してくれるので、こちらで計測して確認してみましょう。
https://testpage.jp/tool/ip_user_agent.php
lighthouserc.jsに以下を設定します。
1 2 3 4 5 6 7 8 9 | module.exports = { ci: { collect: { settings: { emulatedUserAgent: "hoge" }, }, } } |
以下コマンドを実行した後、openコマンドを実行し、表示される画像の「ブラウザのユーザーエージェント」が上記で設定したものになっていることを確認してください。
1 | npx -p @lhci/cli lhci collect --url https://testpage.jp/tool/ip_user_agent.php -n 5 |
その他の設定
こちらにあるように本家lighthouse側のドキュメントを確認してください。
https://github.com/GoogleChrome/lighthouse/blob/main/docs/configuration.md
ただしsettingsに関しては、our config settings typedefのリンク先の情報が古い？のか、
設定されない項目があるので（emulatedFormFactorとか廃止されていたり）、
最新版のlighthouse側で用意されているconfigファイルを確認しながら調査していくのが楽かもしれません…
書いた人はこんな人
IT技術10月 27, 2023Jiraの自動化- IT技術8月 16, 2023Lighthouseで計測したパフォーマンススコアのばらつきを減らす方法
- IT技術11月 7, 2022Ruby on Rails＆GraphQLのエラーレスポンス
- IT技術7月 13, 2022Ruby on Rails & GraphQLの環境構築と実装
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
