'화면 밖 이미지 지연하기' 해결: Core Web Vitals를 위한 지연 로딩 가이드

'화면 밖 이미지 지연하기'란 무엇인가요?

화면 밖 이미지 지연하기(defer offscreen images) 경고는 지연 로딩할 수 있는 이미지가 있는 페이지를 표시하는 Lighthouse 감사 항목이었습니다. Lighthouse는 다음 기준을 모두 충족하는 이미지를 표시했습니다:

• 이미지가 뷰포트 높이의 3배 아래에서 끝납니다.
  이미지가 지연 로딩되지 않고 페이지의 보이는 부분 높이의 3배 아래에서 끝나며, 페이지의 보이는 부분 아래에서 시작되는 경우입니다.
• 이미지가 0.02MB보다 크거나 로드하는 데 50ms 이상 걸립니다.
  작거나 인라인된 이미지는 무시됩니다. 지연 로딩 스크립트는 종종 이 임계값 미만인 작은 자리 표시자 이미지를 사용합니다.
• 이미지에 loading 속성이 정의되어 있지 않습니다.
  Lighthouse는 loading="lazy" 또는 loading="eager" 속성이 있는 이미지를 무시합니다.

이 감사는 Lighthouse 13에서 제거되었습니다

Lighthouse 13(2025년 10월)부터 이 감사는 완전히 제거되었습니다. Chrome 팀은 최신 브라우저가 이미 화면 밖 이미지의 우선순위를 낮추고 있기 때문에, 이 감사가 유용한 피드백보다 더 많은 노이즈를 발생시킨다고 판단했습니다.

하지만 중요한 점은 최적화 자체는 여전히 중요하다는 것입니다. 화면 밖 이미지를 지연 로딩하면 대역폭을 줄이고, 중요한 리소스를 위한 네트워크 연결을 확보하며, Largest Contentful Paint (LCP)를 개선합니다. Lighthouse가 더 이상 이 문제를 표시하지 않는다는 것은 여러분이 직접 확인해야 한다는 것을 의미합니다. Real User Monitoring을 사용하거나 loading="lazy" 없이 로드되는 이미지가 있는지 페이지를 수동으로 감사하세요.

간단한 복습: 지연 로딩이란 무엇인가요?

지연 로딩은 페이지의 보이지 않는 부분에 있는 이미지를 나중에, 보통 스크롤하여 시야에 들어오기 직전에 로드하는 것을 의미합니다. 브라우저는 사용자가 이미지에 가까워질 때만 이미지를 가져옵니다. 이를 통해 대역폭을 절약하고 브라우저가 초기 렌더링에 실제로 중요한 리소스에 집중할 수 있게 합니다.

eager로 로드되는 화면 밖 이미지의 원인은 무엇인가요?

이미지는 기본적으로 지연되지 않습니다. 지연되지 않은 화면 밖 이미지는 loading 속성이 누락되었거나 이미지가 지연 로딩 라이브러리에 의해 처리되지 않기 때문에 페이지에 표시됩니다. 일반적인 원인은 다음과 같습니다:

• CMS의 잘못 코딩된 플러그인.
• 네이티브 지연 로딩을 비활성화하는 플러그인.
• 배경 이미지 (이들은 loading="lazy"와는 다른 접근 방식이 필요합니다).
• 나쁜 HTML을 생성하는 페이지 빌더(예: Elementor 또는 WP Bakery).
• WYSIWYG 에디터(TinyMCE 등)에 복사하여 붙여넣은 텍스트.
• 잘못된 템플릿 코딩.

화면 밖 이미지가 Core Web Vitals에 어떤 영향을 미치나요?

화면 밖 이미지는 Lighthouse 지표에 직접적인 영향을 미치지 않습니다. 하지만 웹페이지 렌더링을 불필요하게 복잡하게 만듭니다. 화면에 페이지를 표시하기 전에 브라우저가 더 많은 리소스를 다운로드해야 합니다. eager로 로드되는 화면 밖 이미지에는 3가지 문제가 있습니다:

• 렌더링 전 더 많은 다운로드. 브라우저는 사용자가 아직 볼 수 없는 이미지를 다운로드해야 합니다.
• 중요한 리소스의 우선순위 하락. 이미지는 CSS나 LCP 이미지처럼 렌더링에 실제로 필요한 리소스와 대역폭을 두고 경쟁하게 됩니다.
• 더 높은 메모리 사용량. 사용자가 아직 스크롤하지 않은 이미지를 디코딩하는 것은, 특히 저사양 모바일 기기에서 메모리를 낭비합니다.

2025년 Web Almanac의 Page Weight 챕터에 따르면, 모바일 페이지의 중간값은 15개의 이미지를 로드합니다. 90백분위수에서는 이 숫자가 52개로 급증합니다. 이미지가 많은 페이지에서 화면 밖 이미지를 지연 로딩하는 것은 실질적인 차이를 만들 수 있습니다. CoreDash가 모니터링하는 사이트 전체에서 화면 밖 이미지를 제대로 지연 로딩하는 페이지의 76%가 LCP를 통과한 반면, 그렇지 않은 페이지는 59%에 불과했습니다.

'화면 밖 이미지 지연하기' 해결 방법

eager로 로드되는 화면 밖 이미지를 해결하려면 스크롤해야 보이는 모든 이미지에 loading="lazy"를 추가하세요. 이제 네이티브 지연 로딩은 Chrome, Firefox, Safari, Edge를 포함하여 전 세계적으로 95%의 브라우저에서 지원됩니다. 이를 위해 라이브러리가 필요하지 않습니다.

<img loading="lazy"
     src="image.webp"
     alt="a native lazy loaded image"
     width="300" height="300">

eager로 로드되는 이미지의 출처를 추적하세요. loading 속성 없이 로드되는 이미지를 확인하고 무엇이 그 이미지를 페이지에 배치하고 있는지 파악하세요. 일반적으로 5가지 주요 원인이 있습니다:

1. CMS의 잘못 코딩된 플러그인.
   일부 플러그인은 HTML을 페이지에 직접 추가하며 지연 로딩을 활성화하는 올바른 훅(hook)을 사용하지 않습니다.
2. 네이티브 지연 로딩을 비활성화하는 플러그인.
   일부 플러그인은 기본적으로 네이티브 지연 로딩을 비활성화합니다. 플러그인 설정을 확인하세요.
3. 나쁜 HTML을 생성하는 페이지 빌더.
   Elementor나 WP Bakery와 같은 페이지 빌더는 완벽함과는 거리가 먼 부풀려진 코드를 생성하는 경우가 많습니다. 이에 대한 쉬운 해결책은 없습니다. 해결 방법에는 코드를 정리하고 워크플로우를 변경하는 것이 포함됩니다.
4. WYSIWYG 에디터에 복사하여 붙여넣은 텍스트.
   TinyMCE와 같은 대부분의 WYSIWYG 에디터는 붙여넣은 코드를 정리하는 데 서투르며, 특히 Microsoft Word와 같은 다른 서식 있는 텍스트(rich text) 소스에서 붙여넣을 때 더욱 그렇습니다. 이러한 에디터는 이미지에 지연 로딩을 추가하지 않을 수 있습니다.
5. 잘못된 템플릿 코딩.
   지연 로딩이 활성화되어 있더라도 템플릿에 하드코딩된 이미지는 여전히 지연 로딩되지 않을 수 있습니다. 템플릿에 화면 밖 이미지가 있는지 확인하고 지연 로딩을 적용하세요.

LCP 이미지는 지연 로딩하지 마세요

이것은 지연 로딩의 가장 중요한 규칙입니다: Largest Contentful Paint 이미지에는 절대 loading="lazy"를 적용하지 마세요. LCP 이미지는 거의 항상 히어로(hero) 이미지이거나 뷰포트에서 가장 크게 보이는 요소입니다. 2025년 Web Almanac에 따르면 모바일 페이지의 16%가 여전히 LCP 이미지를 지연 로딩하고 있습니다. 이 단일 속성 하나가 LCP에 200~500 밀리초를 추가할 수 있습니다.

대신 LCP 이미지에는 반대로 하세요. fetchpriority="high"를 사용하여 가능한 한 빨리 로드되도록 하세요:

<img fetchpriority="high"
     loading="eager"
     src="hero.webp"
     alt="Hero image"
     width="1200" height="600">

실수로 LCP 이미지를 지연 로딩한 경우 지연 로딩된 LCP 이미지를 해결하는 방법을 읽어보세요. 이미지 최적화에 대한 전체 가이드는 Core Web Vitals를 위한 이미지 최적화를 참조하세요.

이미지 로딩 치트시트

모든 이미지를 동일한 방식으로 처리해서는 안 됩니다. 다음은 4가지 가장 일반적인 시나리오를 처리하는 방법입니다:

네이티브 지연 로딩 vs 지연 로딩 스크립트

네이티브 loading="lazy"를 사용하세요. 2026년에는 표준 <img> 요소를 위해 JavaScript 지연 로딩 라이브러리를 추가할 이유가 없습니다. 네이티브 지연 로딩은 Safari(버전 15.4부터)를 포함한 모든 주요 브라우저에서 지원되어 전 세계 95%의 사용자를 커버합니다. JavaScript가 필요 없고 오버헤드도 없으며 기본적으로 작동합니다.

브라우저가 네이티브 지연 로딩을 지원하기 전에는 lazysizes와 같은 라이브러리가 필수적이었습니다. 이들은 더 이상 유지보수되지 않으며 대부분의 사이트에 더 이상 필요하지 않습니다. 여전히 JavaScript 솔루션이 필요할 수 있는 유일한 시나리오는 다음과 같습니다:

• CSS 배경 이미지. 네이티브 지연 로딩은 <img> 및 <iframe> 요소에서만 작동합니다. 배경 이미지의 경우 IntersectionObserver 또는 content-visibility: auto가 필요합니다.
• 사용자 지정 로딩 임계값. Chrome은 빠른 연결에서는 뷰포트 아래 약 1250px, 느린 연결에서는 2500px에서 "lazy" 이미지를 로드하기 시작합니다. 이 거리는 사용자 지정할 수 없습니다. 더 엄격한 제어가 필요한 경우 사용자 지정 rootMargin이 있는 IntersectionObserver를 사용하면 가능합니다.

라이브러리가 정말로 필요하다면 lazysizes 대신 vanilla-lazyload를 사용하세요. 활발하게 유지보수되며 IntersectionObserver를 사용하고 배경 이미지를 지원합니다.

지연 로딩된 이미지의 레이아웃 이동 방지

지연 로딩된 이미지에는 항상 width와 height 속성을 포함하세요. 명시적인 크기가 없으면 브라우저는 공간을 얼마나 확보해야 할지 알 수 없습니다. 이미지가 마침내 로드되면 주변 콘텐츠를 아래로 밀어내어 Cumulative Layout Shift (CLS)를 유발합니다. 2025년 Web Almanac에 따르면 모바일 페이지의 62%가 여전히 크기가 없는 이미지를 하나 이상 가지고 있습니다.

<!-- Bad: causes layout shift -->
<img loading="lazy" src="photo.webp" alt="Photo">

<!-- Good: dimensions reserve space -->
<img loading="lazy" src="photo.webp" alt="Photo" width="800" height="600">

지연 로딩할 수 없을 때의 차선책

때로는 화면 밖 이미지를 지연시키는 것이 불가능할 수도 있습니다. 템플릿에 접근할 수 없거나 CMS가 지연 로딩을 지원하지 않을 수 있습니다. 영향을 줄일 수 있는 몇 가지 차선책이 있습니다. 이들은 완벽과는 거리가 멀고 새로운 문제를 일으킬 수도 있습니다.

• 이미지 압축하기. 작은 이미지는 큰 이미지보다 로딩 성능에 미치는 영향이 적습니다. 파일 크기를 줄이려면 최신 압축 기술을 사용하세요.
• 더 빠른 이미지 포맷 사용하기. PNG 및 JPEG에서 WebP 또는 AVIF로 전환하세요. 2024년 Web Almanac의 Media 챕터에 따르면 WebP는 픽셀당 약 1.3비트로 압축되는 반면 JPEG는 2.0비트로 압축됩니다.
• 큰 페이지를 여러 페이지로 나누기. 큰 페이지를 나누면 한 번에 로드해야 하는 이미지 수를 줄일 수 있습니다.
• 무한 스크롤 구현하기. 무한 스크롤은 이미지가 아니라 웹페이지의 전체 부분을 대상으로 한다는 점만 다를 뿐 기본적으로 지연 로딩입니다. 반복되는 요소가 많은 페이지(Pinterest 참조)의 경우 무한 스크롤이 초기 로드 속도를 크게 높일 수 있습니다.

모바일 관련 고려사항을 볼 때 화면 밖 이미지는 훨씬 더 큰 문제입니다. 모바일 연결이 더 느리고 모바일 뷰포트가 더 작아서 결과적으로 더 많은 이미지가 화면 밖에 위치하기 때문입니다.

어떤 접근 방식을 취하든 실제 사용자에게 효과가 있는지 확인하세요. Real User Monitoring을 설정하여 변경 사항이 현장에서 LCP와 전반적인 Core Web Vitals를 실제로 개선하는지 추적하세요.