이미지는 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!">
이 마크업에서 중점을 두어야 하는 세 가지 관련 요소가 있습니다.
class
속성: 있습니다.src
속성: 확인할 수 있습니다- 자리표시자 속성인
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를 사용하지 않으며 익숙한 지연 시간 방법을 제공합니다. 이미지를 로드하는 방법을 배웠습니다.