More than 1 year has passed since last update.

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

Last updated at 2023-04-01Posted at 2022-05-20

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

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

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

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

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

前回の記事でLighthouseを使った計測をする仕組みについて説明しました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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