Lighthouse計測方法
- 計測方法1：PageSpeedInsightsでテストする
- 計測方法2：ChromeのDevToolのLighthouseタブ
- アドオンを無効化する為シークレットウインドウで計測する
- ローカル環境でも計測可能
- PCスペックにより結果が異なる
改善前のスコア
スコアは５６点で詳細は以下でした....
LCP(Largest Contentful Paint)がPOORになっている
Lighthouse v8のスコアウェイト
| Audit | Weight |
|---|---|
| First Contentful Paint | 10% |
| Speed Index | 10% |
| Largest Contentful Paint | 25% |
| Time to Interactive | 10% |
| Total Blocking Time | 30% |
| Cumulative Layout Shift | 15% |
※ 参照：web.dev
LCPとは
Largest Contentful Paint (LCP) 指標は、ビューポート内に表示される最も大きい画像またはテキスト ブロックのレンダリング時間を、ページの初期読み込み開始タイミングと比較してレポートします。
※参照：web.dev
改善後のシミュレーションする
Lighthouse Scoring Calculatorの画面でLCPが何秒改善したらスコアが何点アップするのか確認できます。
今回目標が75点だったのでLCPを6.0secから2.5secに改善出来れば75点に到達する事がわかります。
LCPが遅い原因を調査する
ChromeのDevToolのPerformanceタブで確認するとLCPが遅延読込している画像になっている。
対象のプロダクトはWordPress環境で構築されており、lazysizesを使用して画像を全て遅延読込していた。
基本的にはファーストビューは遅延読込されないがHTML上では以下の記述になっておりlazysizes読込後に描画される為、描画が遅れてしまっていることが原因の可能性大。。。
<img data-src="https://example.com/path/sample-image.png" alt="タイトル" class="lazyload">
改善後
lazysizesではなく別の手法にて遅延読込を実装した結果。
LCPの表示がだいぶ早くなりました。
