많은 사용자들이 느린 인터넷 연결이나 제한된 데이터 계획으로 인해 웹 페이지의 로딩 속도에 대한 문제를 겪고 있습니다. 웹 페이지에서 이미지, 동영상, 스크립트와 같은 리소스들은 네트워크 대역폭을 차지하므로 이를 최적화하는 것이 중요합니다. 이를 위해 Lazy Loading 기법을 사용할 수 있습니다.

Lazy Loading은 사용자가 스크롤링하거나 특정 액션을 수행할 때에만 리소스를 로딩하는 기법을 말합니다. 기본적으로 모든 리소스를 한 번에 로딩하는 것이 아닌, 필요한 리소스만을 요청하고 로딩함으로써 네트워크 대역폭을 크게 절약할 수 있습니다.

Lazy Loading의 원리

Lazy Loading은 일반적으로 이미지 로딩에 많이 사용됩니다. 웹 페이지에 있는 모든 이미지를 한 번에 로딩하지 않고, 사용자가 해당 이미지를 볼 수 있는 시점에서만 해당 이미지를 로딩합니다. 이를 실현하기 위해 몇 가지 기술적인 접근법들이 사용됩니다.

1. Intersection Observer API

Intersection Observer API를 사용하면 특정 요소가 사용자의 뷰포트 내에 들어왔는지 여부를 쉽게 감시할 수 있습니다. 이를 활용하여 이미지 요소가 사용자의 뷰포트에 진입하면 해당 이미지를 로딩하는 방식으로 Lazy Loading을 구현할 수 있습니다.

const images = document.querySelectorAll('img');

const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const image = entry.target;
      image.src = image.dataset.src;
      observer.unobserve(image);
    }
  });
});

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

위의 예시에서는 img 요소들을 IntersectionObserver를 이용하여 감시하고 있습니다. 요소가 사용자의 뷰포트와 교차되었을 때(entry.isIntersecting), 해당 이미지의 src 속성을 실제 이미지 URL(image.dataset.src)로 설정하고, 감시를 중단합니다(observer.unobserve(image)).

2. Lazy Loading 라이브러리

Intersection Observer API를 직접 사용하기보다는 Lazy Loading을 구현한 라이브러리를 사용하는 것이 편리할 수 있습니다. 이러한 라이브러리들은 이미지 뿐만 아니라 다른 리소스들에 대해서도 Lazy Loading을 지원하며, 손쉽게 적용할 수 있도록 도와줍니다.

• Lazysizes
• Lozad.js

결론

Lazy Loading은 웹 페이지의 네트워크 대역폭을 최적화하는 방법 중 하나입니다. 사용자가 실제로 필요한 리소스들만을 로딩함으로써 웹 페이지의 로딩 속도를 향상시킬 수 있습니다. Intersection Observer API를 직접 사용하거나 Lazy Loading 라이브러리를 활용하여 간편하게 적용할 수 있습니다.

#WebDev #LazyLoading