Web Vitalsのスコアを計測するためにLighthouseを用いることがあると思うのですが、このスコアは実行するデバイスのCPUスペックによって変化するので注意が必要です。
一般的に、Lighthouseはリアルユーザー環境での計測と違い、計測ごとのスコアのブレが少ないという特徴があります。
ただし、計測ごとにスコアのブレが少ないものの、そもそものスコアの値は環境により異なります。
これは、Lighthouseで計測するときのスロットリング方法によるものです。
(リアルユーザー環境とラボ環境での計測の違いについてはこちらをご覧ください)
Lighthouseで計測するときのスロットリング方法
Lighthouseでは、計測の際にスロットリングを行います。
例えば、Mobile Deviceを想定してLighthouseを実行する時に、NetworkスロットリングとCPUスロットリングが行なわれます。
実際の設定値はこちらで確認できます。
このうち､CPUスロットリングはホストのデバイスのスペックを基準に相対的に遅くすることで実現しています。
実際のユーザーの使うデバイスと、シミュレートする環境での差分に注意する
そのため、CPUスロットリングでシミュレートしているデバイスと、実際のユーザーの使うデバイスのスペックに乖離がないかを確認しないと、スコアと実態の乖離が生まれる恐れがあります。
Lighthouse BenchmarkIndexという指標で表されているのですが、これを確認しましょう。
ちなみに、手元のM1 Macbook Airで計測してみるとこのような値になりました。
BenchmarkIndexはLighthouse実行後にフッターに表示されています。
このBenchmarkIndexを基準にMobile環境では4倍遅くして計測しています。
しかし、以下の表にあるように、元々の計測環境がHigh-End Desktopなのか、Low-End Desktopなのかによって、4倍遅くしたときにMid-Tier Mobileスペックになるのか、Low-End Mobileスペックになるのかに違いが生まれてしまいます。
また、このMid-Tier Mobile、Low-End Mobileとしている基準も、2017年の統計結果となっている点にも注意が必要です。
つまり、年々デバイスのスペックが上がっている点も考慮に入れたほうがよさそうです。
例えばグラフを見ると、比較されているiPhoneは「iPhone 8」のようです。
実行するCPUのスペックが異なると、JavaScriptの実行速度が変わることからスコアに大きな影響が予想されます。
スコアがどのスペックで計測されたものなのかを知り、リアルユーザーのデータと突き合わせて差分を把握しておきましょう。
参考
- lighthouse/throttling.md at main · GoogleChrome/lighthouse · GitHub
- JavaScript Start-up Optimization
- The cost of JavaScript in 2019 · V8
- JavaScript Start-up Performance. Update: The Cost Of JavaScript In 2019… | by Addy Osmani | reloading | Medium
- Can You Afford It?: Real-world Web Performance Budgets - Infrequently Noted