자바스크립트 Lazy Loading을 통한 초기 Viewport 준비 시간 단축

10 Nov 2023

javascript

초기 로딩 시간을 줄이고 사용자 경험을 향상시키기 위해 웹 개발자들은 여러 가지 방법을 시도합니다. 그 중 하나는 ‘Lazy Loading’ 기술을 사용하는 것입니다. Lazy Loading은 필요한 자원을 보여주는 데 필요한 최소한의 작업만 수행하여 초기 Viewport를 빠르게 준비하는 방법입니다.

Lazy Loading이란 무엇인가요?

Lazy Loading은 웹 페이지가 처음 로딩될 때 사용자에게 보여지는 영역(일반적으로 뷰포트)의 자원들만 먼저 로딩하는 기술입니다. 다른 자원들(이미지, 스크립트, 스타일시트 등)은 사용자가 스크롤하거나 필요한 순간에 비로소 로딩됩니다. 이는 불필요한 자원의 로딩을 최소화하고 초기 로딩 시간을 단축시켜줍니다.

자바스크립트 Lazy Loading 구현 방법

다음은 자바스크립트를 사용하여 이미지 Lazy Loading을 구현하는 코드의 예시입니다.

window.addEventListener('DOMContentLoaded', function() {
  // 페이지에서 모든 이미지 요소를 선택합니다.
  var images = document.querySelectorAll('img[data-src]');

  // 이미지가 Viewport에 진입할 때 이미지를 로딩합니다.
  function lazyLoadImage(image) {
    // data-src 속성에서 실제 이미지 URL을 가져옵니다.
    var imageUrl = image.getAttribute('data-src');
    if (imageUrl) {
      // 이미지를 로딩합니다.
      image.setAttribute('src', imageUrl);
      // 이미지의 data-src 속성을 삭제합니다.
      image.removeAttribute('data-src');
    }
  }

  // 이미지가 Viewport에 진입하는지 확인하고 로딩합니다.
  function handleImageViewport() {
    images.forEach(function(image) {
      var rect = image.getBoundingClientRect();
      if (rect.top < window.innerHeight && rect.bottom >= 0) {
        lazyLoadImage(image);
      }
    });
  }

  // 스크롤 이벤트를 감지하여 이미지 로딩을 처리합니다.
  window.addEventListener('scroll', handleImageViewport);

  // 페이지 로딩 시 즉시 이미지 로딩을 처리합니다.
  handleImageViewport();
});

위의 예시 코드는 DOMContentLoaded 이벤트를 사용하여 페이지의 모든 이미지 요소를 가져옵니다. 그런 다음, 스크롤 이벤트를 감지하여 이미지가 뷰포트에 진입하는지 확인하고, 이미지가 뷰포트에 진입하면 해당 이미지를 로딩하는 함수를 호출합니다. 마지막으로, 페이지 로딩 시 즉시 이미지 로딩을 처리해 사용자에게 초기 뷰포트를 빠르게 제공합니다.

결론

자바스크립트 Lazy Loading은 초기 로딩 시간을 단축하고 사용자가 더 빠르게 컨텐츠를 볼 수 있도록 도와줍니다. 사용자 경험을 향상시키고 웹 페이지 성능을 최적화하기 위해 Lazy Loading을 적용해보는 것을 고려해보세요.

참고 문서