Image Lazy Loading

Image Lazy Loading

현재 화면에 보이지 않는 이미지들을 Lazy loading 처리를 시켜 웹 페이지 초기의 로딩시간을 단축해 웹 성능을 향상 시킬 수 있다.

1. 성능향상 - 웹 사이트의 로딩 시간 줄이기
   lazy loading을 이용하면, 페이지 초기 로딩 시 필요로 한 이미지의 수를 줄일 수 있습니다.
   리소스 요청을 줄이는 것은 다운로드 bytes를 줄이는 것이며, 이는 유저가 사용할 수 있는 제한된 네트워크 대역폭의 경쟁을 줄이는 것을 의미
   다른 리소스들을 더 빠르게 처리해서 다운로드하도록 확보할 수 있게됨. 그러므로, lazy loading을 쓰지 않는 것에 비해서 페이지를 훨씬 빨리 유저가 이용가능
2. 비용감소 - 통신 비용
   이미지 전달 또는 다른 전달할 무언가는 주로 전송 바이트 수에 기반하여 청구
   이미지가 보여지지 않으명 절대 로딩하지 않으므로, 페이지 내에서 전달할 총 바이트 용량을 줄일 수 있음
   이미지를 로드하기 위해서는 img 태그의 src속성을 이용하는데, 브라우저가 scr 속성을 가지게 되면 img가 뷰포트 밖에 있어도 무조건 이미지를 로드하게 된다.

img 태그의 data-scr와 Intersection Observer API를 이용한 Image Loading

이미지들의 로딩을 지연시키기 위해 img 태그의 src 속성 대신에 data-src 속성에 이미지 url을 넣는다. 엘리먼트가 뷰포트에 들어간 것을 IO API가 감지 했을 때 isIntersecting 속성을 이용해 url을 data-src 속성에서 src 속성으로 이동시켜 브라우저가 이미지를 로드하도록 한다. 전부 로드되면 lazy 클래스명을 이미지에서 삭제하고 옵저버도 제거한다.

export const useLazyLoading = () => {
  const imgs = document.querySelectorAll(".lazy");

  const observerCallback = (entries, observer) => {
    entries.forEach(({ isIntersecting, intersectionRatio, target }) => {
      if (isIntersecting && intersectionRatio > 0) {
        target.src = target.dataset.src;
        target.classList.remove("lazy");
        observer.unobserve(target);
      }
    });
  };

  const io = new IntersectionObserver(observerCallback);
  imgs.forEach((img) => io.observe(img));
};

모든 이미지에 lazy load 적용하지 않기

• 뷰포트에 있거나, 웹 페이지에서 시작되는 이미지
• 뷰포트에서 얼마 떨어져 있지 않은 이미지
• 웹 페이지 상단의 이미지
• 마케팅 배너,로고 등

[출처]
https://velog.io/@swhan9404/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%B5%9C%EC%A0%81%ED%99%94-image-lazy-loading
https://helloinyong.tistory.com/m/297
https://onlydev.tistory.com/m/104