1. このページの目的
画面の最初にまぁまぁのサイズの画像がある場合、PageSpeed Insights で測定すると LCP の値が悪い。どうしたものか？
2. メモ
- モバイルでのLCP値が突出して悪い。
- Totalのスコアは悪くない。
loading="lazy"してもあまり変わらない。- 画像サイズを小さくしてもあまり変わらない。
- Lazy-loading images で説明されているように、IntersectionObserver を使い、画像が viewport に入ったと判断されたときに読み込むようにしても、あまり変わらない。
- 広告のスクリプトを外すと良くなる。
- モバイルだと広告スクリプトの処理が長い？
- モバイルは低いスペックを想定して計測している？
- PageSpeed Insights でのモバイル分析 によると、やはりモバイルにはより厳しい条件を課している模様。だから評価が厳しい。
3. 結果
- モバイルのLCPは、何やっても良い値にならない。
- モバイル用のページでは、ページトップ位置に画像は置かないという選択肢しかない。