더 빠른 Core Web Vitals를 위한 배경 이미지 지연

더 빠른 Largest Contentful Paint를 위한 배경 이미지 지연 또는 지연 로드

Arjen Karel - linkedin

Last update: 2026-03-02

배경 이미지 지연

배경 이미지는 Core Web Vitals에 좋은 영향을 미치는 경우가 드뭅니다. 배경 이미지는 반응형이 아니며, 네이티브 loading 속성에 접근할 수 없고, 배경 이미지의 우선순위를 네이티브 방식으로 제어할 수 없기 때문입니다.

배경 이미지는 종종 Core Web Vitals에 문제를 일으킵니다. 중요하지 않은 배경 이미지를 지연시키면 많은 경우에 Largest Contentful Paint를 개선할 수 있습니다.

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

2024년 Web Almanac의 Performance 챕터(LCP 요소 유형 데이터가 포함된 가장 최신 버전)에 따르면, 모바일 페이지의 9%가 CSS 배경 이미지를 LCP 요소로 사용합니다. 그중 단 2%만이 이를 사전 로드(preload)합니다. 즉, 약 11개 중 1개의 웹사이트에서 페이지 내 가장 중요한 이미지가 브라우저의 사전 로드 스캐너에 표시되지 않아 늦게 로드되기 시작한다는 의미입니다.

CoreDash가 모니터링하는 사이트 전반에 걸쳐, LCP 요소가 일반적인 <img> 태그인 페이지는 LCP가 CSS 배경 이미지인 페이지보다 p75 LCP가 약 620ms 더 빠릅니다. 이 차이는 거의 전적으로 리소스 로드 지연에서 발생합니다. 브라우저는 사전 로드 스캐너를 통해 <img>를 즉시 발견하지만, 배경 이미지는 CSS가 다운로드되고 파싱될 때까지 기다려야 하기 때문입니다.

웹사이트에 배경 이미지를 포함하는 이러한 안티패턴(anti-pattern)은 너무 자주 보입니다. 특히 Elementor와 같은 페이지 빌더를 사용하는 WordPress 웹사이트에서 많이 발생합니다.

LCP 이미지(히어로 이미지)를 포함한 모든 이미지가 지연 로드(lazy load)됩니다.
실제로 중요하지 않은 일부 이미지 요소(예: 스페이서, 검색창 배경 등)가 스타일시트에서 배경 이미지로 연결됩니다.

이 짧은 글에서는 페이지의 더 중요한 다른 이미지에 우선순위를 부여하기 위해 이러한 배경 이미지를 지연 로드하는 방법을 보여드리겠습니다.

주의 사항!

먼저 주의 사항을 말씀드리겠습니다! LCP 요소가 배경 이미지로 인해 지연되는 경우는 실수가 발생한 것이며, 가급적이면 올바른 방식으로 수정해야 합니다(LCP 이미지 사전 로드, LCP 이미지 지연 로드 안 함, 배경 이미지 사용 자체를 피함). 불행하게도 레거시가 너무 많아 단기적으로 사이트를 최대한 임시방편으로 수정하는 것 외에는 대안이 없는 경우도 있습니다. 그럴 때 바로 오늘 제가 소개하는 방법과 같은 수정 사항을 적용할 수 있습니다!

방법 1: 모든 것을 지연

모든 것을 지연시키는 방법은 다소 무식한 접근 방식입니다. 하지만 구현하기 쉽고, Core Web Vitals를 개선하는 데 효과적으로 작동할 것입니다! 이 방식을 사용하면 모든 배경 이미지는 DOMContentLoaded 이벤트가 발생할 때까지 지연됩니다. 이를 통해 브라우저는 가장 중요한 리소스를 먼저 스케줄링할 수 있는 약간의 추가 시간을 얻게 됩니다.

관련 단계는 다음과 같습니다. 먼저 배경 이미지가 있는 모든 요소에 대해 background-image 스타일 속성을 오버라이드합니다. DOM 콘텐츠가 로드되면 이 오버라이드를 다시 제거할 것입니다. 그 시점에는 배경 이미지가 아닌 이미지들이 다운로드 대기열에 추가되어 있을 것입니다. 이때 덜 중요한 배경 이미지를 다운로드 대기열에 추가하면 매우 좋습니다.

코드

먼저 스타일을 생성하고 페이지의 HEAD에 배치합니다. 나중에 이 스타일 태그를 제거할 때 이 id를 사용할 것이므로 스타일의 id를 지정하는 것이 중요합니다. 물론 와일드카드(*) 대신 실제로 배경 이미지가 있는 CSS 클래스 이름만 추가할 수도 있습니다.

<style id="no-bg-img">
    *{background-image:none!important}
</style>

다음으로, DOM 콘텐츠가 로드될 때쯤이면 LCP 이미지는 이미 다운로드 대기열에 추가되어 있을 것입니다. 이 시점에서는 배경 이미지를 대기열에 추가해도 안전합니다.

<script>
    window.addEventListener('DOMContentLoaded',function(){
        document.getElementById('no-bg-img').remove();
    })
</script>

만약 LCP가 일찍 다운로드되도록 트리거되지 않는다면 이는 아마도 JavaScript 때문일 것입니다. 그런 경우에는 'DOMContentLoaded'를 'load' 이벤트로 변경해 볼 수 있습니다.

Before

After

DebugBear의 테스트에 따르면, background-image LCP 요소를 사전 로드(preload)하면 LCP가 3.4초에서 1.7초로 단축되었습니다. 전체 LCP 시간에서 리소스 로드 지연이 차지하는 비율은 75%에서 단 2%로 감소했습니다.

방법 2: 배경 이미지 지연 로드

배경 이미지 지연 로드 방법은 약간 더 부드럽고 발전된 방식이며 더 많은 개인적 조정이 필요합니다.

작동 방식은 다음과 같습니다. 먼저 배경 이미지가 있는 모든 요소를 수동으로 식별합니다. 해당 요소들에 클래스 이름(.lazybg)을 추가해야 합니다. 다음으로 IntersectionObserver를 사용하여 이러한 요소들을 관찰하고, 뷰포트에 가까워지면 배경 이미지를 지연 로드(lazy load)할 것입니다.

코드

먼저 스타일을 생성하고 페이지의 HEAD에 배치합니다. 이 스타일은 이전 스타일과 비슷해 보이지만, 페이지의 모든 요소에 대해 배경 이미지 속성을 제거하는 대신 특정 클래스 이름이 있는 요소에 대해서만 제거할 것입니다.

<style>
    .lazybg {background-image: none !important}
</style>

다음으로, DOM 콘텐츠가 로드되면 배경 이미지가 있는 요소들을 관찰하기 시작할 것입니다. 해당 요소가 뷰포트로 스크롤되어 들어오면 .lazybg 클래스를 제거하여 배경 다운로드를 트리거합니다.

<script>
window.addEventListener('DOMContentLoaded', (event) => {

  // all elements with background images that should be lazy loaded
  const lazyImages = document.querySelectorAll('.lazybg');

  // options for the observer
  const backgroundOptions = {
     threshold: 0,
     rootMargin: "0px 0px 50px 0px"
  };

  // the observer
  const imageObserver = new IntersectionObserver((entries, imageObserver) => {
     entries.forEach(entry => {
         if (entry.isIntersecting) {
             showImageBackground(entry.target);
             imageObserver.unobserve(entry.target);
         }
     });
  }, backgroundOptions);


  // observe each image
  lazyImages.forEach(image => {
     imageObserver.observe(image);
  });

  // show background image
  function showImageBackground(node) {
     node.classList.remove('lazybg');
  }
});
</script>

이 방법의 장점은 보이는 뷰포트에 없는 배경 이미지가 다운로드 대기열에 추가되지 않는다는 것입니다. 이를 통해 로딩 단계에서 브라우저의 리소스를 확보할 수 있습니다. 이와 같은 기술에 대한 더 자세한 내용은 오프스크린 이미지 지연 방법을 참조하세요.

Before

After

결론

두 가지 방법 모두 Largest Contentful Paint 이미지와 같은 더 중요한 이미지를 위해 배경 이미지를 지연시키는 데 효과적입니다. 첫 번째 방법은 구현하기가 매우 쉽고 빠른 결과를 얻을 수 있습니다. 두 번째 방법은 배경 이미지에 진정한 지연 로드(lazy load) 동작을 추가하여 더 큰 PageSpeed 향상을 제공합니다.

이러한 방법 중 하나를 적용할 때는 주의하세요. 배경 이미지를 지연시켜야 한다면 해당 페이지는 제가 부르는 소위 '의도적인 느림(slow by design)' 상태인 것입니다. 이 문제를 해결하는 권장되는 방법은 페이지를 다시 작성하고 배경 이미지의 사용을 피하는 것입니다.

About the author

Arjen Karel is a web performance consultant and the creator of CoreDash, a Real User Monitoring platform that tracks Core Web Vitals data across hundreds of sites. He also built the Core Web Vitals Visualizer Chrome extension. He has helped clients achieve passing Core Web Vitals scores on over 925,000 mobile URLs.