Lazy Loading을 활용한 웹사이트의 사용성 개선

10 Nov 2023

javascript

일반적으로 웹사이트를 방문할 때, 모든 이미지와 콘텐츠가 한 번에 로드되는 것은 많은 데이터 용량과 시간이 소요됩니다. 이로 인해 페이지 로딩이 느려지고 사용자 경험이 저하될 수 있습니다. 이러한 문제를 해결하기 위해 “Lazy Loading”이라는 기술이 개발되었습니다.

Lazy Loading은 페이지를 불러올 때 필요한 이미지나 콘텐츠를 지연하여 로드하는 방식입니다. 이는 사용자가 스크롤을 내리거나 해당 이미지나 콘텐츠가 필요한 시점에서만 로드되도록 제어합니다. 이는 로딩 시간을 단축시키고 웹사이트의 사용성을 개선하는 데 도움이 됩니다.

Lazy Loading을 적용하기 위해서는 다음과 같은 방법을 사용할 수 있습니다.

1. JavaScript로 구현하기

JavaScript를 사용하여 페이지 스크롤 이벤트를 감지하고, 현재 뷰포트 안에 있는 이미지나 콘텐츠를 동적으로 로드하는 방식입니다. 이를 위해 Intersection Observer API를 사용할 수 있습니다.

const lazyLoad = target => {
  const io = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        const src = img.getAttribute('data-lazy');

        img.setAttribute('src', src);
        observer.disconnect();
      }
    });
  });

  io.observe(target);
};

const images = document.querySelectorAll('.lazy');
images.forEach(image => {
  lazyLoad(image);
});

2. 라이브러리 사용하기

Lazy Loading을 구현하는 라이브러리를 사용하는 것도 한 가지 방법입니다. 많은 라이브러리가 Lazy Loading을 지원하며, 간단한 설정만으로 쉽게 적용할 수 있습니다. 대표적인 라이브러리로는 lazysizes, lozad.js 등이 있습니다.

두 가지 방법 모두 Lazy Loading을 적용하는데 효과적이며, 웹사이트의 사용성을 개선하는 데 도움이 됩니다. 이미지나 콘텐츠의 로딩 시간을 최적화하여 사용자가 웹사이트를 더 빠르게 이용할 수 있도록 도와줍니다.

Lazy Loading은 모바일 환경에서 더욱 중요해지고 있으며, 모바일 데이터 소비를 줄이고 사용자 경험을 향상시키는 데 큰 역할을 합니다. 웹사이트의 성능 개선을 위해 Lazy Loading을 적용해보세요!

References:

#lazyloading #웹사이트 #성능개선