[javascript] 자바스크립트 지연 로딩을 사용하여 웹페이지의 미디어 파일 로딩을 어떻게 최적화할 수 있나요?

18 Dec 2023

javascript

웹페이지의 미디어 파일(이미지, 비디오, 사운드 등)는 페이지 로딩 시간을 늘리고 사용자 경험에 영향을 미칠 수 있습니다. 자바스크립트를 사용하여 미디어 파일을 지연 로딩하면 초기 페이지 로딩 시간을 단축하고, 사용자가 스크롤하거나 특정 이벤트를 발생시켰을 때 비로소 해당 미디어 파일을 로딩할 수 있습니다. 이를 통해 페이지의 성능을 향상시키고 사용자 경험을 개선할 수 있습니다.

1. Intersection Observer 활용

Intersection Observer는 뷰포트와 대상 요소 간의 교차 영역에 대한 정보를 비동기적으로 제공하는 API입니다. 이를 활용하여 스크롤 동작을 감지하고, 미디어 파일이 뷰포트에 진입할 때 동적으로 로딩할 수 있습니다.

// Intersection Observer 생성
let observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 미디어 파일 로딩
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});

// 관찰할 대상 지정
let targets = document.querySelectorAll('.lazy-load');
targets.forEach(target => {
  observer.observe(target);
});

2. Lazy Loading 속성 활용

이미지나 iframe과 같은 요소에는 HTML의 loading 속성을 활용하여 지연 로딩을 구현할 수 있습니다.

<!-- 이미지의 경우 -->
<img loading="lazy" src="placeholder.jpg" data-src="image.jpg" alt="이미지">

<!-- iframe의 경우 -->
<iframe loading="lazy" src="video.html"></iframe>

3. 라이브러리 활용

Lazy Load를 구현하기 위해 다양한 라이브러리들을 활용할 수도 있습니다. 대표적으로 lazysizes, IntersectionObserverPolyfill 등의 라이브러리를 사용하여 미디어 파일의 지연 로딩을 간편하게 구현할 수 있습니다.

미디어 파일을 지연 로딩하여 웹페이지의 초기 로딩 성능을 향상시키고, 사용자 경험을 개선할 수 있습니다. 기존의 기술적인 최적화를 보완하고, 웹페이지의 성능을 더욱 향상시키기 위해 자바스크립트 지연 로딩 기술을 적극적으로 활용해보시기를 권장드립니다.