티스토리에서 LazyLoading 구현하는 방법

티스토리와 같은 블로그 플랫폼에서는 이미지를 많이 사용하는 경우가 빈번하기 때문에 레이지 로딩(LazyLoading)을 필수적으로 구현해두는 것이 좋다.

 

이번 글에서란 레이지 로딩이란 무엇이며 이를 사용하는 이유와 더불어 이를 구현하는 코드를 정리해보려고 한다.

레이지 로딩이란?

레이지 로딩이란 사용하지 않는 리소스(예: 이미지)를 식별하여 필요할 때만 로드하는 방식이다. 그렇다면 레이지 로딩을 사용하는 이유는 무엇일까?

 

예를 들어, 블로그 이미지 하단에 있는 이미지는 굳이 처음부터 로딩할 필요가 없다. 레이지 로딩을 사용하는 이유는 누군가는 블로그 하단까지 글을 읽지 않을 수도 있으며, 또 당장 필요한 리소스가 아니기 때문이다.

 

이러한 문제점을 해결하기 위해 레이지 로딩은 중요한 리소스만을 먼저 불러온 다음, 스크롤 및 탐색과 같은 사용자의 요청에 따라 리소스를 불러오는 방식을 사용한다.

레이지 로딩 구현 방법 및 코드

레이지 로딩을 구현하는 방법은 다양할 수 있다. 아래는 이미지의 속성을 파악한다음, src 속성을 data-src로 바꾸어 레이지 로딩을 적용하는 자바스크립트 코드다. 로딩 이미지는 내가 만든 것인데 원하는 경우 다른 것으로도 변경해서 사용할 수 있다.

document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('img').forEach(function (img) {
  // Check if 'data-src' or 'data-srcset' is not already set
  if (!img.getAttribute('data-src') && img.getAttribute('src')) {
    img.setAttribute('data-src', img.getAttribute('src'));
    img.setAttribute('src', 'https://blog.kakaocdn.net/dn/oZRWc/btszCgVFKqQ/ZnzLYkmxQaebat1oZKSpKK/img.webp');
  }
  if (!img.getAttribute('data-srcset') && img.getAttribute('srcset')) {
    img.setAttribute('data-srcset', img.getAttribute('srcset'));
    img.removeAttribute('srcset'); // Remove the original srcset as it's not needed for lazyloading
  }

  img.classList.add('lazyload');
});
});

다음으로 아래의 스크립트 코드를 HTML에 삽입해주면 된다. 이렇게 하면 티스토리 내의 모든 이미지가 해당 이미지로 변경되어 있다가 사용자의 화면에 표시되는 경우 표시되는 레이지 로딩이 구현이 완료된다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" async></script>