이미지 지연 로드

Jeremy Wagner
Rachel Andrew

이미지는 HTML에서 <img> 요소로 인라인 처리되므로 웹페이지에 표시될 수 있습니다. CSS 배경 이미지로 사용할 수 있습니다. 이 게시물에서는 두 가지 유형의 이미지를 모두 지연 로드하는 방법을 알아봅니다.

인라인 이미지

가장 일반적인 지연 로드 후보는 <img> 요소에 사용되는 이미지입니다. 인라인 이미지에는 지연 로드와 여러 브라우저에서 최상의 호환성을 위해 함께 사용할 수 있습니다.

브라우저 수준 지연 로드 사용

Chrome과 Firefox 모두 loading 속성을 사용하여 지연 로드를 지원합니다. 이 속성은 <img> 요소와 <iframe> 요소에도 추가할 수 있습니다. 값 lazy은 이미지가 표시 영역에 있는 경우 이미지를 즉시 로드하도록 브라우저에 지시합니다. 사용자가 이미지 근처로 스크롤하면 다른 이미지를 가져올 수 있습니다.

MDN의 loading 필드를 참조하세요. 브라우저 호환성 브라우저 지원에 대한 자세한 내용을 확인하려면 표를 참조하세요. 브라우저에서 지연 로드를 지원하지 않으면 이 속성은 무시됩니다. 이미지가 정상적으로 즉시 로드됩니다.

대부분의 웹사이트에서 이 속성을 인라인 이미지에 추가하면 실적이 향상됩니다. 사용자가 스크롤하지 않을 이미지를 로드하는 것을 방지할 수 있습니다. 이미지가 많고 지연 로드를 지원하지 않는 브라우저 사용자에게 이를 다음에 설명된 방법 중 하나와 결합해야 합니다.

자세한 내용은 브라우저 수준 웹용 지연 로드를 참고하세요.

Intersection Observer 사용

<img> 요소의 지연 로드를 폴리필하기 위해 자바스크립트를 사용하여 이 요소가 표시 영역입니다. 일치한다면 src (때로는 srcset) 속성은 다음과 같습니다. URL로 채워집니다.

지연 로딩 코드를 작성해 본 적이 있다면 이 작업을 완료했을 수도 있습니다. scroll 또는 resize와 같은 이벤트 핸들러를 사용하면 됩니다. 이 접근 방식은 호환이 가장 잘 되기 때문에 최신 브라우저는 더 빠르고 이 API는 Intersection Observer API

Intersection Observer는 다양한 기능에 의존하는 코드보다 사용하고 읽기 쉽습니다. 이벤트 핸들러(관찰자만 등록하면 됨) 지루한 요소 가시성 감지 코드를 작성하는 대신 전체 이제 요소가 표시될 때 뭘 할지 결정하는 일만 남았습니다. 지연 로드되는 <img> 요소에 다음과 같은 기본 마크업 패턴을 사용한다고 가정해 보겠습니다.

<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="I'm an image!">

이 마크업에서 중점을 두어야 하는 세 가지 관련 요소가 있습니다.

  1. class 속성: 있습니다.
  2. src 속성: 확인할 수 있습니다
  3. 자리표시자 속성인 data-src 및 data-srcset 속성 가 표시됩니다.

이제 JavaScript에서 Intersection Observer를 사용하여 지연 로드하는 방법을 알아보겠습니다. 이미지 1개를 사용합니다.

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to event handlers here
  }
});

문서의 DOMContentLoaded 이벤트에서 이 스크립트는 lazy 클래스가 포함된 <img> 요소 Intersection Observer를 사용할 수 있는 경우 img.lazy 요소가 표시 영역입니다.

Intersection Observer는 모든 최신 브라우저에서 사용할 수 있습니다. 따라서 loading="lazy"의 폴리필로 사용하면 대부분의 방문자가 지연 로드를 사용할 수 있습니다.

CSS의 이미지

<img> 태그는 웹페이지에서 이미지를 사용하는 가장 일반적인 방법이지만, 이미지 CSS를 통해서도 호출할 수 있습니다. background-image 속성 (및 기타 속성) 브라우저 수준의 지연 로드는 CSS 배경 이미지에 적용되지 않으며, 따라서 지연 로드할 배경 이미지가 있다면 다른 방법을 고려해야 합니다.

다음과 상관없이 로드되는 <img> 요소와 달리 CSS에서 이미지 로드 동작은 보다 많은 수의 있습니다. 문서와 CSS 객체가 모델 및 렌더링 트리 브라우저에서 CSS가 문서에 적용되는 방식을 검토한 다음 외부 리소스를 요청할 수 있습니다 브라우저에서 CSS 규칙을 결정한 경우 현재와 달리 해당 문서에 적용되지 않습니다. 브라우저가 이를 요청하지 않습니다.

이러한 예측 동작은 CSS의 이미지 로드를 지연하는 데 자바스크립트를 사용하여 요소가 표시 영역 내에 있는지 확인하고 이후에 해당 요소에 클래스를 적용하면 배경 이미지입니다. 이렇게 하면 필요할 때 이미지가 다운로드됩니다. 할 수 있습니다. 예를 들어 대형 히어로 배경 이미지:

<div class="lazy-background">
  <h1>Here's a hero heading to get your attention!</h1>
  <p>Here's hero copy to convince you to buy a thing!</p>
  <a href="/buy-a-thing">Buy a thing!</a>
</div>

div.lazy-background 요소에는 일반적으로 히어로 배경이 포함됩니다. 일부 CSS에서 호출한 이미지입니다. 하지만 이 지연 로드 예에서는 visible를 통한 div.lazy-background 요소의 background-image 속성 클래스가 표시 영역에 있을 때 요소에 추가됩니다.

.lazy-background {
  background-image: url("hero-placeholder.jpg"); /* Placeholder image */
}

.lazy-background.visible {
  background-image: url("hero.jpg"); /* The final image */
}

여기에서 자바스크립트를 사용하여 요소가 표시 영역에 있는지 확인( Intersection Observer!)를 사용하고 visible 클래스를 div.lazy-background 요소가 생성됩니다.

document.addEventListener("DOMContentLoaded", function() {
  var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));

  if ("IntersectionObserver" in window) {
    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
          lazyBackgroundObserver.unobserve(entry.target);
        }
      });
    });

    lazyBackgrounds.forEach(function(lazyBackground) {
      lazyBackgroundObserver.observe(lazyBackground);
    });
  }
});

최대 콘텐츠 페인트 (LCP)에 미치는 영향

지연 로드는 이미지 로드를 실제로 필요한 시점에 지연하여 시작 시 전체 데이터 사용량과 네트워크 경합을 모두 줄이는 훌륭한 최적화 기능입니다. 이를 통해 시작 시간을 개선하고 이미지 디코딩에 필요한 시간을 줄여 기본 스레드의 처리를 줄일 수 있습니다.

하지만 지연 로드는 사용자가 지연 로드 기술에 지나치게 관심이 많은 경우 웹사이트의 최대 콘텐츠 페인트 LCP에 부정적인 영향을 줄 수 있는 기술입니다. 한 가지는 시작 시 표시 영역에 표시되는 이미지의 지연 로드를 피해야 합니다.

JavaScript 기반 지연 로더를 사용하는 경우 표시 영역 내 이미지의 지연 로드를 피하는 것이 좋습니다. 이러한 솔루션에서 data-src 또는 data-srcset 속성을 src 및 srcset 속성의 자리표시자로 사용하는 경우가 많기 때문입니다. 여기서 문제는 브라우저 미리 로드 스캐너가 시작 시 이미지를 찾을 수 없어 이러한 이미지의 로드가 지연된다는 점입니다.

브라우저 수준의 지연 로드를 사용하여 표시 영역 내 이미지를 지연 로드해도 역효과가 날 수 있습니다. 표시 영역 내 이미지에 loading="lazy"를 적용하면 이미지가 표시 영역에 있음을 브라우저에서 인식할 때까지 이미지가 지연되며 이는 페이지의 LCP에 영향을 미칠 수 있습니다.

시작 시 표시 영역에 표시되는 이미지를 지연 로드하지 마세요. 이는 사이트의 LCP에 부정적인 영향을 주어 사용자 경험에 부정적인 영향을 미치는 패턴입니다. 시작 시 이미지가 필요한 경우 지연 로드를 사용하지 않고 최대한 빨리 시작할 때 이미지를 로드하세요.

라이브러리 지연 로드

가능한 경우 브라우저 수준의 지연 로드를 사용해야 하지만, 상당한 수의 사용자가 여전히 이전 브라우저를 사용하는 등 그렇게 할 수 없는 상황에서는 다음 라이브러리를 사용하여 이미지를 지연 로드할 수 있습니다.

  • latencysizes는 모든 기능을 갖춘 지연 크기입니다. 로딩 라이브러리를 제공합니다. 사용하는 패턴은 는 lazyload 클래스가 지원되며, <img> 요소에 이미지 URL을 지정해야 함 data-src 또는 data-srcset 속성(콘텐츠가 교체됨) 각각 src 및/또는 srcset 속성으로 변환합니다. 교차 영역 사용 Observer (폴리필 가능)를 사용하며 여러 플러그인을 사용하여 동영상 지연 로드 등의 작업을 수행할 수 있습니다 지연 크기 사용에 관해 자세히 알아보기
  • vanilla-lazyload는 지연 로드 이미지, 배경 이미지, 동영상, iframe을 위한 간단한 옵션 사용할 수 있습니다 Intersection Observer를 활용하고 반응형 이미지를 지원하며 브라우저 수준의 지연 로드를 사용 설정합니다.
  • lozad.js는 또 다른 경량의 옵션을 선택합니다. 따라서 성능이 뛰어납니다. 이전 브라우저에서 사용하려면 폴리필해야 합니다.
  • React 전용 지연 로드 라이브러리가 필요한 경우 react-lazyload를 호출했습니다. 하지만 Intersection Observer를 사용하지 않으며 익숙한 지연 시간 방법을 제공합니다. 이미지를 로드하는 방법을 배웠습니다.