자바스크립트로 구현하는 이미지 지연 로딩(Lazy Loading)

웹에 이미지를 많이 다룬다면 고민해보세요!

이미지가 많으면 시간 소모가 늘어나면 이걸 해보세요!

웹사이트를 개발할 때 성능 최적화는 중요한 요소입니다. 그 중에서도 페이지 로딩 속도는 사용자 경험에 큰 영향을 미치는데요, 특히 이미지가 많은 페이지에서는 초기 로딩 시간 지연이 문제가 될 수 있습니다. 이를 해결하기 위 Lazy Loading(지연 로딩) 기법을 사용할 수 있습니다. Lazy Loading은 페이지 로딩 시, 화면에 보이는 이미지들만 우선 로드하고, 나머지 이미지들은 사용자가 스크롤하여 해당 영역에 도달했을 때 로드하는 방식입니다. 이로써 페이지의 초기 로딩 시간을 단축시키고, 불필요한 네트워크 자원 소모를 줄일 수 있습니다.

목차

이미지 로딩

Lazy Loading 개념

Lazy Loading은 필요할 때만 리소스를 로드하는 방식으로, 주로 이미지, iframe, 비디오 등의 멀티미디어 리소스에 적용됩니다. 이를 통해 사용자 경험을 개선하고, 특히 모바일 환경에서 성능을 최적화하는데 유리합니다.

Lazy Loading 구현

브라우저에서는 기본적으로 loading="lazy" 속성을 제공하지만, 자바스크립트를 활용하면 더 세밀한 제어가 가능합니다. 예를 들 사용자가 스크롤을 내리며 이미지를 로드할 때 트리거할 수 있습니다.

이미지 지연 로딩을 위한 HTML

먼저, 이미지를 로드할 HTML 구조를 준비합니다. 기본적으로 <img> 태그에 data-src 속성을 사용하여 이미지 경로를 저장하고, src 속성은 비워둡니다.

<img class="lazy" data-src="image1.jpg" alt="이미지 1번/>
<img class="lazy" data-src="image2.jpg" alt="이미지 2번" />
<img class="lazy" data-src="image3.jpg" alt="이미지 3번" />

Lazy Loading 기능 구현

자바스크립트로 이미지가 뷰포트에 들어올 때만 로드되도록 구현할 수 있습니다. IntersectionObserver API를 활용하면 훨씬 효율적이고 간단하게 구현할 수 있습니다.

document.addEventListener('DOMContentLoaded', function () {
  const lazyImages = document.querySelectorAll('img.lazy');

  const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src; // data-src에 저장된 이미지 URL을 src에 할당합니다.
        img.classList.remove('lazy'); // 로드된 이미지는 lazy 클래스 제거합니다.
        observer.unobserve(img); // 로드된 이미지는 더 이상 관찰하지 않습니다.
      }
    });
  });

  lazyImages.forEach(image => {
    imageObserver.observe(image); // 각 이미지를 관찰합니다.
  });
});

페이지 내에 있는 .lazy라는 클래스를 가진 모든 이미지를 관찰하다가, 해당 이미지가 뷰포트에 들어오면 data-src에 저장된 실제 이미지 경로를 src로 설정해 로드합니다. 이미 로드된 이미지는 더 이상 관찰하지 않도록 unobserve를 호출합니다.

이미지 로딩 최적화

이미지 포맷 최적화: 웹에서 가장 효율적인 이미지 포맷인 WebP를 사용하거나, 적절한 사이즈의 이미지를 제공하는 것이 좋습니다.

브라우저 캐싱: 이미지가 로드되었을 때 브라우저가 캐시를 사용하여 반복적으로 요청되는 이미지를 빠르게 불러올 수 있도록 설정합니다.

<img class="lazy" data-src="image1.webp" alt="이미지 1번

마무리

Lazy Loading은 웹사이트 성능을 개선하는 강력한 도구입니다. 특히 이미지가 많은 페이지에서는 페이지 로딩 시간을 단축시키고, 사용자에게 더 나은 경험을 제공할 수 있습니다. 자바스크립트를 활용한 Lazy Loading은 IntersectionObserver API를 사용하여 효율적이고 깔끔하게 구현할 수 있으며, 다양한 성능 최적화 기법과 함께 사용하면 웹 페이지의 속도와 성능을 한층 끌어올릴 수 있습니다.

 

Lazy Loading을 구현하여 웹사이트의 초기 로딩 속도를 개선하고, 사용자 경험을 한 단계 업그레이드해 보세요.