Lighthouse での全体的なパフォーマンス スコアの計算方法
一般に、Lighthouse のパフォーマンス スコアに影響するのはmetricsのみで、最適化案や診断の結果には影響しません。とはいえ、機会と診断を改善することで指標の値も改善する可能性があるため、間接的な関係があります。
以下では、スコアが変動する理由、スコアを構成する方法、Lighthouse での各指標のスコア付けの仕組みを簡単にまとめています。
スコアが変動する理由
全体的なパフォーマンス スコアと指標の値が大きく変動するのは、Lighthouse に起因するものではありません。パフォーマンス スコアが変動する場合は、通常、根本的な状況の変化が原因です。一般的な問題は次のとおりです。
- A/B テストや配信中の広告の変更
- インターネット トラフィック ルーティングの変更
- 高性能なデスクトップ パソコンや低パフォーマンスのノートパソコンなど、さまざまなデバイスでテストする
- JavaScript を挿入し、ネットワーク リクエストを追加/変更するブラウザ拡張機能
- ウィルス対策ソフトウェア
詳細については、Lighthouse の Variability のドキュメントをご覧ください。
また、Lighthouse では全体的なパフォーマンス スコアは 1 つに絞ることができますが、サイトのパフォーマンスを、単一の数値ではなくスコアの分布として捉えた方がよい場合もあります。理由については、ユーザー中心のパフォーマンス指標の概要をご覧ください。
パフォーマンス スコアの重み付けの仕組み
パフォーマンス スコアは、指標スコアの加重平均です。当然のことながら、指標の重み付けが大きいほど、全体的なパフォーマンス スコアに対する影響が大きくなります。指標スコアはレポートには表示されませんが、内部で計算されます。
灯台 10
| 監査 | 重量 |
|---|---|
| First Contentful Paint | 10% |
| Speed Index | 10% |
| Largest Contentful Paint | 25% |
| Total Blocking Time | 30% |
| Cumulative Layout Shift | 25% |
灯台 8
| 監査 | 重量 |
|---|---|
| First Contentful Paint | 10% |
| Speed Index | 10% |
| Largest Contentful Paint | 25% |
| 操作可能になるまでの時間 | 10% |
| Total Blocking Time | 30% |
| Cumulative Layout Shift | 15% |
指標スコアの決定方法
Lighthouse は、パフォーマンス指標（ほとんどの場合はミリ秒単位で報告）を収集すると、Lighthouse のスコア分布における指標の値の位置を確認し、各未加工の指標値を 0 ～ 100 の指標スコアに変換します。スコアリング分布は、HTTP Archive 上の実際のウェブサイト パフォーマンス データのパフォーマンス指標から得られる対数正規分布です。
たとえば、Largest Contentful Paint（LCP）は、ページの最大コンテンツが表示されたとユーザーが認識したタイミングを測定します。LCP の指標値は、ユーザーがページの読み込みを開始してから、ページがメイン コンテンツをレンダリングするまでの時間を表します。実際のウェブサイトのデータによると、高パフォーマンスのサイトでは LCP が約 1,220 ミリ秒でレンダリングされるため、指標の値はスコア 99 にマッピングされます。
もう少し詳しく説明すると、Lighthouse のスコアリング曲線モデルでは、HTTPArchive データを使用して 2 つのコントロール ポイントを特定し、対数正規曲線の形状を設定します。HTTPArchive データの 25 パーセンタイルはスコア 50（中央のコントロール ポイント）になり、8 パーセンタイルのスコアは 90（良好/緑のコントロール ポイント）になります。以下のスコアリング曲線を確認すると、0.50 から 0.92 は指標の値とスコアの間にほぼ線形の関係があることに注意してください。スコアが 0.96 前後が「収穫減りのポイント」であり、これを超えると曲線が下がり、すでに高いスコアを改善するには、ますます指標の改善が必要になります。
パソコンとモバイルの違いの処理方法
前述のとおり、スコア曲線は実際のパフォーマンス データから算出されます。Lighthouse v6 より前のバージョンでは、すべてのスコア曲線がモバイルのパフォーマンス データに基づいていましたが、パソコンでの Lighthouse の実行ではこのデータに基づいていました。実際、これによってパソコンのスコアが人為的に水増しされてしまいました。Lighthouse v6 では、特定のデスクトップ スコアリングを使用してこのバグが修正されました。 パフォーマンス スコアの全体的な変化は 5 ～ 6 程度ですが、パソコンでは大きく異なるスコアになります。
スコアが色分けされる仕組み
指標スコアとパフォーマンス スコアは、次の範囲に応じて色分けされます。
- 0 ～ 49（赤）: 低い
- 50 ～ 89（オレンジ）: 要改善
- 90〜100（緑）: 良い
優れたユーザー エクスペリエンスを提供するため、サイトは良いスコア（90 ～ 100）を獲得するよう努めます。「完璧」な 100 というスコアを達成することは非常に困難であり、想定もされていません。 たとえば、スコアを 99 から 100 にするには、90 から 94 にする場合とほぼ同じ量の指標の改善が必要です。
パフォーマンス スコアを改善するためにデベロッパーができること
まず、Lighthouse のスコア計算ツールを使用して、Lighthouse で特定のパフォーマンス スコアを達成するためにどのようなしきい値を設定するかを把握します。
Lighthouse レポートの [最適化案] セクションには、導入方法についての詳細な提案とドキュメントが記載されています。また、[診断] セクションには、デベロッパーがパフォーマンスをさらに改善するための追加のガイダンスが記載されています。