티스토리 오프스크린 이미지 지연 lazy load 적용하기

구글 Pagespeed Insights(바로가기)를 통해서 제 티스토리 속도를 조회해보니.. 점수가 생각보다 처참했어요.. 티스토리에 업로드하는 사진의 용량도 용량이지만 양이 많아서 그런지 페이지 로딩 시간이 조금 길어진 모양이에요.

그래서 여러 페이지를 조회해봤는데, 사진이 많은 포스팅은 오프스크린 이미지 지연하기라는 항목이 계속해서 나오더라구요? Pagespeed Insights 사이트에서 설명하는 다른 문제들은 대충 이해가 갔지만 오프스크린 이미지 지연 문제만큼은 도저히 해결하는 방법을 알 수가 없어서 구글링을 해보았습니다.

그랬던중 marshall-ku님의 티스토리에 lazy load라는 방식을 알게 되었는데요. 설명을 친절하게 해주셔서 어찌어찌 적용하는데에는 성공했지만.. 저같이 코딩에 까막눈인 사람들은 한 번에 바로 이해하고 따라 하기가 조금 어렵더라구요...😭 그래서 초보자분들을 위하여! 제가 적용했던 방법을 그대로 설명해드리려고 해요.

lazy load란?

방문자들이 포털사이트를 통해 글을 클릭해서 들어오면 보통은 텍스트와 사진이 한 번에 불러와지는데요. lazy load를 적용하면 사진이 불러와지지 않고, 휠을 내릴 때마다 화면에 보여지는 부분의 사진들을 순차적으로 불러오기 때문에 방문자는 데이터를, 티스토리 운영자는 서버 비용을 효율적으로 관리할 수 있다고 해요. 이 부분에 대해 자세하게 알고 싶으신 분들은 helloinyong님의 포스팅을 참고해보시길 바래요.

티스토리에 lazy load 적용하기

blank.png

0.00MB

1) 본문에 첨부된 투명 이미지 파일인 blank.png을 다운받아주세요. 사진이 로딩 대기 중일 때 1px x 1px의 투명 이미지로 보여질 수 있기 위함이라고 해요.

2) 다운받은 파일을 티스토리-스킨 편집-HTML 편집-파일업로드에 업로드해주고, 업로드한 파일에서 마우스 우클릭을 하여 링크 주소 복사를 눌러줍니다.

<script>document.addEventListener("DOMContentLoaded",()=>{let e=!1;const t=e=>{e.classList.contains("loaded")||(e.src=e.dataset.src,e.removeAttribute("data-src"),e.dataset.srcset&&(e.srcset=e.dataset.srcset,e.removeAttribute("data-srcset")),e.classList.add("loaded"))},s=e=>{e.dataset.src=e.src,e.dataset.src&&(e.dataset.srcset=e.srcset,e.removeAttribute("srcset")),e.src="★"};if("IntersectionObserver"in window){const e=new IntersectionObserver((e,s)=>{e.forEach(e=>{if(!e.isIntersecting)return;const r=e.target;t(r),s.unobserve(r)})},{root:null,rootMargin:"200px"});document.querySelectorAll(".imageblock img").forEach(t=>{s(t),e.observe(t),t.classList.add("observing")})}else{const r=()=>{const{scrollY:e}=window;document.querySelectorAll(".imageblock img").forEach(s=>{if(s.classList.contains("loaded"))return;const r=s.parentNode.offsetTop;r+s.offsetHeight>e&&e+window.innerHeight>r&&t(s)})};document.querySelectorAll(".imageblock img").forEach(o=>{s(o),r(),window.addEventListener("scroll",()=>{e||(window.requestAnimationFrame(()=>{t(),e=!1}),e=!0)},{passive:!0})})}});</script>

스크립트.txt

0.00MB

3) 위의 코드가 삽입된 스크립트.txt 파일을 다운로드 받은 후 본문 내용에 있는 ★을 지우시고 그 자리에 복사한 black.png 파일 주소를 넣어주세요.

4) 수정한 메모장 파일 내용 전체를 복사하고, 스킨 편집 HTML 영역에서 </head> 코드 바로 위에다가 복사한 코드를 넣어주세요.

적용 확인하기

lazy load가 제대로 적용되었는지 확인해볼게요. 이미지가 많은 포스팅에 들어가서 F12키를 누른 후 상단의 Network로 들어가 주세요. 그리고 CTRL+SHIFT+R키를 눌러서 페이지 캐시 초기화를 해주세요.

적용 전

이제 사진이 많은 사진이 많이 업로드된 포스팅에서 스크롤을 한번 쭉 내려보세요. 적용 전에는 이미 사진과 내용이 불러와진 상태라서 변화가 없지만..

적용 후

적용 후에는 스크롤을 내릴 때마다 사진을 하나하나씩 불러오는 것을 확인할 수 있습니다.

마지막으로 사이트 속도를 확인할 수 있는 Pagespeed Insights로 체크해보면 오프스크린 이미지 지연하기 부분이 기존보다 줄어든 것을 확인할 수 있습니다.(페이지마다 차이가 있을 수 있으니 무조건 맹신하지는 마시길..😋)