이미지 레이지 로딩은 이미지가 뷰포트에 가까워질 때까지 로드를 지연합니다. 올바르게 구현하면 이미지가 많은 페이지에서 초기 페이지 무게를 40~70% 줄입니다. 잘못 구현하면 — 가장 흔히 LCP 이미지에 레이지 로딩을 적용하는 경우 — 가장 중요한 성능 지표에 500ms 이상을 추가합니다. 여기에 완전한 가이드가 있습니다.

네이티브 레이지 로딩

가장 간단한 구현은 loading="lazy" HTML 속성입니다:

<img src="photo.webp" loading="lazy" width="800" height="600" alt="..." />

loading="lazy"의 브라우저 지원은 이제 96%+입니다. 지원하지 않는 브라우저는 단순히 속성을 무시하고 즉시 로드합니다 — JavaScript 폴백이 필요 없습니다.

네이티브 레이지 로딩은 뷰포트로부터의 거리 임계값을 사용하여 로드 시작 시점을 결정합니다. Chrome은 빠른 연결에서 뷰포트 아래 약 1250px, 느린 연결에서는 2500px에서 이미지 로드를 시작합니다.

LCP 함정: 히어로 이미지에 절대 레이지 로딩 쓰지 마세요

가장 흔한 레이지 로딩 실수는 페이지의 첫 번째 보이는 이미지 — 보통 LCP 후보인 히어로나 배너 이미지 — 에 loading="lazy"를 추가하는 것입니다.

LCP 이미지가 레이지 로딩되면, 브라우저는 레이지 로딩 트리거가 발생할 때까지 요청을 지연합니다. 이미지가 로드 시 뷰포트에 있으므로 트리거는 즉시 발생하지만, 페이지 로드와 트리거 사이의 지연이 LCP에 300~600ms를 추가할 수 있습니다.

수정 방법: above-the-fold 이미지에는 절대 loading="lazy"를 추가하지 마세요. 대신 fetchpriority="high"를 추가하여 브라우저에 이 이미지를 우선시하도록 신호하세요.

레이지 로딩과 WebP 결합

레이지 로딩은 초기 로드 시 가져와야 할 이미지 수를 줄입니다. 이미지를 WebP로 변환하면 각 요청의 크기가 줄어듭니다. 함께 배율로 작용합니다: 200KB(JPEG) 이미지 20개가 있는 페이지를 레이지 로딩하면 초기 페이로드는 ~0KB이고, 요청 시 각 ~100KB(WebP)입니다. Picovert에서 이미지를 변환하세요.

커스텀 레이지 로딩을 위한 Intersection Observer

네이티브 레이지 로딩이 충분하지 않은 경우(복잡한 애니메이션, 배경 이미지, iframe)를 위해 Intersection Observer API를 사용하세요. rootMargin: '200px'을 사용하여 이미지가 뷰포트에 들어오기 200px 전에 로드를 시작하여 빠른 스크롤 시 로딩 플래시를 방지하세요.

Next.js의 레이지 로딩

Next.js의 next/image 컴포넌트는 기본적으로 모든 이미지에 loading="lazy"를 적용합니다. LCP 이미지에 대해 비활성화하려면 priority를 추가하세요:

<Image src='/hero.webp' priority width={1200} height={630} alt='Hero' />

priority prop은 loading="eager"를 설정하고, 프리로드 링크를 추가하고, fetchpriority="high"를 설정합니다 — 최대 LCP 우선순위를 위한 세 가지 신호 모두.

일반적인 실수 체크리스트

above-the-fold 이미지에 레이지 로딩. 로드 시 보이는 이미지는 즉시 로드여야 합니다.
레이지 로딩 이미지에 width와 height 누락. 치수가 없으면 공간이 확보되지 않아 이미지 로드 시 CLS가 발생합니다.
레이지 로딩을 압축 대체로 사용. 2MB WebP를 레이지 로딩해도 로드 시 여전히 2MB입니다. 먼저 압축하세요.
즉시 보이는 캐러셀 이미지에 레이지 로딩. 첫 번째 슬라이드는 항상 뷰포트에 있습니다 — 레이지 로딩하지 마세요.