이미지 지연 로딩 loading=lazy

<img loading="lazy" src="...">는 이미지가 뷰포트에 들어오기 직전까지 이미지 다운로드를 미루도록 브라우저에 지시합니다. 모든 최신 브라우저에서 기본적으로 지원되므로 이미지가 많은 페이지의 성능을 가장 간단하게 개선할 수 있는 방법입니다.

브라우저는 작은 휴리스틱 여유 영역을 사용합니다(일반적으로 화면 아래쪽 끝에서 수천 픽셀 정도입니다). 사용자가 이미지까지 스크롤할 때 이미지가 이미 완전히 렌더링되어 있도록 충분히 일찍 로드를 시작하므로, 신중하게 스크롤하는 사용자에게 지연 로딩은 보이지 않습니다.

화면 아래쪽 끝 위에 있거나 LCP(최대 콘텐츠 렌더링) 후보인 이미지에는 절대로 loading="lazy"를 설정하지 마십시오. 지연된 로드 때문에 가장 중요한 시각적 요소가 늦게 표시되어 사용자가 느끼는 속도와 핵심 웹 바이털 모두에 악영향을 줍니다.

지연 로딩이 효과적으로 작동하려면 <img>에 명시적인 width와 height(또는 aspect-ratio CSS)를 지정하십시오. 크기 정보가 없으면 브라우저가 공간을 미리 확보할 수 없고, 스크롤할 때 레이아웃이 다시 배치되며, 지연 로딩 휴리스틱도 제대로 작동하지 않습니다.

같은 속성을 <iframe>에도 사용할 수 있습니다. <iframe loading="lazy">는 화면 아래쪽 끝에 있는 지도, 동영상, 소셜 미디어 삽입 콘텐츠의 로드를 미룹니다. 그렇지 않으면 이러한 요소가 페이지를 볼 때마다 서드파티 JavaScript를 수 메가바이트씩 불러옵니다.

기본값은 loading="eager"(즉시 로드)이며, 명시적으로 작성하는 경우는 드뭅니다. 화면 위쪽에 있는 이미지에 eager를 설정하면 문서화 측면에서 유용할 수 있습니다. eager를 선택한 것이 의도적이었다는 사실을 검토자에게 알려 주기 때문입니다.

지연 로딩은 반응형 이미지와 완벽하게 결합됩니다. 브라우저는 여전히 srcset에서 적절한 후보를 선택하고, 다운로드만 미룹니다. loading="lazy"와 srcset 사이에 별도의 조정은 필요하지 않습니다.

지연 로딩을 decoding="async"와 함께 사용하면 브라우저가 주 스레드 밖에서 이미지를 디코딩하도록 할 수 있습니다. 긴 스크롤이 한꺼번에 발생한 뒤 많은 이미지가 동시에 도착할 때 입력 처리가 차단되는 것을 방지합니다.

CSS background-image는 기본적으로 지연 로딩할 수 없습니다. 화면 위쪽의 주요 배경이라면 문제가 되지 않지만, 화면 아래쪽의 배경에는 IntersectionObserver를 사용해 요소가 뷰포트에 가까워질 때 URL을 설정하십시오.

페이지를 인쇄할 때는 loading="lazy"와 관계없이 브라우저가 모든 이미지를 즉시 로드하므로 인쇄본이 완전하게 표시됩니다. 인쇄용 스타일시트에서 지연 로딩 이미지를 별도로 처리할 필요가 없습니다.

Lighthouse의 ‘화면 밖 이미지 지연’ 감사 항목에는 loading="lazy"를 사용해야 하는 모든 이미지가 나열됩니다. 네트워크 패널에서 ‘Img’로 필터링하고 ‘Waterfall’ 보기로 전환하면 지연 로딩으로 인해 로드가 분산되는 모습을 확인할 수 있습니다. 이미지 갤러리에서는 초기 요청 수가 크게 줄어듭니다.

화면 밖의 <img>와 <iframe> 요소에 loading="lazy"를 설정하는 것은 속성 하나만으로 성능을 개선하는 방법입니다. 명시적인 width/height(공간 확보용), srcset(반응형 지원용), decoding="async"(부드러운 스크롤 유지용)를 함께 사용하십시오. LCP 이미지나 초기 뷰포트에 표시되는 요소에는 절대로 적용하지 마십시오.