Colin's Blog
이미지 대신 썸네일만 로딩하여 성능을 개선하는 Lazy Loading

최신 웹 사이트에서는 사용자 경험을 향상시키기 위해 빠르고 부드러운 페이지 로딩을 중요시합니다. 웹 페이지에서 가장 느린 요소 중 하나는 이미지일 수 있습니다. 따라서 이미지 로딩 시간을 줄이기 위해 이미지 대신 썸네일을 로딩하고 필요한 경우에만 이미지를 로딩하는 “Lazy Loading”을 사용하는 것이 좋습니다.

Lazy Loading 작동 방식

Lazy Loading은 페이지의 초기 로딩 시간 및 대역폭을 줄이기 위해 이미지 로딩을 지연시킵니다. 다음은 Lazy Loading의 작동 방식입니다.

  1. 웹 페이지의 이미지 태그에는 실제 이미지 URL 대신 썸네일 이미지 URL이 포함됩니다. 이때 썸네일 이미지는 낮은 해상도 이미지로서 작은 파일 크기를 가지며 빠르게 로딩됩니다. 
    <img src="thumbnail.jpg" data-src="fullimage.jpg" alt="Image">
  2. 웹 페이지가 로드되면 사용자는 썸네일 이미지를 볼 수 있게 됩니다. 사용자가 스크롤하거나 이미지가 보여야 할 위치로 스크롤되면 실제 이미지가 로딩됩니다. 
    window.addEventListener('scroll', function() {
  var images = document.querySelectorAll('img[data-src]');
  for (var i = 0; i < images.length; i++) {
 if (elementInViewport(images[i])) {
   images[i].setAttribute('src', images[i].getAttribute('data-src'));
   images[i].removeAttribute('data-src');
 }
  }
});
  3. 사용자가 해당 이미지를 보는 동안 이미지는 로딩되어 품질이 좋은 원본 이미지로 교체됩니다.

Lazy Loading의 장점

Lazy Loading을 사용하면 다음과 같은 여러 장점이 있습니다.

Lazy Loading 구현 방법

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

결론

이미지는 웹 페이지의 중요한 컨텐츠입니다. 하지만 이미지로 인해 페이지 로딩 속도가 느려지는 문제가 있습니다. 이를 해결하기 위해 Lazy Loading을 사용하여 이미지 대신 썸네일을 먼저 로딩하고 필요한 시점에서 이미지를 로딩하는 방법을 적용하면 페이지의 성능을 개선할 수 있습니다. 사용자 경험을 향상시키고 웹 사이트의 성능을 향상시키는 데 도움이 되는 Lazy Loading을 적용해 보세요.

References:

© 2018 Colin. All rights reserved.