Lazy Loading을 통한 웹 페이지의 퍼포먼스 이슈 해결 방법

10 Nov 2023

javascript

웹 페이지의 로딩 속도는 사용자 경험과 검색 엔진 최적화에 중요한 역할을 합니다. 특히 이미지와 같은 큰 자원들을 한 번에 로딩하면 페이지의 로딩 시간이 길어지고 사용자는 대기할 필요가 있습니다. 이런 문제를 해결하기 위해 Lazy Loading이라는 기술을 사용할 수 있습니다.

Lazy Loading은 화면에 노출되기 직전까지 이미지나 비디오와 같은 리소스를 로딩하지 않고, 사용자가 스크롤을 내리거나 노출되어야 할 시점에서 로딩하는 방식입니다. 이를 통해 초기 로딩 시간을 단축시키고 웹 페이지의 퍼포먼스를 향상시킬 수 있습니다.

Lazy Loading의 장점

로딩 시간 단축: 사용자는 화면에 노출되지 않는 이미지나 비디오를 기다릴 필요가 없으므로 웹 페이지가 더 빠르게 로딩됩니다.
데이터 사용량 감소: 화면에 보이지 않는 리소스를 불러오지 않기 때문에 데이터 사용량이 줄어듭니다.
자원 효율성: 필요한 리소스만 로딩하므로 자원의 낭비를 줄일 수 있습니다.
사용성 향상: 페이지 스크롤 등 사용자 상호작용에 따라 필요한 리소스를 로딩하기 때문에 사용자 경험이 향상됩니다.

Lazy Loading 구현 방법

Intersection Observer API 사용

Lazy Loading을 구현하기 위해 Intersection Observer API를 사용할 수 있습니다. 이 API는 화면에 요소가 노출되는 것을 감지하고 자동으로 로딩하는 기능을 제공합니다.

이미지나 비디오 태그의 src 속성을 빈 값으로 설정합니다.
Intersection Observer 객체를 생성하고 초기화합니다.
감지 대상으로 설정할 요소들을 선택합니다.
감지 대상 요소들을 관찰하고, 화면에 노출될 때 콜백 함수를 실행하여 리소스를 로딩합니다.

// Intersection Observer 객체 생성
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      const src = img.getAttribute('data-src');
      img.setAttribute('src', src);
      
      // 로딩 후 관찰 중지
      observer.unobserve(img);
    }
  });
});

// Lazy Loading 대상 이미지 요소 선택
const lazyImages = document.querySelectorAll('.lazy');

lazyImages.forEach((img) => {
  observer.observe(img);
});

Lazy Loading 라이브러리 사용

Intersection Observer API는 모든 브라우저에서 지원되지 않을 수 있으므로, Lazy Loading을 쉽게 구현할 수 있는 라이브러리를 사용하는 것도 한 가지 방법입니다. 다양한 Lazy Loading 라이브러리 중에는 Intersection Observer API를 polyfill로 대체하여 크로스 브라우저 호환성을 제공하는 것도 있습니다.

예를 들어, lozad.js라는 라이브러리는 이미지와 비디오를 위한 Lazy Loading을 지원하며, Intersection Observer API를 대체할 수 있습니다.

<!-- lozad.js 라이브러리 CDN 추가 -->
<script src="https://cdn.jsdelivr.net/npm/lozad@1.14.0/dist/lozad.min.js"></script>

<!-- Lazy Loading 대상 이미지 요소 -->
<img class="lazy" data-src="image.jpg">
<img class="lazy" data-src="image2.jpg">

<script>
  const observer = lozad('.lazy', {
    rootMargin: '100px', // 화면에 대상 요소가 노출되기 전에 로딩
    threshold: 0.1 // 노출 비율이 10% 이상일 때 로딩
  });

  observer.observe();
</script>

결론

Lazy Loading은 웹 페이지의 퍼포먼스를 향상시키기 위한 중요한 기술입니다. 사용자 경험과 로딩 속도를 개선하는 데 큰 도움을 주며, Intersection Observer API나 Lazy Loading 라이브러리를 활용하여 간단하게 구현할 수 있습니다. 이를 통해 사용자들이 더 빠르고 부드러운 웹 페이지를 경험할 수 있습니다.

#webdevelopment #lazyloading