이미지/iframe의 네이티브 lazy loading은 어떻게 동작하나요?

Question

Accepted Answer

`loading="lazy"` attribute는 브라우저에게 이미지나 iframe이 뷰포트에 들어오려 할 때까지 **로딩을 미루라**고 알려줍니다. JavaScript 없이 대역폭을 절약하고 초기 로드를 빠르게 합니다. ```html

``` ## 동작 방식 - **`lazy`** — 스크롤로 뷰포트 근처에 올 때만 로드합니다. - **`eager`**(기본값) — 위치와 관계없이 즉시 로드합니다. 브라우저는 여백을 두어(element가 화면에 들어오기 약간 전에 로드) 사용자가 볼 때쯤 이미지가 보통 준비되어 있게 합니다. ## 핵심 조합: layout shift를 피하려면 width/height를 설정하라 ```html

``` 치수(또는 `aspect-ratio`)가 없으면 지연 로드된 이미지에 예약된 공간이 없으므로, 로드될 때 페이지가 **튑니다**. Cumulative Layout Shift(CLS)를 해칩니다. 항상 공간을 예약하십시오. ## above-the-fold 콘텐츠를 지연 로드하지 마라 ```html

``` **Largest Contentful Paint** 이미지를 지연 로드하면 오히려 성능을 *해칩니다*. 가장 중요한 픽셀을 지연시킵니다. 화면 밖 미디어만 지연 로드하십시오. ## 네이티브 이전: IntersectionObserver ```js // 네이티브 lazy-loading이 대체한 옛 수동 방식 const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) e.target.src = e.target.dataset.src; }); }); ``` 네이티브 `loading="lazy"`는 대부분의 경우 이것의 필요를 없앴습니다(다만 커스텀 로직에는 IntersectionObserver가 여전히 유용합니다). ## 왜 중요한가 네이티브 lazy loading은 이미지가 많은 긴 페이지에서 초기 바이트와 요청을 줄여줍니다. 모바일에서 큰 이득이며 무료입니다. 뉘앙스가 중요합니다. CLS를 보호하기 위해 치수를 예약하고, above-the-fold/LCP 이미지는 (심지어 `fetchpriority="high"`까지) eager로 유지하여 중요한 콘텐츠가 여전히 빠르게 로드되게 하십시오.