1. このページの目的
大量に画像が貼っていあるページのパフォーマンスを観察する。
2. デモ
上から2つの画像は loading="eager" を指定している。それ以降の画像には loading="lazy" を指定している。
3. パフォーマンスを観察する
Chrome DevTools Performance パネルで解析した（モバイルのサイズ）。
- この画像からは分からないが、一番上左側の画像が LCP の対象になった。
- その画像がダウンロードされ表示された時点で、LCP が発生している。
- 22個ある画像のうち、上から3つしかダウンロードしていない。
4. メモ
- LCP の対象となる画像ファイルを、少しでも速くダウンロードして表示することが大切である。
5. 関連
- 画像サイズのテスト (1ファイルだけをテストするページ)