티스토리에서 레이지 로드(Lazy Load)를 사용하는 방법

 요즘 웹에선 레이지 로드(Lazyload) 기능을 사용하는 게 당연시 됩니다. 커다란 커뮤니티에 들어가보면 이 기능이 없는 곳이 더 드뭅니다.

 모두들 짐작하시겠지만 레이지로드가 로딩 속도를 빠르게 해주고, 사용자의 데이터와 서버측의 데이터를 아껴주는 효과가 있기 때문입니다.

 

 LazyLoad란?

 

 웹에서 가장 큰 비중을 차지하는 데이터는 이미지입니다. 글자를 실컷 타이핑해도 데이터는 얼마 나오지 않지만 고화질 이미지 한 두개면 메가바이트를 초과하는 용량이 됩니다. 

 심지어 경우에 따라선 압축기술이 발전된 동영상보다도 더 많은 용량을 차지하는 게 이미지입니다.[각주*특히 나온지 오래된 JPG,GIF등의 포맷이 쓰이는 것도 용량이 큰 이유입니다.*]

 

 그래서 웹개발자들은 LazyLoad라는 깔끔한 기법을 만들었습니다.

 이 기법을 한 줄로 요약하면 이렇습니다.

 

보이는 곳에 있는 이미지만 로딩하고, 나머지 이미지는 나중에 로딩하자.

 

 아래의 움짤을 보시면 더욱 더 자세히 이해가 되실 겁니다.

 크롬 개발자 툴을 열어 레이지 로딩이 적용된 블로그의 스크롤을 내리는 장면인데, 스크롤을 내리자 개발자탭에 새로 로딩되는 이미지가 주르륵 뜨는 것을 알 수 있습니다.

 

 

 레이지 로드 덕분에 앞서 말한 장점이 생깁니다.

• 초기 로딩시에 로딩해야할 데이터가 줄어들면서 로딩 속도가 향상 됩니다. 이는 사용자 경험이 좋아지는 결과로 이어집니다.
• 방문자가 글을 읽다 중간에 이탈한다면, 읽지 않은 부분의 이미지가 로딩되지 않아서 방문자의 데이터도, 서버측의 트래픽도 보호가 됩니다.

 

 LazyLoad의 적용방법

 

 원리 자체가 간단합니다. 핵심 포인트는 크게 2가지 입니다.

 

 1. 이미지 태그를 [**SRC**]가 가 아닌, [**DATA-SRC**]같이 입력합니다.

 이렇게 마크업하면 이미지가 로딩이 안되는 효과가 있습니다. 

<img src="이미지주소" />//기존태그
<img class="lazyload" data-src="이미지주소" />//레이지 로드 방식. 사용하는 자바스크립트에 따라 class와 data-부분은 자유롭게 쓰면 된다.

 

 2. 자바 스크립트를 통해 화면 내에 이미지 태그가 감지되면 data-src를 src로 변경해줍니다. 그러면 이미지가 로딩이 됩니다.

 

 원리가 간단하지요?

 

 자바스크립트로 이런 작업을 수행하려면 간단한 코드면 됩니다.

 이 때 방법은 크게 2가지가 있습니다.

 Intersection Observer, 혹은 스크롤 감지입니다.

 

 2가지 방법의 장단점은 다음과 같습니다.

 

	Intersection Observer	스크롤 감지
IE 지원	X	O
속도	매우 가벼운 코드	가벼운 코드

 

 Intersection Observer가 더 최근에 나왔고, 덕분에 편의성과 reflow 같은 성능 부분에서 더 우월합니다.

 다만 IE의 비율이 높은 한국 한정으로 호환이 안된다는 단점이 크게 다가옵니다.

 세계적인 추세와 달리 아직도 한국에선 IE 사용자가 약 10%정도인지라 결코 무시할 수 없는 숫자이기 때문입니다.

 거기다 아이폰에서 사용되는 사파리 브라우저 구버전도 Intersection Observer를 지원하지 않는지라 더더욱 그렇습니다.

 

 

 이럴 땐 IE에서도 로딩할 수 있는 폴리필(Pollyfill)[각주*구버전 브라우저를 지원해주는 보조 도구라고 보시면 됩니다.*]을 사용하면 됩니다.

 

 한국도 액티브X를 걷어내려는 노력을 하고 있고, 웨일 브라우저나 크롬같은 모던 브라우저로 옮겨가는 비율이 늘어나고 있으니 개인적으론 intersection observer를 추천합니다.

 

 워낙 쉬운 방법이라 저 같은 초보도 간단하게 코드를 짤 수 있기 때문입니다.

const options = {//얼마나 노출되었을 때 발동할지 옵션설정
   threshold: 0
}	
		var io = new IntersectionObserver(function (entries) {//io라는 이름의 IntersectionObserver를 생성
  entries.forEach(function (entry) {	
      if (entry.isIntersecting) {//만약 이미지를 관찰하고 있다면 
                io.unobserve(entry.target);//이미지 관찰종료
                entry.target.src = entry.target.dataset.src;//해당되는 이미지의 dataset.src를 src로 변경
       } else {
       return !1;
      }

  });
},options);


document.querySelectorAll('.lazyload').forEach(function (el) {//lazyload란 클래스를 가진 태그를 관찰
  io.observe(el);
});

 

 자, 종합해볼까요?

 제가 위에 올린 코드를 <script></script>로 감싸주신 후에 </body>앞에 넣으시면 됩니다. 그리고 앞으로 글을 쓰실 때 img data-src, class는 lazyload로 하시면 됩니다.

 

 다만 제가 올린 코드는 SEO나 돌발상황까지 커버하지도 않을 뿐더러 어디까지나 기본 뼈대만 있습니다. 부가적인 기능도 없어서 심심하고 밋밋하지요.

 

 여기에 만족하지 못하시는 분들은 [**MarshallK**]님이 만드신 코드를 쓰시는 게 좋습니다.

 Intersection Observer를 기반으로 하며, 만약 Intersection Observer를 사용하지 못하면 스크롤 방식으로 작동하게 한 코드입니다.

 자세한 건 여기에서 볼 수 있습니다.

 

 Lazyload 플러그인

 

 여기서 끝나지 않고, 많은 사람들이 쓰는 스테디셀러 완제품을 써야겠다! 하시는 분이라면 역시 플러그인이 최고입니다.

 Github에는 오늘도 많은 파일들이 올라오고 있습니다.

 개인적으로는 3가지 플러그인을 추천합니다. jquery는 배제한 순수 javascript 플러그인입니다.[각주*개인적으로 속도향상을 위해 쓰는건데 제이쿼리를 쓴다는 건 모순처럼 느껴졌습니다.*] 

 

 

 1. lazysizes

 

[기본*압축전 용량:18.4kb / 클래스이름:lazyload / src이름:data-src*]

 

 제가 쓰는 플러그인입니다. 블러 기능, 이미지 뿐 아니라 비디오,IFRAME 지연로드, SEO 친화적인 요소가 있습니다.

 특히 비동기적 (async)으로 사용해도 무난하게 작동해서 마음에 듭니다.

 다만 스크롤 기반입니다. 디바운스,쓰로틀 RAF등의 최적화가 되어 있지만 그래도 intersection observer 기반의 플러그인의 성능을 따라가진 못한다고 생각합니다.

 

 다운로드는 여기에 가신 후에 lazysizes.js를 다운받으시면 됩니다. 그리고 파일업로드를 하신 후 </body> 앞에 <script src="주소"></script>를 입력하시면 됩니다.

 

 2. lozad

 

[기본*압축전 용량:7.04kb / 클래스이름:lozad / src이름:data-src*]

 

 속도면에서 최고인 플러그인입니다. 단점이라면 intersection observer를 기반으로 했기 때문에 IE+구버전 사파리도 지원하려면 폴리필을 써야한다는 겁니다.

 

 BBC,도미노피자,테슬라 등의 기업이 이 플러그인을 사용하고 있습니다. 이름만 들어도 알만한 웹페이지인 레딧도 사용 중이죠.

 

 다운로드는 여기에 가신 후에 dist 폴더에 있는 lozad.js를 다운 받으시면 됩니다.

 그리고 IE나 사파리 구버전도 지원하시려면 폴리필도 받으셔야 합니다. 폴리필의 경우 여기에 가신 후 다운 받으시면 됩니다.

 

 그리고 파일 업로드 후 등록만 하면 되는 lazysizes와 달리, 약간의 마크업을 해주셔야 합니다. 예시를 들면 이렇습니다.

 

<script src="./images/lozad.js></script> // lozad를 업로드
<script>//lozad를 발동
const observer = lozad('.lozad', {
    rootMargin: '10px 0px', 
    threshold: 0.1 
    enableAutoReload: true 
});
observer.observe();
</script>

 

 3. b-lazy

 

[기본*압축전 용량: 14.1kb / 클래스이름: b-lazy / src이름: data-src*]

 

 제가 첫 입문을 했을 때 쓰던 플러그인입니다. 스크롤 기반이며 가볍고 빠른 스피드가 장점입니다.

 다운로드는 여기에 가셔서 blazy.js를 다운받으시면 됩니다.

 

 이 플러그인도 발동하려면 약간의 마크업이 필요합니다.

 예시를 들면 이렇습니다.

 

 <script src="./images/blazy.js"></script>//b-lazy를 등록
    <script>//b-lazy를 발동
        ;(function() {
            // Initialize
            var bLazy = new Blazy();
        })();
    </script>

 

 업로드 하고 이런 과정이 번거로우시다면 그냥 CDN을 쓰시면 됩니다. 

 제가 적은 코드를 붙여넣기 하시면 됩니다.

 3개 중 쓰시고 싶은 것을 골라 쓰시면 되죠.

<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script> // lazysizes
<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script> // lozad
<script src="https://cdn.jsdelivr.net/npm/blazy@1.8.2/blazy.min.js"></script> // blazy

 

 티스토리에서 적용방법

 

 제가 위에서 말한 방법의 맹점이 있습니다. 바로 티스토리의 문제입니다.

 이미지를 본문에 업로드 하신 후에 HTML 모드로 들어가시면 <img src 형태가 아니라 해괴한 문자로 이뤄져있습니다. 이걸 직접 img data-src 형태로 바꿔서 고쳐야하는데 매우 귀찮고 번거롭고 시간도 오래 걸립니다.

 

 사진 1-2개도 이렇게 고치면 귀찮은데 만약 사진이 50개,60개 이렇다면 어떨까요?

 이것 때문에 티스토리에서 lazyload를 쓰는 분이 거의 없습니다.

 서버레벨에서 직접 조작이 불가능한 티스토리의 단점이 여기서 생긴 것이지요.

 

 때문에 제가 한 가지 도구를 만들었습니다.

 자세한 건 여기에 가셔서 보시면 됩니다.