이미지 로딩을 위한 자바스크립트 Lazy Loading 테스트 방법

10 Nov 2023

javascript

이미지 로딩은 웹 페이지의 성능에 많은 영향을 미칠 수 있습니다. 특히 이미지가 많은 페이지의 경우, 이미지 로딩 시간이 길어져 사용자 경험에 악영향을 줄 수 있습니다. 이를 개선하기 위해 “lazy loading”이라고 알려진 기술을 사용할 수 있습니다. 이 기술은 웹 페이지가 로드될 때 이미지를 지연시켜 필요한 시점에 동적으로 로드하는 방식입니다.

이 자바스크립트 Lazy Loading 테스트 방법에 대해 알아보겠습니다.

1. Intersection Observer API

Intersection Observer API를 사용하면 요소가 뷰포트(화면 상에 보이는 부분)와 교차하는지 여부를 감지할 수 있습니다. 이를 통해 이미지가 사용자에게 실제로 보여져야 할 때 로드되도록 설정할 수 있습니다.

const lazyImages = document.querySelectorAll('img.lazy');

const lazyLoad = target => {
  const io = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove('lazy');
        observer.disconnect();
      }
    });
  });

  io.observe(target);
};

lazyImages.forEach(lazyLoad);

위의 코드는 모든 img 요소 중 lazy 클래스를 가진 이미지를 감지하여 뷰포트에 들어오면 실제 src 속성으로 변경하여 로드합니다.

2. 테스트 방법

개발한 이미지 Lazy Loading 기능을 테스트하기 위해서는 실제로 이미지가 지연되어 로드되는지 확인해야 합니다. 이를 위해 개발자 도구의 “Network” 탭을 사용할 수 있습니다.

Lazy Loading이 적용된 웹 페이지를 브라우저에서 엽니다.
개발자 도구를 열고 “Network” 탭을 선택합니다.
페이지를 스크롤하면서 이미지 로딩 상태를 확인합니다. 로드되기 전에는 “(pending)”으로 표시되고, 로드된 후에는 이미지 파일명이 표시됩니다.

3. 결과 확인하기

Lazy Loading 기능을 적용한 후, 웹 페이지의 성능이 향상되었는지 확인하기 위해 다음과 같은 사항을 고려해야 합니다.

이미지가 필요한 시점에만 로드되기 때문에 초기 페이지 로드 속도가 개선됩니다.
사용자가 스크롤을 내리면서 이미지를 보는 동안 이미지가 실시간으로 로드되므로 사용자 경험이 향상됩니다.
뷰포트 영역 밖에 있는 이미지는 로드하지 않으므로 네트워크 자원이 절약됩니다.

이 테스트 방법을 사용하여 자바스크립트 Lazy Loading이 잘 적용되었는지 확인할 수 있습니다. 성능 개선을 위해 Lazy Loading 기술을 적용하는 것을 고려해보세요!

해시태그: #LazyLoading #웹퍼포먼스