오늘의 명언
“ 당신은 소프트웨어 품질을 추구할 수도 있고, 포인터 연산을 할 수도 있다. 그러나 두 개를 동시에 할 수는 없다. ”
-
베르트랑 마이어 (Bertrand Meyer)
300x250
블로그 운영하면서 매일 구글 서치와 애드센스 확인하면서
오늘도 문제없나 확인하는 게 일상이 되었네요.
최근인가? 요즘 구글 서치콘솔에서 코어웹 바이탈이 나쁨이 나와서 확인해 보니까
여러 문제가 있는데 그중에서 이미지 로딩에 관해서도 나오더라고요
그래서 검색해 보니 레이지 로딩 설정해서 개선한다고 하더라고요
많이 어렵지는 않아서, 적용했던 거 한번 소개해보려고 해요!
이미지 지연 로드 (레이지 로딩)
Lazy Loading은 페이지 렌더링 시점에 중요하지 않는 리소스 로딩을 추후에 필요할 때 로드가 되는 것을 말합니다.
이미지 지연 로드 (레이지 로딩) 설정 방법
- 아무런 색상 정보도 없는 이미지 파일을 다운로드 합니다.
- 스킨 편집 - HTML 편집 - 파일 업로드에서 blank.png 를 업로드 합니다.
- 마우스 오른쪽 클릭하여 링크를 복사합니다.
- 스킨 편집 - HTML 편집 - HTML로 와서 아래 코드를 작성합니다.
<head></head> 사이에 작성 해야합니다. 아래 코드에서 복사한_이미지_경로 라는데서 위에 링크 주소 복사한 것을 붙여 넣습니다.
<!-- 이미지 지연 시작 -->
<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>
<!-- 이미지 지연 끝 -->이미지 레이지 로딩을 적용하고 확인하는 방법은 본인 블로그 게시글로 들어가서 devtools로 들어갑니다. (맥북은 command + Shift + C 윈도우는 Ctrl + Shift + I ) 네트워크 탭에서 이미지를 선택한후 게시글 스크롤을 아래로 천천히 내리다 보면 이미지가 하나씩 로딩되는것을 볼수 있습니다. 적용 완료입니다!!
참고) marshallku 블로그
반응형
잘못된 내용이 있으면 댓글 부탁드립니다. 감사합니다.
