1. このページの目的
大量に画像が貼っていあるページのパフォーマンスを観察する。
2. デモ
上から2つの画像は loading="eager"
を指定している。それ以降の画像には loading="lazy"
を指定している。
![](photo-001-800w.webp)
![](photo-002.webp)
![](photo-003.webp)
![](photo-004.webp)
![](photo-005.webp)
![](photo-006.webp)
![](photo-007.webp)
![](photo-008.webp)
![](photo-009.webp)
![](photo-010.webp)
![](photo-011.webp)
![](photo-012.webp)
![](photo-013.webp)
![](photo-014.webp)
![](photo-015.webp)
![](photo-016.webp)
![](photo-017.webp)
![](photo-018.webp)
![](photo-019.webp)
![](photo-020.webp)
![](photo-021.webp)
![](photo-022.webp)
3. パフォーマンスを観察する
Chrome DevTools Performance パネルで解析した(モバイルのサイズ)。
![](2021-10-12_001.webp)
- この画像からは分からないが、一番上左側の画像が LCP の対象になった。
- その画像がダウンロードされ表示された時点で、LCP が発生している。
- 22個ある画像のうち、上から3つしかダウンロードしていない。
4. メモ
- LCP の対象となる画像ファイルを、少しでも速くダウンロードして表示することが大切である。
5. 関連
- 画像サイズのテスト (1ファイルだけをテストするページ)