느린 히어로 이미지 수정 및 Core Web Vitals 개선

요약: 느린 히어로 이미지를 수정하는 방법

히어로 이미지는 웹페이지 상단에 위치한 대형 이미지입니다. 이러한 히어로 이미지가 최적화되지 않으면 Largest Contentful Paint 시간이 길어집니다. 제가 최적화를 요청받는 사이트 10곳 중 9곳은 히어로 이미지에 문제를 가지고 있습니다. 이 글에서는 히어로 이미지의 로딩 속도를 높이는 다양한 기술을 소개합니다.

최근 검토자: Arjen Karel (2026년 2월)

히어로 이미지란 무엇인가?

가끔 '히어로 헤더'라고도 불리는 히어로 이미지는 종종 웹페이지 상단에 배치되는 텍스트가 포함된 대형 이미지입니다. 웹페이지 상단 전체 폭에 걸쳐 눈에 띄게 배치되기 때문에 사용자가 회사와 제공하는 서비스를 처음 접하는 역할을 합니다.

간단한 요약: 히어로 이미지, Core Web Vitals 및 Largest Contentful Paint: 
히어로 이미지의 크기 특성상(일반적으로 페이지 전체 너비와 표시되는 뷰포트 높이의 상당 부분을 차지함), 이 요소는 거의 모든 경우에서 Largest Contentful Paint 요소가 됩니다.
Largest Contentful Paint는 중요한 Core Web Vitals 지표입니다. Largest Contentful Paint 요소는 브라우저의 표시되는 뷰포트에 렌더링될 가장 큰 요소를 뜻합니다. 2025 Web Almanac에 따르면, 모바일 페이지의 76%에서 LCP 요소가 이미지입니다. 현재 62%의 모바일 출처만이 LCP 기준을 통과합니다. 히어로 이미지를 수정하면 대부분의 사이트에서 LCP를 해결할 수 있습니다.
최적화되지 않은 이미지는 많은 대역폭을 차지하여 로드하는 데 오랜 시간이 걸리는 경향이 있으므로, 히어로 이미지는 종종 좋지 않은 Largest Contentful Paint 지표의 원인이 됩니다.

히어로 이미지와 Largest Contentful Paint 최적화

히어로 이미지와 Largest Contentful Paint를 최적화하는 데에는 여러 기술이 있습니다. 여기에서 설명해 드리겠습니다. 대부분의 기술은 결합하여 더 나은 결과를 얻을 수 있습니다!

1. 히어로 이미지를 사전 로드(preload)하거나 103 Early Hints 전송하기

요소가 브라우저에서 가능한 한 빨리 사용 가능하게 하려면 해당 요소를 사전 로드할 수 있습니다. 사전 로드는 리소스 힌트를 사용하는 것을 포함합니다. 리소스 힌트는 요소의 우선순위에 대해 브라우저에 알려주고 리소스의 매우 빠른 다운로드를 트리거합니다. 2025 Web Almanac에 따르면 LCP 이미지를 사전 로드하는 페이지는 2.1%에 불과합니다. 이는 성능을 높일 수 있는 엄청난 기회를 놓치고 있는 것입니다.

<link
  rel="preload"
  as="image"
  href="wolf.jpg"
  fetchpriority="high"
  imagesrcset="hero_400px.jpg 400w, hero.jpg 800w, hero_1600px.jpg 1600w"
  imagesizes="50vw">

103 Early Hints를 사용하면 서버가 최종 HTML 응답 전에 리소스 힌트를 보낼 수 있습니다. 서버가 여전히 페이지를 생성하는 동안 브라우저는 히어로 이미지를 사전 로드하기 시작할 수 있습니다. Chrome, Edge, Firefox는 모두 Early Hints를 통한 사전 로드를 지원합니다. Safari는 preconnect를 지원하지만 아직 Early Hints를 통한 사전 로드는 지원하지 않습니다. 설정에 대한 자세한 내용은 103 Early Hints에 대한 전체 가이드를 읽어보세요.

CoreDash에서 모니터링하는 사이트 중 LCP 이미지가 사전 로드된 페이지는 사전 로드가 없는 페이지의 64%에 비해 81%의 '좋음' LCP 비율을 기록했습니다. 모든 사전 로드 옵션에 대한 전체 설명은 LCP 이미지를 사전 로드하는 방법을 참조하세요.

2. 히어로 이미지에 fetchpriority="high" 사용하기

fetchpriority 속성은 브라우저에 어떤 리소스가 가장 중요한지 알려줍니다. 히어로 이미지에 fetchpriority="high"를 설정하면 스크립트 및 폰트와 같은 다른 이미지 및 경쟁 리소스보다 다운로드 우선순위가 높아집니다.

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

2025 Web Almanac에 따르면 페이지의 17%만이 LCP 이미지에 fetchpriority="high"를 설정합니다. 이는 83%의 사이트가 쉽게 얻을 수 있는 성능 향상 기회를 놓치고 있음을 의미합니다.

위에 표시된 preload 링크에 fetchpriority="high"를 추가할 수도 있습니다. 페이지당 하나의 이미지에만 fetchpriority="high"를 사용해야 합니다. 우선순위가 높은 이미지가 여러 개이면 서로 경쟁하여 이점이 상쇄됩니다. 브라우저가 리소스 우선순위를 정하는 방법에 대한 자세한 내용은 리소스 우선순위 지정에 대한 Core Web Vitals 가이드를 읽어보세요.

3. 히어로 이미지 압축 및 차세대 포맷 사용하기

이미지를 압축하면 파일 크기가 작아집니다. 파일 크기가 작을수록 대역폭을 덜 차지하며 브라우저에서 가능한 한 빨리 사용할 수 있습니다. 이미지 압축은 사진 편집기, CMS(팁: 개발자가 WordPress 압축 수준을 설정할 수 있음) 또는 온라인 이미지 압축 도구로 수행할 수 있습니다.

대부분의 느린 히어로 이미지는 PNG나 JPEG와 같은 '잘못된' 이미지 컨테이너로 제공되기 때문에 필요 이상으로 느립니다. JPEG 및 PNG보다 훨씬 빠른 WebP 및 AVIF와 같은 대안이 있습니다. 2025 Web Almanac에 따르면, LCP 이미지의 57%는 여전히 JPEG로, 26%는 PNG로 제공되는 반면, WebP를 사용하는 비율은 11%, AVIF를 사용하는 비율은 1% 미만입니다.

많은 CMS 시스템에는 이미지를 차세대 포맷으로 변환해 주는 변환 플러그인이 있습니다. 이미지 변환을 웹사이트에 통합하기 어려운 경우 이미지 변환을 지원하는 CDN이 해결책이 될 수 있습니다. 이미지 최적화 기술에 대한 전체적인 개요는 Core Web Vitals를 위한 이미지 최적화를 참조하세요.

4. 백그라운드 이미지 대신 일반 반응형 이미지 사용하기

히어로 이미지는 일반 이미지여야 하며 백그라운드 이미지여서는 안 됩니다. 히어로 이미지를 구현하는 일반적인 방법은 히어로 컨테이너에 백그라운드 이미지를 추가하고 해당 컨테이너의 background-size를 cover로 설정하는 것입니다. 이렇게 하면 히어로 이미지가 모든 경우에 화면에 맞게 표시됩니다.

백그라운드 이미지는 Core Web Vitals에 좋지 않습니다. 이 점을 기억하세요! 백그라운드 이미지가 성능에 나쁜 이유에 대해 자세히 알아보세요. 백그라운드 이미지를 완전히 피할 수 없다면, 적어도 스크롤 아래에 있는 백그라운드 이미지를 지연(defer)시킬 수는 있습니다.

• 백그라운드 이미지는 더 낮은 우선순위로 로드됩니다
• 백그라운드 이미지는 반응형이 아닙니다(정말 복잡하게 만들고 싶지 않은 이상)
• 백그라운드 이미지는 대부분의 지연 로딩(lazy loading) 라이브러리에서 Core Web Vitals 문제를 일으킬 수 있습니다

제가 사용하는 방법은 절대 위치(absolute position)에 일반 이미지를 추가하고 해당 이미지의 object-fit 속성을 cover로 설정하는 것입니다. 백그라운드 이미지를 일반 이미지로 변경하고 나면 반응형 이미지를 사용할 수 있습니다. Elementor를 사용 중이라면 Elementor 히어로 이미지를 수정하는 방법을 확인해 보세요.

반응형 이미지는 다양한 기기(모바일, 데스크톱, 태블릿)에 대해 동일한 히어로 이미지의 각기 다른 버전을 보낼 수 있음을 의미합니다. 데스크톱 기기의 경우 거대한 1920x1280 히어로 이미지를 보낼 수 있지만 모바일 기기의 경우 더 작은 400x266 픽셀 히어로 이미지만 보내면 됩니다. 이는 데이터가 25배나 적다는 뜻입니다!

• 이제 히어로 이미지가 더 높은 우선순위로 로드됩니다
• 이제 히어로 이미지에 반응형 이미지를 사용할 수 있습니다

style.css

<style>
#herocontainer{
    position:relative;
    padding:4rem 0
}
#heroimg{
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}
</style>

index.html

<div id="herocontainer">
<h1>Welcome to my site</h1>
<picture>
    <source
        type="image/webp"
        media="(max-width:540px)"
        srcset="herosm.webp">
    </source>
    <img fetchpriority="high" loading="eager" decoding="async" src="hero.webp" id="heroimg">
</picture>
</div>

5. 메인 도메인에서 히어로 이미지 제공 및 CDN 고려하기

Largest Contentful Paint 이미지가 'static.mydomain.com'과 같이 다른 도메인에서 제공되는 경우를 너무 자주 봅니다. 이러한 서브도메인은 종종 CDN을 가리킵니다. CDN 사용을 권장하지만(아래 참조) 이러한 설정은 바람직하지 않습니다. 서브도메인의 이미지는 새 서버에 대한 새로운 연결이 필요합니다. 새로운 연결은 비용이 많이 들고 귀중한 시간을 소비합니다. 이미지가 메인 도메인(예: www.mydomain.com)에서 제공될 때, 이미 확립된 서버 연결을 통해 이미지를 훨씬 빠르게 가져올 수 있습니다.

메인 도메인에 설정할 경우 CDN은 엄청난 속도 향상을 제공할 수 있습니다. 특히 사이트가 전 세계에서 방문될 때 그렇습니다. CDN은 전 세계에 전략적으로 배치된 서버를 보유하고 있으며 이곳에 정적 리소스(이미지 등)가 캐시되어 빠른 로컬 응답 시간을 제공합니다. 이는 데이터가 전 세계를 이동할 필요 없이 로컬 엣지(edge) 서버에서 제공될 수 있음을 의미합니다. 전체 설정 가이드는 Core Web Vitals를 위한 Cloudflare 구성 방법을 참조하세요.

6. 히어로 이미지의 지연 로딩(lazy loading) 피하기

히어로 이미지에 지연 로딩이 적용되지 않았는지 확인하세요. 히어로 이미지는 항상 즉시(eager) 로드되어야 합니다.

많은 사이트, 특히 WordPress 사이트에서는 WP Rocket이나 WP Core Web Vitals와 같은 종류의 WordPress 페이지 속도 플러그인을 사용하고 있습니다. 이러한 플러그인들은 대체로 느린 사이트의 속도를 높이는 데 훌륭한 역할을 하지만 바보 같은 실수까지 고쳐주지는 않습니다 :-)

이러한 플러그인들은 지연 로딩하기에 적합해 보이는 이미지를 지연 로딩합니다. 히어로 이미지가 즉시 로드(eager) 이미지가 아니라면, 해당 플러그인들은 아마도 히어로 이미지도 지연 로딩할 것입니다.

이로 인해 기껏해야 LCP 지표에 약간의 지연이 발생할 것입니다. 최악의 경우, 특히 JavaScript 기반 지연 로딩이 활성화된 경우 더 큰 지연이 발생합니다. 2025 Web Almanac에 따르면, 대략 17%의 페이지가 LCP 이미지를 지연 로드합니다. 즉, 17%의 사이트가 적극적으로 LCP를 악화시키고 있다는 의미입니다. Lighthouse에서 이와 관련된 경고가 표시되는 경우 지연 로드된 LCP 이미지 경고를 수정하는 방법을 참조하세요.

이미지를 즉시 로드(eager)하는 것은 간단합니다. 이미지에 loading="eager"를 추가하기만 하면 됩니다. eager는 실제로는 브라우저의 기본값이라는 점에 유의하세요. loading 속성을 완전히 생략해도 동일한 효과가 있습니다. 실제 목표는 히어로 이미지에 loading="lazy"가 없도록 하는 것입니다. 명시적으로 eager를 추가하는 것은 CMS나 플러그인이 지연 로딩을 자동 적용할 수 있는 사이트에서 특히 의도를 나타내는 신호로서 여전히 유용합니다.

<img src="hero.webp" loading="eager" fetchpriority="high" width="800" height="400">

7. 히어로 이미지로 인한 레이아웃 변경(layout shift) 피하기

히어로 배너 및 히어로 이미지에서 자주 발견되는 또 다른 문제는 엄청난 레이아웃 변경을 유발한다는 것입니다. 이러한 레이아웃 변경은 여러 가지 이유로 발생할 수 있습니다.

• 히어로 요소가 JavaScript로 생성된 경우. Elementor와 같은 일부 히어로 플러그인 및 페이지 빌더는 히어로 콘텐츠를 렌더링하기 위해 JavaScript에 의존하는 것으로 알려져 있습니다. JavaScript 자체에 문제가 있는 것은 아니지만, JavaScript가 없어도 히어로 요소가 동일하게 렌더링되도록 해야 합니다.
• 히어로 요소의 폰트가 레이아웃 변경을 유발하는 경우. 히어로 요소에는 일반적으로 콜투액션(call to action) 및 태그라인이 포함된 큰 텍스트가 들어 있습니다. 이러한 큰 폰트가 레이아웃 변경을 유발하지 않도록 하세요.
• 이미지 크기가 누락된 경우. 히어로 이미지가 커버 이미지(백그라운드 이미지 또는 절대 위치 이미지)가 아닌 경우, 이미지 크기(너비 및 높이)가 누락되면 반드시 큰 레이아웃 변경이 발생합니다.

레이아웃 변경을 수정해도 Largest Contentful Paint는 향상되지 않지만, 페이지의 Core Web Vitals는 향상됩니다. 레이아웃 변경을 수정하는 방법에 대한 자세한 내용은 Cumulative Layout Shift 수정에 대한 심층 가이드를 읽어보세요!

8. 히어로 Core Web Vitals를 개선하기 위해 2단계 로딩(2-stage loading) 사용하기

2단계 로딩은 당사가 모든 이미지에 적용하는 빠른 기술입니다. 먼저 크기가 큰 고품질 이미지보다 훨씬 일찍 다운로드될 것으로 예상되는 극히 낮은 품질의 이미지를 제공합니다. 저품질 이미지가 화면에 렌더링되면 브라우저가 백그라운드에서 고품질 이미지를 가져오도록 트리거됩니다. 고품질 이미지가 다운로드되고 나면 저품질 이미지가 고품질 이미지로 교체됩니다.

2단계 로딩에는 3가지 방법이 있습니다. 처음 두 가지는 고려해야 할 방법입니다. 마지막 방법은 피해야 할 방법입니다.

1. 전체 2단계 로딩

전체 2단계 로딩을 사용하면 처음의 저품질 이미지가 원본 고품질 이미지와 정확히 동일한 크기(너비 및 높이)를 갖습니다.

이 2단계 로딩의 결과, Largest Contentful Paint 요소는 훨씬 더 빠른 저품질 이미지가 됩니다(그런 다음 지연되어 교체됨). 이미지의 교체는 순식간에 일어나기 때문에 일반 방문자는 아마 알아차리지 못할 것입니다. 이 기술의 결과로 LCP가 훨씬 일찍 렌더링되고, 페이지가 훨씬 더 빨리 '준비된' 것처럼 보이기 때문에 훨씬 나은 user experience와 개선된 Core Web Vitals에 기여합니다.

2. 더 작은 인라인 플레이스홀더

더 작은 플레이스홀더는 한 가지 단점이 있는 꽤 멋진 기술입니다. 즉, Core Web Vitals를 개선하지는 않습니다. 하지만 user experience를 향상시키기 때문에 여전히 훌륭한 기술입니다.

기본적인 아이디어는 2단계 로딩 기술과 동일하지만, 같은 크기의 저품질 이미지 하나 대신 더 작은 크기의 훨씬 작은 이미지가 데이터 URI를 통해 인라인으로 배치됩니다. Largest Contentful Paint 이미지가 될 최종 히어로 이미지는 여전히 백그라운드에서 다운로드됩니다. 이 방식은 Largest Contentful Paint를 향상시키지는 않지만, 2단계 로딩 기술보다 페이지가 더 빨리 준비된 것처럼 보이게 합니다.

3. 투명한 플레이스홀더

일반적인 2단계 로딩 기술이자 브라우저가 일찍 Largest Contentful Paint 지표를 보내도록 속이는 방법은 투명한 SVG 요소를 사용하는 것입니다. 이러한 요소는 크기가 작으며 더 작은 인라인 플레이스홀더처럼 인라인으로 배치될 수 있습니다.

인라인 SVG 요소를 사용하고 교체하는 것은 실제로는 지연 로딩 기술입니다. 이 기술의 장점은 크로스 브라우저 환경에서 작동한다는 것입니다. 

물론 지연 로딩은 뷰포트 외부의 요소에만 적용되어야 합니다. 이 경우 투명한 SVG 요소는 실제 히어로 이미지를 지연시키기만 할 뿐 방문자에게 아무런 부가 가치도 제공하지 않습니다. 렌더링 지표는 훌륭할지 모르지만 페이지의 UX는 실제로 악화됩니다.

이러한 이유로 히어로 이미지는 나쁜 UX를 유발하는 꼼수 없이 항상 즉시 로드(eager)되어야 합니다.

모두 합치기

사전 로드(preloading), fetchpriority, 반응형 이미지 및 즉시 로드(eager)를 결합했을 때 최적화된 히어로 이미지의 모습은 다음과 같습니다:

<!-- In the <head> -->
<link rel="preload" as="image" href="hero-800.webp" fetchpriority="high"
  imagesrcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
  imagesizes="100vw">

<!-- In the <body> -->
<img src="hero-800.webp"
  fetchpriority="high"
  loading="eager"
  decoding="async"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
  sizes="100vw"
  width="1600" height="900"
  alt="Descriptive alt text">

변경한 후, Real User Monitoring으로 개선 사항을 확인하세요. Lighthouse는 랩(lab) 환경의 스냅샷을 제공하지만 Google은 지난 28일 동안 수집된 실제 사용자 필드 데이터를 기반으로 순위를 매깁니다.