자바스크립트 Lazy Loading을 활용한 리소스 관리

10 Nov 2023

javascript

지금은 웹사이트와 웹 애플리케이션의 성능 최적화가 매우 중요해졌습니다. 페이지의 로딩 속도는 사용자 경험에 직접적인 영향을 미치고, 최신 검색 엔진의 알고리즘에서도 반영되는 핵심 지표입니다. 따라서, 개발자는 웹사이트의 로딩 성능을 최대한 향상시키기 위한 다양한 기술을 적용하고 있습니다.

여기서, “Lazy Loading”이라는 개념을 소개하고자 합니다. Lazy Loading은 필요한 리소스를 페이지가 아직 로딩되지 않은 상태에서 미리 로드하지 않고, 필요한 시점에 로드하는 방식을 말합니다. 이를 통해 페이지의 초기 로딩 속도를 향상시키고, 사용자의 경험을 좋게 만들 수 있습니다.

Lazy Loading의 장점

초기 페이지 로딩 속도 향상: 페이지가 초기에 필요한 리소스만 로드하므로, 페이지가 빠르게 로딩됩니다.
네트워크 트래픽 최적화: 필요한 리소스만 로딩하므로, 불필요한 데이터 전송을 줄여줍니다.
사용자 경험 개선: 페이지의 전체 로딩이 완료되지 않았더라도 중요한 컨텐츠를 먼저 표시함으로써, 사용자가 기다리는 시간을 최소화할 수 있습니다.

자바스크립트 Lazy Loading 구현하기

Lazy Loading은 다양한 방법으로 구현할 수 있습니다. 자바스크립트를 사용하여 Lazy Loading을 구현하는 방법을 알아보겠습니다. 아래는 간단한 예제 코드입니다.

// 이미지 Lazy Loading
const images = document.querySelectorAll('img[data-src]');

const lazyLoadImage = (image) => {
  image.src = image.dataset.src;
  image.addEventListener('load', () => {
    image.removeAttribute('data-src');
  });
};

const io = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      lazyLoadImage(entry.target);
      observer.unobserve(entry.target);
    }
  });
});

images.forEach((image) => {
  io.observe(image);
});

위 코드에서는 data-src 속성이 있는 img 요소를 선택하고 Intersection Observer를 사용하여 화면에 진입하는 시점에 이미지를 로드합니다. 이미지가 로드되면 data-src 속성을 제거하여 다음 번 로드를 방지합니다.

마무리

Lazy Loading은 웹사이트의 성능을 향상시키기 위한 강력한 기술입니다. 페이지의 초기 로딩 속도를 향상시켜 사용자의 경험을 개선하고 네트워크 트래픽을 최적화할 수 있습니다. 위에서 소개한 자바스크립트를 활용한 Lazy Loading 예제를 참고하여, 웹사이트나 웹 애플리케이션에서 Lazy Loading을 구현해보세요.

참고 자료:

#WebPerformance #LazyLoading