りゅうちゃん（エンジニア）Lighthouseで計測したパフォーマンススコアのばらつきを減らす方法
りゅうちゃん（エンジニア）IT技術
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# 5回計測する
2npx -p @lhci/cli lhci collect --url https://example.com -n 5
3# 計測した結果を出力する
4npx -p @lhci/cli lhci upload --target filesystem --outputDir ./path/to/dump/reports
5# 計測した結果の中央値のスコアページを開く（uploadしてなくても開く）
6npx -p @lhci/cli lhci openコマンドのドキュメント：https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/configuration.md#open
uploadコマンドで出力されたmanifest.jsonは以下のようになっています。
1[
2 {
3 "url": "https://example.com/",
4 "isRepresentativeRun": false,
5 "htmlPath": "/Users/ryuto/path/to/dump/reports/example_com-_-2023_08_02_05_52_35.report.html",
6 "jsonPath": "/Users/ryuto/path/to/dump/reports/example_com-_-2023_08_02_05_52_35.report.json",
7 "summary": {
8 "performance": 1,
9 "accessibility": 0.92,
10 "best-practices": 1,
11 "seo": 0.91,
12 "pwa": 0.3
13 }
14 },
15 ...
16]isRepresentativeRunがtrueになっているものが中央値なので、値を扱ってアレコレしたい場合はそこだけ抽出すればOKな感じですね。
中央値を抽出する
以下のmedian.jsファイルを作成し、node median.js を実行することで中央値を使った処理を実行することが可能になります。
1const fs = require('fs');
2const lhciManifest = require('./path/to/dump/reports/manifest.json');
3const medianEntry = lhciManifest.find(entry => entry.isRepresentativeRun)
4const medianResult = JSON.parse(fs.readFileSync(medianEntry.jsonPath, 'utf-8'));
5console.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に以下を設定します。
1const id = "kaiin"
2const pass = "naisho"
3
4module.exports = {
5 ci: {
6 collect: {
7 settings: {
8 extraHeaders: {
9 Authorization: `Basic ${btoa(`${id}:${pass}`)}`
10 },
11 },
12 },
13 }
14}そして以下のコマンドで計測が成功することを確認してください。
1npx -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に以下を設定します。
1module.exports = {
2 ci: {
3 collect: {
4 settings: {
5 locale: 'ja'
6 },
7 },
8 }
9}再度collectコマンドを実行する必要があることに注意してください。
これでuploadやopenコマンドで出力されるものが日本語になります。
デスクトップ用（PC）のページで検証したい
デフォルトの場合、devtools上のLighthouseで言うところの「モバイル」での計測になっています。
これを「デスクトップ」で計測する方法です。
lighthouserc.jsに以下を設定します。
1module.exports = {
2 ci: {
3 collect: {
4 settings: {
5 formFactor: 'desktop',
6 screenEmulation: {
7 mobile: false,
8 width: 1350,
9 height: 940,
10 deviceScaleFactor: 1,
11 disabled: false,
12 }
13 },
14 },
15 }
16}collectを実行したあとのopenコマンドで表示される、レポート上の画像がデスクトップの大きさになっていることが確認できると思います。
UserAgentの設定
UserAgentによって表示が変わるページ向けの設定です。
以下のサイトで現在のUserAgentを表示してくれるので、こちらで計測して確認してみましょう。
https://testpage.jp/tool/ip_user_agent.php
lighthouserc.jsに以下を設定します。
1module.exports = {
2 ci: {
3 collect: {
4 settings: {
5 emulatedUserAgent: "hoge"
6 },
7 },
8 }
9}以下コマンドを実行した後、openコマンドを実行し、表示される画像の「ブラウザのユーザーエージェント」が上記で設定したものになっていることを確認してください。
1npx -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ファイルを確認しながら調査していくのが楽かもしれません…
ライトコードでは、エンジニアを積極採用中！
ライトコードでは、エンジニアを積極採用しています！社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
