開発者ツールのLighthouseを使いこなせてますか？

Chrome開発者ツールでLighthouseを使うときのTipsを紹介する記事です。

## パフォーマンス改善についての連載をしています！

QiitaでWebパフォーマンスの改善に取り組みはじめました!
そこで、どんな観点で分析をして、どう改善しているのかをシリーズとして投稿しています。

よろしければ他の記事も読んでみてください!

今回は番外編としてLighthouseのパフォーマンスレポートにおけるTipsを紹介します。

### シリーズ内容（予定）

1. :rocket: [【Core Web Vitals】Webパフォーマンスを改善するなら、まずは重要な指標について理解しよう](https://qiita.com/kyntk/items/7ae8763961b62111889e)
2. :rocket: [Lighthouse CI + Datadogを使ってパフォーマンスを継続的に計測する](https://qiita.com/kyntk/items/2086ece17387dccea61c)
2. :rocket: 【番外編】 開発者ツールのLighthouseタブのTips 【←今回はこれ】
3. :rocket: [LCPの改善でLighthouseだけ見てない？効果的に改善していくためのステップ](https://qiita.com/kyntk/items/1f69a80476294713082b)
4. FIDを改善する
5. CLSを改善する
6. キャッシュについて

## Lighthouseについて

[前回の記事](https://qiita.com/kyntk/items/2086ece17387dccea61c)でLighthouseを使った計測をする仕組みについて説明しました。

https://qiita.com/kyntk/items/2086ece17387dccea61c

その時は、CIで継続的に計測する方法を構築しましたが、手軽に計測するならChromeの開発者ツールを使うと便利です。

かんたんに以下のようなレポートを見ることができます。

![lighthouse.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143317/fae1f246-d3f1-149b-b3d8-65eb634322d2.png)

このレポートをより効果的に使うために、便利な機能をいくつか紹介していきます。

1. 改善したい項目を絞って改善点を見れる
2. 複数回計測して比べることができる
3. スコアの算出配分がビジュアライズできる
4. 計測をしたパフォーマンスの詳細を見ることができる
5. 一連のフローを設定して、パフォーマンスを計測することができる

## 1. 改善したい項目を絞って改善点を見れる

スクリーンショットの右下のオレンジ色でハイライトしているタブを使います。

![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143317/4813e50d-6044-a6a9-cb5f-0fb9a9006ba1.png)

改善項目にはLCP、CLSなどどの項目に影響するのか決まっているものがあり、それを絞込んで結果を見ることができます。

## 2. 複数回計測して比べることができる

計測結果を消さずに何回か計測をして、比較したくなることがあるはずです。

そんな時に、以下の画像の赤枠の部分 (:no_entry_sign:)を押して消さなくても、青枠の部分(+)を押すと、新たな計測をすることができます。

![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143317/738b2cbc-d66f-9b8f-5041-fa46510b233e.png)

そしてそのリストを選択して、過去の結果を見ることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143317/93afd5a0-0411-504c-c956-144affdd9dff.png)

また、残しておきたい場合は、JSONとしてダウンロードすることも可能です。

## 3. スコアの算出配分がビジュアライズできる

Lighthouseの各スコアを元に、最終的なスコアを算出しています。
各項目には重み付けがされているのですが、覚えてられないので、ここを確認することがあります。

確認の仕方はスコアの下にリンクがあるので、そこから見れます。

![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143317/e7b28f29-222e-ef47-21a3-f45e742f892a.png)

https://googlechrome.github.io/lighthouse/scorecalc/#FCP=1896&TTI=9398&SI=4436&TBT=202&LCP=1896&CLS=0&FMP=1896&device=mobile&version=9.5.0

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143317/dfb26eb7-b6cd-c91c-9475-3ae6c2b70d25.png)

このように、それぞれのスコアと、最終スコアの算出における計算がビジュアライズされています。

このチャートは自分で操作することもできます。

### 4. 計測をしたパフォーマンスの詳細を見ることができる

結果を見て、具体的なパフォーマンスの詳細を時系列で確認したいことがよくあります。

そんなときは、スコアのすぐ下の、「View Original Trace」を押すことで確認できます。

![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143317/56db3bc0-f637-fe35-0a8f-430b84165d02.png)

Performanceの計測結果を確認することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143317/b1923b47-2004-aad7-5ca8-5ef7c9a9ab59.png)

### 5. 一連のフローを設定して、パフォーマンスを計測することができる

Lighthouseタブではないのですが、Lighthouse 9の機能を使った、Recorderタブが追加されました。

https://developer.chrome.com/blog/lighthouse-9-0/

これはPuppeteerを使ってユーザージャーニーをレコードできる機能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143317/df88ff5e-3ba7-e465-095b-463d0ac34e22.png)

これによって、ページアクセスだけでない、複雑なレポートも取ることができそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143317/7110207d-8756-bab5-d79a-efa987e40b68.png)

## まとめ

Lighthouseを使いこなすためのTipsを5つ紹介しました。
これらを使うことで、Lighthouseのレポートを有効活用していきましょう!!!

1. 改善したい項目を絞って改善点を見れる
2. 複数回計測して比べることができる
3. スコアの算出配分がビジュアライズできる
4. 計測をしたパフォーマンスの詳細を見ることができる
5. 一連のフローを設定して、パフォーマンスを計測することができる

これからもパフォーマンス改善に関する記事を投稿していきますので、お楽しみに!