Lighthouse에서 Largest Contentful Paint image was lazily loaded 경고 해결하기

Largest Contentful Paint image was lazily loaded: 요약

"Largest Contentful Paint 이미지를 지연 로딩(lazy-loading)하면 Lighthouse 경고가 발생합니다." 지연 로딩된 이미지는 즉시 로딩(eager)되는 이미지보다 훨씬 나중에 다운로드 대기열에 추가되어 LCP 지표를 지연시킵니다. 

최종 검토: 2026년 2월, Arjen Karel

"브라우저가 알아서 파악할 만큼 똑똑하지 않나요? 네, 브라우저는 꽤 똑똑하지만, 이 경우는 아닙니다!"

"이미지 요소를 지연 로딩할 때, 브라우저에게 이 이미지의 우선순위를 낮추라고 명시적으로 지시하는 것입니다."

이는 지연 로딩되지 않는 이미지들이 먼저 스케줄링됨을 의미합니다. 지연 로딩된 이미지가 LCP 요소인 경우, LCP가 상당히 지연될 가능성이 높습니다! lazysizes.js와 같은 JavaScript 기반 지연 로딩 라이브러리는 지연 로딩이 시작되기 전에 JS 다운로드 및 실행이 필요하기 때문에 이 문제를 더욱 악화시킵니다.

2025 Web Almanac에 따르면, 모바일 페이지의 10.4%가 여전히 LCP 이미지를 네이티브로 지연 로딩하고 있으며, 5.9%는 JavaScript 기반 지연 로딩을 사용합니다. 이는 대략 6개 중 1개의 페이지가 가장 중요한 콘텐츠의 로딩을 적극적으로 지연시키고 있음을 의미합니다.

LCP 이미지에서 loading="lazy" 속성을 제거하거나 플러그인 필터를 업데이트하여 LCP 이미지에 대한 지연 로딩을 우회함으로써 Lighthouse 경고를 해결하세요.

'Largest Contentful Paint image was lazily loaded' 경고란 무엇인가요?

이 경고는 Largest Contentful Paint 이미지가 지연 로딩될 때 나타납니다. 페이지 속도를 위해 "이 요소를 가능한 한 일찍 로드해야 합니다. 이 요소를 지연 로딩하면 Largest Contentful Paint가 지연될 수 있습니다."

간단한 복습: 지연 로딩(lazy loading)

"지연 로딩은 요소(주로 이미지)가 페이지 로드 중에 브라우저에 의해 즉시 다운로드 예약되지 않고, 요소가 화면의 보이는 부분에 가까워질 때 다운로드되는 것을 말합니다." 두 가지 방법이 존재합니다.

네이티브 지연 로딩

"네이티브 지연 로딩은 브라우저의 기본 지연 로딩 API를 사용합니다. 이미지의 경우 이미지 태그에 loading="lazy"를 추가하는 것만큼 간단합니다." 이는 모든 최신 브라우저에서 지원됩니다.

<img loading="lazy"
     src="image.png"
     width="123"
     height="123"
     alt="지연 로딩된 이미지"
>

JavaScript 기반 지연 로딩

"JavaScript 기반 지연 로딩은 Intersection Observer라는 JavaScript API를 사용하여 이미지가 표시되는 뷰포트 내에 있거나 가까이 있는지 확인합니다." 감지되면 src가 교체됩니다. data-src 속성으로 이를 인식할 수 있습니다. 널리 지원되지만, "JavaScript를 사용하므로" 지연 로딩이 시작되기 전에 다운로드가 필요하며, 네이티브 방식보다 느립니다.

<img data-src="image.png"
     src="small-placeholder.png"
     width="123"
     height="123"
     alt="지연 로딩된 이미지"
>

'Largest Contentful Paint 이미지 지연 로딩'이 페이지 속도에 미치는 영향은 무엇인가요?

"Largest Contentful Paint 요소는 페이지 로드 중 표시되는 뷰포트 내 화면에 그려진 가장 큰 요소입니다." 이는 페이지가 시각적으로 준비된 시점을 표시합니다. 이 요소를 지연 로딩하면 이러한 인식이 늦어져 방문자가 로딩이 느리다고 느끼게 됩니다.

가장 빠르게 그리기 위해서는 가장 중요한 이미지가 즉시 로드되어야 합니다. 그러나 명시적인 지연 로딩은 우선순위를 낮추어 다른 리소스를 먼저 대기열에 추가합니다. JavaScript 지연 로딩의 경우, 스크립트 실행을 기다리며 더 큰 지연이 추가됩니다.

이미지에 loading="lazy"를 추가하면, 브라우저의 사전 로드(preload) 스캐너가 이를 완전히 건너뜁니다. 보통 사전 로드 스캐너는 HTML을 구문 분석하는 동안 이미지를 발견하고 일찍 가져오기 시작합니다. 지연 로딩은 이러한 조기 발견에서 제외되며, 이것이 바로 LCP 리소스 로드 지연(LCP resource load delay)을 증가시키는 정확한 이유입니다.

지연(lazy) LCP 이미지 한 개와 즉시(eager) 이미지 여섯 개가 있는 Chrome 네트워크 탭의 예시에서, 지연 이미지는 가장 마지막에 다운로드를 시작하고 완료하여 실제 환경에서의 영향을 잘 보여줍니다.

조금 더 자세히 알아보기

브라우저는 지연 로딩 지시문을 자동으로 무시할 수 없습니다. LCP 지연의 기술적인 이유는 다음과 같습니다.

• "지연 이미지는 지연되지 않은(즉시 로드되는) 이미지보다 훨씬 나중에 다운로드 대기열에 추가됩니다."
• 지연 이미지는 일반적으로 낮은 우선순위로 다운로드됩니다.
• "일반 이미지, 지연된 스크립트, 폰트 등 다른 요소들이 지연 이미지보다 먼저 다운로드되도록 스케줄링될 수 있습니다."
• JavaScript 지연 로딩은 스크립트 다운로드 및 실행의 오버헤드에 영향을 받습니다.

'Largest Contentful Paint image was lazily loaded' 해결 방법

"이 경고를 해결하는 방법은 간단합니다. 해당 이미지를 지연 로딩하지 마세요."

이론적인 방법

• 네이티브 지연 로딩의 경우, loading="lazy"를 제거하거나 loading="eager"로 변경하세요.
• JavaScript 지연 로딩의 경우, 네이티브 방식으로 전환하거나 LCP 이미지를 제외하세요.
• Next.js의 next/image의 경우, priority를 설정하여 사전 로드 힌트와 함께 이미지를 즉시 로드하도록 하세요.

LCP 요소가 히어로(hero) 이미지인 경우, 사전 로딩(preloading), fetchpriority, 반응형 이미지 등 추가 최적화 기법에 대해서는 느린 히어로 이미지 수정 가이드를 참조하세요.

실제 환경에서의 방법

최적화 플러그인은 종종 중요도를 구분하지 않고 모든 이미지를 자동으로 지연 로딩합니다. 대부분의 경우 파일명, 클래스 또는 속성을 통해 지연 로딩을 우회할 수 있습니다. 플러그인 문서를 확인하고 그에 따라 템플릿을 업데이트하세요.

WordPress 6.3 이상 버전은 처음 몇 개의 이미지를 더 이상 지연 로딩하지 않으며, LCP 이미지일 가능성이 높은 이미지에 fetchpriority="high"를 자동으로 추가합니다. WordPress 사이트에서 여전히 이 경고가 표시된다면 타사 최적화 플러그인이 이 동작을 덮어쓰고 있을 가능성이 높습니다. 2022 Web Almanac의 성능 챕터에 따르면, LCP 이미지가 지연 로딩된 페이지의 72%가 WordPress 사이트입니다.

'Largest Contentful Paint image was lazily loaded'의 차선책 (Workaround)

CMS 제한으로 인해 지연 로딩 설정을 변경할 수 없는 경우, 다음의 차선책으로 영향을 최소화할 수 있습니다.

• 모든 이미지 지연 로딩: 스크롤 아래(below-the-fold)에 있는 즉시 로드 이미지가 먼저 다운로드되지 않도록 합니다.
• 배경 이미지 피하기: 경쟁적인 다운로드를 방지합니다.
• LCP 요소 사전 로드(Preload): 초기 다운로드를 예약합니다.
• JavaScript 지연 로딩 비활성화: 대신 네이티브 방식을 사용합니다.
• LCP 요소에 fetchpriority="high" 추가: 조기 스케줄링을 위함입니다. 브라우저가 리소스의 우선순위를 정하는 방법에 대한 자세한 내용은 리소스 우선순위 지정 가이드를 참조하세요.
• 모든 이미지 최적화: 다운로드 시간을 줄이기 위해 반응형 기술과 차세대 형식을 사용합니다.

LCP 이미지에서 지연 로딩을 제거한 후에는 Real User Monitoring(RUM)을 통해 개선 사항을 확인하세요. Lighthouse 경고는 실험실 기반이지만, Google은 순위 신호로 실제 사용자의 필드 데이터를 사용합니다. CoreDash가 추적하는 사이트들을 보면, 지연 로딩된 LCP 이미지가 없는 페이지는 LCP에서 79%가 '좋음(good)' 점수를 받은 반면, 여전히 LCP 요소를 지연 로딩하는 페이지는 52%에 그쳤습니다.