chrome devtoolのLighthouseを使ってフロントエンドパフォーマンスを分析する vol.1
Lighthouse とは
Lighthouse は、Google が無料で提供している Google Chrome の拡張機能です。Web サイトの評価をチェックすることができます。
Lighthouse は、Web ページの品質を向上させるために開発されたオープンソースの自動化された監査ツールです。サイトのパフォーマンス、ユーザー補助、プログレッシブ ウェブアプリ対応状況などについての監査を実行できます。
Lighthouse は、色や記号、スコアで評価結果を表示するため、サイトのよい点と問題点がわかりやすいのが特徴です。
Lighthouse でチェックできる項目は、以下に示すとおり、大きく分けて5つあります。Performance、ProgressiveWebApp、Accessibility、Best Practices、SEO。
Lighthouse をパソコンにダウンロードするには、Chrome にログインして同期を有効にするか自分宛に通知を送信します。 powered by ChatGPT
パフォーマンス分析で用いる指標について(Lighthouse 10)
| Metrics | 意味 |
|---|---|
| FCP | First Contentful Paint は、テキストまたは画像が初めてペイントされるまでにかかった時間です。 |
| LCP | Largest Contentful Paint は、最も大きなテキストまたは画像が描画されるまでにかかった時間です。 |
| TBT | タスクの処理時間が 50 ミリ秒を上回った場合の、コンテンツの初回ペイントから操作可能になるまでの合計時間（ミリ秒）です |
| CLS | Cumulative Layout Shift はビューポート内の視覚要素がどのくらい移動しているかを測定する指標です。 |
| Speed Index | Speed Index は、ページのコンテンツが取り込まれて表示される速さを表します。 |
特にFCP,LCP,TBT,Speed Indexについては処理速度に関わる指標になるので速度を分析したい時はこの辺りの指標に注目する必要があります。
今回は現時点での最新版であるLighthouse10ですが、Lighthouseのバージョンによって指標の用語が変わってくるので注意が必要です。
実際のLighthouseの分析結果
試しにAmazonのTopページを調べてみましたが、さすがとしか言えないくらい素晴らしいパフォーマンスです。
目標となるスコア設定
目標スコアを理想的な数値をWant,最低限の数値をMustとなる数値を設定します。これはどのようなサービス、どのくらいのトラフィックが想定されるかにもよるのであくまで一例です。
計測する指標と目標スコアの一例
| WANT | MUST | |
|---|---|---|
| FCP | <= 1.8s | <= 3.0s |
| LCP | <= 2.5s | <= 4.0s |
| TBT | <= 3.8s | <= 7.3s |
| CLS | <= 0.1 | <= 0.25 |
| Speed Index | <= 3.8s | <= 4.0s |
| Response | <= 100ms | <= 1000ms |
| Animation | <= 16.7ms(60FPS) | <= 33.3ms(30FPS) |
画面毎のスコア一覧
この指標を元に各ページを一覧にして各画面のパフォーマンスをスプレッドシートに洗い出しました。
指標の数値が悪くなっているページを赤線にして修正すべきページを明確化します。
続いて
処理速度に問題のあるページを洗い出すことができたので次は具体的にどこが処理に時間がかかっているかを分析していきます。
参考資料
Discussion