[javascript] 자바스크립트 지연 로딩을 사용하여 웹페이지의 로딩 시간을 어떻게 줄일 수 있나요?

18 Dec 2023

javascript

웹페이지의 로딩 시간을 줄이는데 도움이 되는 방법 중 하나는 자바스크립트 파일을 지연 로딩하여 필요할 때만 로드하도록 하는 것입니다. 이를 통해 초기 페이지 로딩 속도를 향상시키고, 필요한 자원만을 요청하여 대역폭을 절약할 수 있습니다. 자바스크립트 지연 로딩을 구현하는 방법에 대해 알아보겠습니다.

1. 비동기 방식으로 자바스크립트 로드하기

<script>
  // 페이지 로딩 후 실행되는 비동기 함수
  window.addEventListener('load', function() {
    var script = document.createElement('script');
    script.src = 'your-script.js';
    document.body.appendChild(script);
  });
</script>

위 코드에서는 window.addEventListener를 사용하여 페이지가 완전히 로딩된 후에 your-script.js 파일을 동적으로 로드합니다. 이를 통해 초기 로딩 시간을 단축시킬 수 있습니다.

2. Lazy Loading 사용하기

<img src="placeholder.jpg" data-src="image-to-load.jpg" loading="lazy" />

loading="lazy" 속성을 사용하여 이미지를 지연 로딩할 수 있습니다. 브라우저는 페이지 로딩 후 필요한 이미지만 로드하므로 초기 페이지 로딩 속도를 향상시킬 수 있습니다.

3. Intersection Observer를 활용한 Lazy Loading

// Intersection Observer 객체 생성
var observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(function(entry) {
    if (entry.isIntersecting) {
      var img = entry.target;
      var src = img.getAttribute('data-src');
      img.setAttribute('src', src);
      observer.unobserve(img);
    }
  });
});

// Lazy 로딩할 이미지 요소에 Observer 등록
var lazyImages = document.querySelectorAll('.lazy');
lazyImages.forEach(function(img) {
  observer.observe(img);
});

Intersection Observer를 사용하여 뷰포트에 진입하는 순간에 이미지를 로드하는 방법입니다. 이를 통해 사용자 경험을 향상시키면서 필요한 이미지만을 로드합니다.

이러한 방법을 사용하여 자바스크립트의 지연 로딩을 통해 웹페이지의 로딩 시간을 효과적으로 줄일 수 있습니다.

1. 비동기 방식으로 자바스크립트 로드하기

2. Lazy Loading 사용하기

3. Intersection Observer를 활용한 Lazy Loading

참고 자료