'티스토리 북클럽 스킨' 이미지 지연 로드 설정 방법.
이번에는 티스트로 북클럽 사용자를 위한 꿀팁입니다. 바로 레이지 로딩 (이미지 지연로드) 설정 방법에 대해 자세히 알아보는 시간 가지도록 하겠습니다.
이미지 지연 로드 (Lazy Load)를 설정하는 이유.
- 사이트 속도 개선: 레이지 로딩을 사용하면 페이지가 스크롤되며 이미지를 로딩하기 때문에 사이트 속도가 빨라집니다. 기존에는 페이지 로딩 시 모든 이미지를 한꺼번에 불러와야 하므로 시간이 많이 걸렸지만, 레이지 로딩을 설정하면 실제로 필요한 이미지만 로드되기 때문에 속도가 향상됩니다.
- 구글 SEO 개선: 사이트 속도가 빨라지면 구글 SEO에서도 좋은 평가를 받아 검색 결과 상단에 노출될 가능성이 높아집니다. 많은 분들이 이 방법을 모르거나 설정이 어려워서 적용하지 못하는 경우가 많지만, 사실은 그렇게 어렵지 않으니 한번 시도해 보시기 바랍니다.
이러한 두 가지 장점 덕분에 사이트 운영자들이 레이지 로딩을 적극적으로 도입하는 것이 추천됩니다
투명 이미지 업로드
티스토리에서 위 이미지를 추가하여 이미지에 오류가 발생하지 않도록 하겠습니다.
굳이 이미지를 로딩할 필요가 없으므로, 이미지의 src에 1px * 1px 크기의 이미지를 넣어 이미지에 오류가 발생하지 않도록 합니다.
1px * 1px 이미지 다운로드
1px * 1px에 아무런 색상 정보도 들어있지 않은 이미지입니다.
95바이트밖에 되지 않으니, 로딩 속도에 큰 영향을 끼치지 않습니다.
주의 : 파일명은 바꾸지 않습니다.
1) 위 파일을 내려받아,
'관리자 홈'에서 [꾸미기] > [스킨 편집] > [html 편집] > [파일업로드]로 들어가 이미지를 업로드합니다
HTML 스크립터 적용
1) '관리자 홈'에서 [꾸미기] > [스킨 편집] > [html 편집] > [HTML 탭]으로 들어갑니다.
2) HTML에서 </head> 바로 위에 스크립터를 붙여 넣고 [적용]을 눌러 '저장'합니다.
</head>
3) 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="./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>
<!-- 이미지 지연로드 끝 -->
이제 다시 본인의 블로그로 돌아가셔서, 아무 글이나 클릭하신 후, 'Ctrl + Shift + R'을 누르시거나 캐쉬를 초기화하신 후 페이지를 불러와 보시면 정상적으로 이미지의 로딩이 지연되고 있는 걸 확인하실 수 있을 겁니다.
출처 : 마쉘님 사이트에 가시면 레이지 로딩 (이미지 지연로드) 설정하는 방법을 잘 설명을 해 놓으셨습니다.
코드만 사용하는 이미지 지연 로드 (Lazy Load)
이미지 업로드와 같은 번거로운 방법 없이 HTML 코드만 사용하여 이미지 지연 로드를 적용하는 방법에 대해 알아보겠습니다.
이미지 지연 로딩(Lazy Loading)은 웹 페이지의 성능을 향상시키기 위해 사용되는 기술입니다. 이 기술은 이미지가 실제로 사용자 화면에 나타날 때까지 로딩을 지연시킵니다. 이를 통해 초기 페이지 로드 시간을 줄이고, 대역폭을 절약할 수 있습니다.
1) '관리자 홈'에서 [꾸미기] > [스킨 편집] > [html 편집] > [HTML 탭]으로 들어갑니다.
2) 아래 코드를 복사해 </body> 위에 넣어줍니다.
<!-- 이미지 지연로드 -->
<script>document.addEventListener("DOMContentLoaded",()=>{const observer=new IntersectionObserver((entries)=>{entries.forEach(entry=>{if(entry.isIntersecting){const img=entry.target;img.src=img.dataset.src;if(img.dataset.srcset){img.srcset=img.dataset.srcset;}
img.classList.add("loaded");observer.unobserve(img);}});},{rootMargin:'200px'});document.querySelectorAll("img[data-src]").forEach(img=>{observer.observe(img);});});</script>
<!-- 이미지 지연로드 END -->
3) 마지막으로 [적용]을 눌러 '저장'을 합니다.
이제 다시 본인의 블로그로 돌아가셔서, 아무 글이나 클릭하신 후, 'Ctrl + Shift + R'을 누르시거나 캐쉬를 초기화하신 후 페이지를 불러와 보시면 정상적으로 이미지의 로딩이 지연되고 있는 걸 확인하실 수 있을 겁니다.
마무리
이번에는 이미지 레이지 로딩 (이미지 지연로드)를 알아봤습니다.
설명이 복잡해 많이 복잡해 보이지만 막상 따라 해 보면 그렇게 어렵지 않습니다. 이미지를 많이 사용하는 블로그라면 한 번쯤 적용해 볼만한 스크립터입니다.
"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받습니다"
