티스토리 이미지 지연로드 설정방법
티스토리 블로그 이미지 지연로드 설정하는 방법에 대해서 알아보겠습니다. 이미지 지연로드는 블로그 로딩속도를 높여주는데 유리하기 때문에 SEO에 유리한 설정방법 중 하나입니다.
티스토리 이미지 지연로드 설정방법
1. 이미지 지연로드란?
이미지 지연로드는 image lazy load라고 불리는 기술입니다. 웹 페이지를 읽어올 때 이미지 지연로딩이 설정되어 있지 않는 웹페이지는 페이지에 삽입되어 있는 이미지를 처음 페이지 로딩 시 전부 불러오기를 합니다.
이미지 지연로딩을 설정해 둔 웹페이지 같은 경우는 본문의 글을 읽어 올 때 전부 이미지를 읽어오지 않고 있다가 스크롤을 내리면서 이미지가 보여야 하는 위치에 오면 이미지를 읽어옵니다.
우리나라의 경우는 인터넷 환경이 어디서나 좋기 때문에 이미지 지연로딩을 설정하나 설정하지 않은 상태나 사실상 크게 차이를 못 느끼지만 인터넷 환경이 느린 외국에서는 웹페이지 접속 시 속도차이가 많이 납니다.
웹페이지 로딩 속도는 구글 SEO에 유리하기 때문에 지연로딩을 적용한 것과 적용하지 않은 것은 SEO에서도 차이가 있습니다. 실제로 이미지의 용량도 줄여서 웹페이지 속도를 올리는 것도 SEO에 도움이 되기 때문에 이해하기 편하실 겁니다.
티스토리 이미지 지연로드 설정방법
2. 이미지 지연로드 설정하는 법
티스토리에서는 웨드프레스처럼 서버에서 설정하지 않기 때문에 완벽하게 작동하기는 힘들지만 간단하게 HTML코드 삽입으로 설정이 가능합니다.
가장 먼저 이미지를 로드하기 위해서 이미지를 집어 넣습니다.
이미지의 용량이 클필요도 없고 굳이 로딩할 필요가 없기 때문에 투명이지미 1px * 1px 이미지면 됩니다.
위 파일을 다운로드해서 사용하시면 됩니다. 이미지 용량도 적기 때문에 로딩 속도에 영향을 주지는 않습니다.
위 경로로 가서 이미지 파일을 업로드하고 업로드된 이미지를 마우스 우클릭 후 이미지 주소를 복사해 둡니다.
https://tistory3.daumcdn.net/tistory/6694433/skin/images/blank.png 링크 주소인데 ./images/blank.png 만 사용해도 됩니다. 링크주소 이미지 슬러시 앞에 점을 하나 찍어서 코드에 붙여 넣으면 됩니다.
스크립트는 다음과 같습니다.
<!-- 이미지 지연로드 -->
<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>
<!-- 이미지 지연로드 끝 -->
위 스크립트에서 e src 영역에 복사한 이미지 주소를 넣고 HTML <head>와 </head> 사이에 붙여 넣고 적용하기 누르시면 완료됩니다.
편집이 완료되었으면 블로그의 아무 글에 접속해서 Ctrl + Shift + R을 누르거나 캐시삭제를 한 후 새로고침을 하면 이미지 지연로드가 되고 있는 것을 확인할 수 있습니다.
'티스토리 > 티스토리 관리 팁' 카테고리의 다른 글
| 티스토리 코드블럭 꾸미기 (열림, 닫힘, 줄바꿈, 스크롤) (0) | 2023.12.21 |
|---|---|
| 티스토리 코드블럭 복사버튼 만들기 (0) | 2023.12.16 |
| 티스토리 상단 스크롤 : 프로그래스 바 만들기 (0) | 2023.12.11 |
| 티스토리 개인정보 처리방침 URL 설정 방법 (애드센스 GDPR) (0) | 2023.12.03 |
| 티스토리 카카오 애드핏 승인신청방법 (1) | 2023.11.30 |
