Largest Contentful Paint 이미지 사전 로드(Preload)

사전 로드(Preloading)란 무엇인가요?

사전 로드는 메인 렌더링이 시작되기 전에 브라우저에 무언가를 일찍 다운로드하도록 지시합니다. 파일이 더 빨리 준비되며 페이지 렌더링을 차단하지 않습니다. LCP 타이밍 관점에서 사전 로드는 Resource Load Delay(브라우저가 HTML을 수신하고 LCP 이미지 다운로드를 시작하는 사이의 간격)를 줄여줍니다.

<link rel="preload"
as="image"
href="image.jpg"
fetchpriority="high"
imagesrcset="image_400px.jpg 400w, image_800px.jpg 800w"
imagesizes="100vw">

왜 Largest Contentful Paint 이미지를 사전 로드해야 하나요?

뷰포트 내에 표시되는 이미지는 높은 우선순위를 가지며 전체 페이지 로드 과정에서 비교적 일찍 다운로드됩니다. Chrome과 같은 브라우저는 사용자를 위해 이러한 이미지의 우선순위를 정하기 위해 최선을 다하며 종종 훌륭하게 수행합니다. 그럼에도 불구하고 브라우저는 다운로드 순서를 추정할 뿐이며 종종 LCP 이미지보다 원격 JavaScript나 다른 표시되는 이미지와 같은 기타 리소스에 우선순위를 부여합니다.

이러한 동작 때문에 LCP 이미지 다운로드는 원하는 만큼 일찍 시작되지 않습니다. Largest Contentful Paint 이미지를 사전 로드하면 이 문제를 극복할 수 있습니다.

수치가 이를 뒷받침합니다. 2025 Web Almanac에 따르면 모바일 페이지의 76%가 이미지를 LCP 요소로 사용합니다. 그러나 실제로 해당 이미지를 사전 로드하는 페이지는 2.1%에 불과합니다. 이는 엄청난 기회를 놓치고 있는 것입니다. 게다가 많은 LCP 이미지는 렌더링을 위해 JavaScript나 CSS에 의존하기 때문에 초기 HTML에서 발견할 수 없습니다. 브라우저는 찾을 수 없는 것을 다운로드할 수 없습니다. 사전 로드(preload) 태그가 이를 해결합니다.

Largest Contentful Paint 이미지 사전 로드가 페이지 성능에 미치는 영향은 무엇인가요?

LCP 이미지를 사전 로드하면 렌더링에 더 빨리 사용할 수 있습니다. 결과적으로 Lighthouse 및 필드 데이터 모두에서 더 나은 LCP 점수를 얻을 수 있습니다.

CoreDash가 모니터링하는 사이트 전체에서 사전 로드된 LCP 이미지가 있는 페이지 로드의 98%가 '좋음(good)' 점수를 받은 반면, 사전 로드하지 않은 경우는 88%에 불과했습니다. 사전 로드된 이미지의 p75 LCP는 사전 로드되지 않은 이미지보다 약 2배 빠릅니다.

LCP 이미지가 브라우저에서 다운로드하는 첫 번째 이미지가 아닌 경우 사전 로드가 훨씬 더 중요해집니다. 이는 다음과 같은 경우에 발생합니다.

• 표시되는 뷰포트 내에 여러 이미지가 있는 경우
• LCP 이미지가 백그라운드 이미지인 경우(백그라운드 이미지는 일반적으로 포그라운드 이미지보다 늦게 다운로드됨)
• LCP 요소가 JavaScript에 의존하는 경우. 예를 들어 슬라이더 스크립트를 사용하거나 사이트가 React와 같은 JavaScript 프레임워크를 기반으로 구축된 경우입니다.

여전히 2025 Web Almanac에 따르면 모바일 사이트의 17%가 LCP 이미지를 지연 로드(lazy-load)합니다. 모바일 오리진의 62%만이 LCP 기준을 통과합니다. 이 두 가지 사실은 무관하지 않습니다. LCP 이미지를 지연 로드하고 있다면 이를 먼저 수정한 다음 사전 로드하세요.

LCP 이미지에 fetchpriority="high" 사용하기

사전 로드 외에도 LCP 이미지 요소 자체에 fetchpriority="high"를 추가해야 합니다. 이는 브라우저에 다른 리소스보다 이 이미지의 우선순위를 높이도록 지시합니다. Google Flights 테스트에 따르면 이 속성을 추가하는 것만으로도 LCP가 2.6초에서 1.9초로 개선되었습니다.

<img src="hero.jpg"
     fetchpriority="high"
     width="800"
     height="400"
     alt="Hero image">

명시적으로 우선순위를 높이지 않으면 사전 로드된 이미지라도 여전히 기본 우선순위를 갖습니다. 링크 태그와 img 요소 모두에 rel="preload"와 fetchpriority="high"를 결합하면 브라우저에 가장 명확한 신호를 제공할 수 있습니다. 브라우저가 먼저 다운로드할 항목을 결정하는 방법에 대한 자세한 내용은 리소스 우선순위 지정에 대한 완벽 가이드를 참조하세요.

<link rel="preload"
      as="image"
      href="hero.jpg"
      fetchpriority="high">

fetchpriority="high"의 채택률은 2022년 모바일 사이트의 0.03%에서 2025년 17.3%로 크게 증가했으며, 이는 주로 WordPress가 핵심 기능으로 추가했기 때문입니다. CMS가 이를 자동으로 설정하지 않는다면 직접 추가하세요.

Largest Contentful Paint 이미지를 사전 로드하는 방법

LCP 이미지 사전 로드는 쉽습니다. 다음의 3단계만 거치면 됩니다.

1. LCP 요소 파악: Lighthouse 감사를 실행하고 Largest Contentful Paint 요소를 확인합니다. LCP 요소가 실제로 이미지인지 확인하세요!
2. 반응형 이미지 형식 확인. 반응형 이미지를 사용하는 경우 해당 모든 이미지 크기를 사전 로드 태그의 srcset에 추가해야 합니다. 그렇지 않으면 잘못된 이미지가 사전 로드되며, 이는 페이지 속도를 느려지게 할 뿐입니다.
3. 사전 로드 태그 추가. 이제 남은 일은 사전 로드 태그를 추가하는 것뿐입니다.

<link
   <!-- indicate preload -->
   rel="preload"
   <!-- as is required and indicates we are preloading an image -->
   as="image"
   <!-- image src -->
   href="wolf.jpg"
   <!-- boost priority -->
   fetchpriority="high"
   <!-- optional: the responsive image srcset -->
   imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w"
   <!-- must match the sizes attribute on your img element -->
   imagesizes="100vw">

imagesizes 값은 <img> 요소의 sizes 속성과 일치해야 합니다. 이미지가 뷰포트 너비의 절반으로 표시되는 경우 imagesizes="50vw"를 사용하세요. 이를 잘못 설정하면 브라우저가 잘못된 이미지 변형을 사전 로드하게 됩니다.

오직 LCP 이미지만 사전 로드하세요. 너무 많은 리소스를 사전 로드하면 우선순위 상승 효과가 희석되어 브라우저가 가장 중요한 것을 구별할 수 없습니다. LCP 이미지를 위한 단 하나의 사전 로드면 충분합니다. 더 공격적인 접근 방식을 원한다면 사전 로드와 103 Early Hints를 결합하여 HTML이 도착하기도 전에 다운로드를 시작할 수 있습니다.

사전 로드는 이미지 다운로드를 더 일찍 시작하게 하지만, 이미지 자체도 여전히 최적화가 필요합니다. WebP 또는 AVIF와 같은 최신 형식과 올바른 크기로 제공하세요. 전체적인 요약은 Core Web Vitals를 위한 이미지 최적화를 참조하세요.

사전 로드는 LCP 타이밍의 한 부분, 즉 이미지 다운로드가 시작되기 전의 지연을 해결하는 데에만 도움이 됩니다. Time to First Byte가 느리다면 아무리 사전 로드를 해도 보완되지 않습니다. 사전 로드 태그는 HTML 내에 존재하므로 브라우저가 먼저 HTML을 수신해야 합니다. 사전 로드 힌트를 추가하기 전에 TTFB를 확인하세요.

WordPress에서 Largest Contentful Paint 이미지를 사전 로드하는 방법

WordPress에서 Largest Contentful Paint 이미지를 사전 로드하는 것은 전혀 어렵지 않습니다. 일반적으로 Largest Contentful Paint 이미지는 블로그 포스트나 페이지의 특성 이미지(Featured image)입니다. 단 몇 줄의 코드만으로 특성 이미지 URL과 srcset을 가져와 페이지의 head에 추가할 수 있습니다.

현재 템플릿의 header.php 파일에서 title 요소 바로 뒤에 이 코드를 추가하기만 하면 됩니다.

<?php if((int)get_post_thumbnail_id() > 0){
 $imgurl = get_the_post_thumbnail_url();
 $srcset = wp_get_attachment_image_srcset(get_post_thumbnail_id());
 $sizes = wp_get_attachment_image_sizes(get_post_thumbnail_id());
?>
 <link rel="preload"
       as="image"
       href="<?php echo $imgurl;?>"
       fetchpriority="high"
       imagesrcset="<?php echo $srcset;?>"
       imagesizes="<?php echo $sizes;?>">
<?php } ?>