Lighthouseまじ便利。…
はじめに
Lighthouseは単純に転送速度のスコアとしては使えないものなので、高速化のコンテキストからは外れてしまいます。
ただしスコアが表示されるということや、広く使われているということもあり他者と共有したり指標にしやすいツールだといえます。
何をつかってる？
ところでLighthouseは何をつかってますか？
- PSI(PageSpeed Insight)
https://developers.google.com/speed/pagespeed/insights/ - ChromeブラウザのDevTools
- Web.devのMeasure
https://web.dev/measure/
おそらく、こちらの3点を利用されている方が多いのではないかと思います。
気軽に計測できていいですよね！
…ただ、ここらへんを使ってる人は要注意なことがあります。
「Lighthouseでn点です！」
「Lighthouseのスコア全部100点です。」…すごいですよね。
スコアは共有するのに良いと言いましたが実は大きな問題があります。
それはバージョンによって算出方法が異なっているということです。
日々計測の計算は検討され続けているのです。
前回の100点と、今回のn点は違う。
広く使われているLighthouseは、先に紹介していたPSIやDevToolsといったものです。
お気づきかと思いますが、実はこれらは最新のものではなく少し古いバージョンが入っていることがあります…
なので、100点は100点じゃないことがあります…。
バージョンによって、100点が0点になることあるの？→あるかもしれません。
というのはFCPが取得できないケースが多くありエラー判定になっている場合があります。その場合、計測不能になるため大きく減点されます。
各パフォーマンス計測の、スコアの重みに関してはこちらにまとまっています。
Lighthouseで計測する方法
最新バージョンを試すというのが、今後のスコアを見るという意味を含むので良いはずです。
こちら、nodeで簡単に試すことができます。
スコアを共有する際には、Lighthouseが出力するReportにしてください。
jsonやhtmlで出力できて、バージョン情報など計測状況が記載されます。
これを、開発時のテストやassetsのbuild毎に出力したりどこかにPOSTするとかしておくと良いかもしれません。
Web高速化の情報や記事のご指摘など教えていただきたいです！
こちらから連絡お待ちしています。
