[웹/최적화]Image Lazy Loading

📌 Image Lazy Loading이란?

페이지 안에 있는 실제 이미지들이 화면에 보여질 필요가 있을 때 로딩 할 수 있도록 지연시키는 것

- 디바이스 내 리소스 활용도 증가

- 웹 성능 최적화

- EX. SPA(Sing Page Application) 내에서 바로 보여질 필요가 없는 이미지를 지연 로딩

 

✔ 방식

1. 자바스크립트를 이용해 image load를 트리거하기

HTML

<img src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" />
<img src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" />
<img src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" />
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400,h-300" />
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image5.jpeg?tr=w-400,h-300" />
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image6.jpeg?tr=w-400,h-300" />

 

JS

document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages = document.querySelectorAll("img.lazy");    
  var lazyloadThrottleTimeout;
  
  function lazyload () {
    if(lazyloadThrottleTimeout) {
      clearTimeout(lazyloadThrottleTimeout);
    }    
    
    lazyloadThrottleTimeout = setTimeout(function() {
        var scrollTop = window.pageYOffset;
        lazyloadImages.forEach(function(img) {
            if(img.offsetTop < (window.innerHeight + scrollTop)) {
              //여기 이부분이 뷰포트에 보일 때 src 값 넣어주는 부분
              img.src = img.dataset.src;
              img.classList.remove('lazy');
            }
        });
        if(lazyloadImages.length == 0) { 
          document.removeEventListener("scroll", lazyload);
          window.removeEventListener("resize", lazyload);
          window.removeEventListener("orientationChange", lazyload);
        }
    }, 20);
  }
  
  document.addEventListener("scroll", lazyload);
  window.addEventListener("resize", lazyload);
  window.addEventListener("orientationChange", lazyload);
});

 

 

2. Intersection Observer API

- Intersection Observer는 비교적 최근에 나온 API로 엘리먼트 요소가 뷰포트에 들어가는 것을 감지하고 액션을 취하는 것을 간단하게 만들어줌(대신 연산해줌)

- 브라우저 호환성 확인 후 사용

 

JS

document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages;    

  if ("IntersectionObserver" in window) {
    lazyloadImages = document.querySelectorAll(".lazy");
    //Observer 사용
    var imageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        //intersecting이란 대상 엘리먼트가 루트(디폴트는 아마 뷰포트)와 교차할때 true값
        if (entry.isIntersecting) {
          var image = entry.target;
          image.src = image.dataset.src;
          image.classList.remove("lazy");
          imageObserver.unobserve(image);
        }
      });
    });

    lazyloadImages.forEach(function(image) {
      imageObserver.observe(image);
    });
  } else {  
    var lazyloadThrottleTimeout;
    lazyloadImages = document.querySelectorAll(".lazy");
    
    function lazyload () {
      if(lazyloadThrottleTimeout) {
        clearTimeout(lazyloadThrottleTimeout);
      }    

      lazyloadThrottleTimeout = setTimeout(function() {
        var scrollTop = window.pageYOffset;
        lazyloadImages.forEach(function(img) {
            if(img.offsetTop < (window.innerHeight + scrollTop)) {
              img.src = img.dataset.src;
              img.classList.remove('lazy');
            }
        });
        if(lazyloadImages.length == 0) { 
          document.removeEventListener("scroll", lazyload);
          window.removeEventListener("resize", lazyload);
          window.removeEventListener("orientationChange", lazyload);
        }
      }, 20);
    }

    document.addEventListener("scroll", lazyload);
    window.addEventListener("resize", lazyload);
    window.addEventListener("orientationChange", lazyload);
  }
})

 

 

3. Native Lazy Loading

- chrome 76에서 지원

- 이미지에 loading="lazy"만 추가

- 지연 로딩 될 때 자리 차지의 변경으로 인한 타 콘텐츠의 내용 밀려남 방지를 위해 공간 크기 부여 꼭 해줘야함

- 타 브라우저 호환되지 않는 문제 있음(예시 사이트 : https://www.joongang.co.kr/society) 

 

HTML

<img src="…" loading="lazy" alt="…" width="200" height="200">

 

4. CSS 속성 중 background image 사용

 

HTML

<div id="container">
  <h3>Lazy loading CSS background images</h3>
  <p>엄청 긴 로렘입숨</p>
  <p>엄청 긴 로렘입숨</p>
  <div id="bg-image" class="lazy"></div>
  <p>
	로렘입숨
  </p>
</div>

CSS

#bg-image.lazy {
   background-image: none;
   background-color: #F1F1FA;
}
#bg-image {
  background-image: url("https://ik.imagekit.io/demo/img/image10.jpeg?tr=w-600,h-400");
  max-width: 600px;
  height: 400px;
}

JS는 옵저버와 같음

 

 

5. React.lazy

import React, { lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const CommonComponent = () => (
  <div>
    <LazyComponent />
  </div>
)

 

 

6. 라이브러리

- yall.js

- lazysizes

 

 

✔ 주의할 점

- 웹페이지 상단에 이미지는 lazy loading 하지 않음

- 이미지가 뷰포트에 완전히 들어올 때 가 아닌, 마진 값을 주어서 사용자가 볼 때보다 로딩 트리거 시점을 살짝 더 빨리 잡아서 placeholder를 보여주지 않도록 하기

- placeholder를 쓰더라도, 기본 이미지의 색상을 추출해서 비슷한 색상의 placeholder 또는 저화질의 placeholder를 사용하여 이미지 용량 줄이면서 ux 높이기

 

 

참고

https://helloinyong.tistory.com/297