📈
Lighthouseの様々な指標
初めに
Lighthouseに出会ったきっかけは、webパフォーマンスチューニングを勉強したときにフロントエンド
のパフォーマンスを改善するための指標として使用したときです。まず、「Lighthouse」は、Googleが開発したWebサイトの品質を評価・改善するためのオープンソースのツールです。今回はLighthouseの指標についてまとめていきたいと思います。
Lighthouseの使い方
デベロッパーツール(DevTools)を開いた後、「Lighthouse」タブをクリックし、ページ読み込みを分析(Analyze page load)をクリックする。
Lighthouseの指標について
今回は、個人開発で自分自身で作成したwebアプリでの計測結果を使用しながらLighthouseの様々な指標についてまとめていきたいと思います。
先ず、指標は以下のように大きく4つに分かれています。それぞれを詳しく見ていこうと思います。
- Performance (パフォーマンス)
- Accessibility (アクセシビリティ)
- Best Practices (ベストプラクティス)
- SEO
1. Performance (パフォーマンス)
FCP、LCP、TBT、CLS、SIについて表にまとめたいと思います。
| 指標名 | 意味 | 理想的な基準 |
|---|---|---|
| FCP (First Contentful Paint) | ユーザーがページにアクセスしてから、ページの何らかのコンテンツが初めて画面に表示されるまでの時間。 | 1.8秒以内 |
| LCP (Largest Contentful Paint) | ページの読み込み開始から、ビューポート内で最も大きい画像またはテキストブロックが表示されるまでの時間。 | 2.5秒以内 |
| TBT (Total Blocking Time) | ページが視覚的に表示されてから完全に操作可能になるまでの間に、メインスレッドが50ミリ秒以上ブロックされた時間の合計。 | 200ミリ秒以内 |
| CLS (Cumulative Layout Shift) | ページの読み込み中に発生する予期せぬレイアウトのずれ（視覚的な不安定さ）の合計スコア。 | 0.1以内 |
| SI (Speed Index) | ページのコンテンツが視覚的に表示される速さを数値化したもの。数値が低いほど、視覚的なコンテンツの表示が速いことを示す。 | 低いほど良好（目安：3.4秒以内） |
2. Accessibility (アクセシビリティ)
Lighthouseの「Accessibility (アクセシビリティ)」カテゴリは、ウェブサイトが障がいを持つユーザーを含む、すべてのユーザーにとってどれだけ使いやすいかを評価しています。
3. Best Practices (ベストプラクティス)
Lighthouseの「Best Practices (ベストプラクティス)」カテゴリは、ウェブサイトが最新のウェブ標準、セキュリティ、および一般的な開発の推奨事項にどれだけ準拠しているかを評価します。
4. SEO
Lighthouseの「SEO (検索エンジン最適化)」カテゴリは、ウェブサイトが検索エンジンの基本的なベストプラクティスにどれだけ準拠しているかを評価します。
まとめ
- フロントエンドのパフォーマンスチューニングではLighthouseが便利
- 指標は大きく4つに分かれていて、 Performance (パフォーマンス)、Accessibility (アクセシビリティ)、 Best Practices (ベストプラクティス)、SEOである。
- 上記の指標を改善していくことでパフォーマンスが向上する。
Discussion