0. はじめに
サイトパフォーマンスのチューニングを行う際、まずはLighthouseやPageSpeed Insightsで計測して現状を把握することが多いと思います。
ただ、計測結果を確認すると「どの指標もスコアが悪くて、どれから改善すればいいか分からない」や「どの指標を改善するとスコアへの効果が大きいんだろう」といったようにどの指標を改善すればいいか分からずに、とりあえず色んな記事で書かれているベストプラクティス的な施策を実装してみたり、脳死で「FCPとかLCPが重要そうだし、そこから改善策を考えよっと」で対応を進めている人も少なくないのではないでしょうか？
そういったパフォーマンスチューニングやりたいけど、計測後どこから手をつければいいか分からない人たちへの参考になれば良いなと思います。
1. パフォーマンススコアの「重み付け」
実は、Lighthouse のパフォーマンススコアは、単純な合計点ではなく、各指標に「重み付け」をかけた加重平均で算出されています。指標の重み付けが大きいほど、パフォーマンススコア全体に対する影響も大きくなります。この重み付けを知ることで、より効率的な改善アプローチが見えてきます。
2. Lighthouse 10 の指標と重み付け
Lighthouse 10 における主要なパフォーマンス指標とその重み付けは以下の通りです:
| 指標 | 重み |
|---|---|
| FCP (First Contentful Paint) | 10% |
| SI (Speed Index) | 10% |
| LCP (Largest Contentful Paint) | 25% |
| TBT (Total Blocking Time) | 30% |
| CLS (Cumulative Layout Shift) | 25% |
重み付けの重量は、パフォーマンスに対するユーザーの認識に最も大きな影響を与えるものを把握するために、Lighthouse チームが定期的な調査とフィードバック収集を行いながら選択しており、時間とともに変化する可能性があります。
3. 効率的なパフォーマンスチューニングのためにどの指標を優先すべきか？
パフォーマンスチューニングを行う際に、「どの指標から改善すべきか」を判断するために、この重み付けの情報が非常に役立ちます。
効率的にスコアを改善するためには、「重み付けの重量が重い」 かつ 「現状のスコアが悪い指標」 を選択すると良いでしょう。
例えば、Lighthouse 10 では TBT (30%)、LCP (25%)、CLS (25%) の重み付けが高くなっています。もしこれらの指標のスコアが低い場合、改善による全体スコアへの影響が大きくなる可能性が高いです。
逆に、FCP の重み付けは 10% と比較的低いです。もし FCP のスコアが悪かったとしても、これに多くの工数をかけて改善しても、重み付けが低いため全体スコアへの影響は限定的になる可能性があります。もちろん、最終的には全ての指標を改善するのが理想ですが、実際の開発現場では工数や時間が限られていることが多いため、この重み付けを考慮した優先順位付けが効果的です。
4. パフォーマンススコア計算ツール
Lighthouse スコア計算ツールを使用すると、チューニングをする前にそれぞれの指標がどのくらい改善すれば目標のパフォーマンススコアに達するかをシミュレーションすることができます。
例えば、以下のようなパフォーマンスのサイトがあったとします。
仮にFCPが合格ライン(1,000ms）に達してもパフォーマンススコアは「46」までしか伸びないことがわかります。
LCPをFCPと同じ時間（3,200ms）にするとスコアが「56」まで伸びます。
この場合は、「重み付けの重量が重い」 かつ 「現状のスコアが悪い指標」 の「LCP」か「TBT」を改善する指標にすると良いと思います。
5. まとめ
Lighthouse のパフォーマンススコアは、各指標の重み付けによって大きく影響されます。
この重み付けを理解し、特に「重み付けが高く」「現状のスコアが低い」指標から優先的に改善に取り組むことで、限られたリソースの中で効率的にウェブサイトのパフォーマンスを向上させ、より良いユーザー体験を提供することに繋がるでしょう。
パフォーマンスチューニングの判断材料として、ぜひ Lighthouse の重み付け情報を活用してみてください。