티스토리 북클럽 스킨 I 이미지 지연 로드 설정 방법

 

티스토리 북클럽 스킨 I 이미지 지연 로드 설정 방법

이번에는 티스트로 북클럽 사용자를 위한 꿀팁입니다. 바로 레이지 로딩 (이미지 지연로드) 설정 방법에 대해 자세히 알아보는 시간 가지도록 하겠습니다.

이미지 레이지 로딩 (이미지 지연로드)를 설정하는 이유.

1. 사이트 속도 개선: 레이지 로딩을 사용하면 페이지가 스크롤되며 이미지를 로딩하기 때문에 사이트 속도가 빨라집니다. 기존에는 페이지 로딩 시 모든 이미지를 한꺼번에 불러와야 하므로 시간이 많이 걸렸지만, 레이지 로딩을 설정하면 실제로 필요한 이미지만 로드되기 때문에 속도가 향상됩니다.
   
   
2. 구글 SEO 개선: 사이트 속도가 빨라지면 구글 SEO에서도 좋은 평가를 받아 검색 결과 상단에 노출될 가능성이 높아집니다. 많은 분들이 이 방법을 모르거나 설정이 어려워서 적용하지 못하는 경우가 많지만, 사실은 그렇게 어렵지 않으니 한번 시도해 보시기 바랍니다.
   
   이러한 두 가지 장점 덕분에 사이트 운영자들이 레이지 로딩을 적극적으로 도입하는 것이 추천됩니다

728x90

 

투명 이미지 업로드

이미지에 오류가 발생하지 않도록 티스토리에서 위 이미지를 집어넣습니다.

굳이 로딩하지 않아도 될 이미지를 로딩할 필요가 없으니, 이미지의 src에 1px * 1px짜리 이미지를 하나 넣어줘서 이미지에 아무런 오류가 발생하지 않도록 합니다.

 

1px * 1px 이미지 다운로드

blank.png

0.00MB

1px * 1px에 아무런 색상 정보도 들어있지 않은 이미지입니다.

95바이트밖에 되지 않으니, 로딩 속도에 큰 영향을 끼치지 않습니다.

 

1. 위 파일을 내려받아, 

'관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > 파일업로드'로 들어가 이미지를 업로드합니다

2. 이미지 업로드가 끝나셨으면, 해당 이미지를 우클릭해서 이미지의 경로를 복사해 주세요.

복사한 주소를 'https://tistory2.daumcdn.net/tistory/210135/skin/images/blank.png'로 다 넣어 주셔도 크게 상관은 없지만 './images/blank.png' 이렇게 앞의 주소를 지우시고 점 하나를 찍어 주시게 더 좋습니다.

 

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,.imagegridblock img").forEach(t=>{s(t),e.observe(t),t.classList.add("observing")})}else{const r=()=>{const{scrollY:e}=window;document.querySelectorAll(".imageblock img,.imagegridblock 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,.imagegridblock img").forEach(o=>{s(o),r(),window.addEventListener("scroll",()=>{e||(window.requestAnimationFrame(()=>{t(),e=!1}),e=!0)},{passive:!0})})}});
</script>

<!-- 이미지 지연로드 -->
<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="./images/blank.png"};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,.imagegridblock img").forEach(t=>{s(t),e.observe(t),t.classList.add("observing")})}else{const r=()=>{const{scrollY:e}=window;document.querySelectorAll(".imageblock img,.imagegridblock 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,.imagegridblock img").forEach(o=>{s(o),r(),window.addEventListener("scroll",()=>{e||(window.requestAnimationFrame(()=>{t(),e=!1}),e=!0)},{passive:!0})})}});
</script>
<!-- 이미지 지연로드 끝 -->

HTML 스크립터 다운로드

이미지지연로드.txt

0.00MB

 

1. 다운로드한 메모장에서 '복사한_이미지_경로'를 찾아 복사해 둔 './images/blank.png'를 붙여 넣습니다.

2. '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > HTML'로 들어갑니다.

---

3. HTML에서 </head> 바로 위에 스크립터를 붙여 넣고 '저장'하면 끝입니다.

</head>

 

이제 다시 본인의 블로그로 돌아가셔서, 아무 글이나 클릭하신 후, 'Ctrl + Shift + R'을 누르시거나 캐쉬를 초기화하신 후 페이지를 불러와 보시면 정상적으로 이미지의 로딩이 지연되고 있는 걸 확인하실 수 있을 겁니다.

728x90

 

출처 : 마쉘님 사이트에 가시면 레이지 로딩 (이미지 지연로드) 설정하는 방법을 잘 설명을 해 놓으셨습니다.

티스토리에서 Lazy Load 사용하기 (marshallku.com)

티스토리에서 Lazy Load 사용하기

마무리

이번에는 이미지 레이지 로딩 (이미지 지연로드)를 알아봤습니다.

설명이 복잡해 많이 복잡해 보이지만 막상 따라 해 보면 그렇게 어렵지 않습니다. 이미지를 많이 사용하는 블로그라면 한 번쯤 적용해 볼만한 스크립터입니다. 

"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다"