フロントエンドの各種パフォーマンス指標の定義を図で整理する
フロントエンドのパフォーマンス指標は種類が多くて各指標の定義や関係性を把握するのが難しいと感じる。自分はよく分からなくなるので整理するために図にしてみた。
各指標の定義と関係性
図を作るにあたり以下の URL の内容を参考にした。TTFB と SpeedIndex は図に含めていないので詳細は該当リンクを参照。
| 指標 | リンク |
|---|---|
| LCP | https://web.dev/lcp/ |
| FID | https://web.dev/fid/ |
| CLS | https://web.dev/cls/ |
| TTFB | https://web.dev/ttfb/ |
| FCP | https://web.dev/fcp/ |
| TBT | https://web.dev/tbt/ |
| TTI | https://web.dev/tti/ |
| SpeedIndex | https://developer.mozilla.org/ja/docs/Glossary/Speed_index |
Core Web Vitals vs Lighthouse
パフォーマンス指標のついでに補足。Core Web Vitals と Lighthouse は何が違うのか？ そもそも Core Web Vitals とは何なのか？
- Core Web Vitals はパフォーマンス指標のサブセット（グループ）
- Lighthouse や PageSpeed Insights などのツールで測定できる
- Web Vitals より引用
Core Web Vitals に含まれている各指標は、ユーザー エクスペリエンスに関する特徴的な観点を提供し、フィールド データの測定が可能であり、ユーザーを中心とした重要な結果に基づく実際のユーザー体験を反映します。
- Lighthouse はパフォーマンス指標の測定やベストプラクティスの提案を行う解析ツール
指標別に表にするとこうなる。
| 指標 | Core Web Vitals に含まれる | Lighthouse で測定できる |
|---|---|---|
| LCP | ○ | ○ |
| FID | ○ | ☓(TBT で代用) |
| CLS | ○ | ○ |
| TTFB | ☓ | ☓ |
| FCP | ☓ | ○ |
| TBT | ☓ | ○ |
| TTI | ☓ | ○ |
| SpeedIndex | ☓ | ○ |
Lighthouse は Core Web Vitals を測定できることになっているが、FID は測定できない。代わりに TBT を測定するらしい。TBT と FID は多くのケースで近似できるということなんだろうか？ （Core Web Vitals を測定するためのツール を参照）
