구글 블로거 이미지 로딩을 Lazy-Loading으로 지연시켜 페이지 속도 향상 시키기
구글 Lighthouse 점수에서 큰 비중을 차지하는게 이미지 로딩부분인데 구글
블로그스팟에 이미지를 여러장 포스팅하면 웬만큼 크기를 줄여도
Lighthouse에서 계속 경고 메시지가 나오게 됩니다.
그렇다고 이미지를 뺄 수도 없는 포스팅은 방법이 안나오는데 이럴때 사용할
수 있는게 포스팅 페이지에 처음 접속할 때 나오는 이미지를 사용자 스크롤에
따라 지연로딩하게 만드는 Lazy-Loading 기능입니다.
|
| Lighthouse의 이미지 용량 축소 문구 |
Lazy-Loading 기능을 사용하면 아래처럼 JPG파일을 WebP로 전환하라는 내용도 같이 사라지게 됩니다. 이전에 WebP로 변환해서 구글 블로그에 업로드 해봤었는데 이 메시지가 사라지질 않았었습니다.
페이지 용량을 줄이기 위해 별짓을 다해봤는데 근본적으로 이미지가 많은면 모바일에서는 이 경고문구 없에는게 쉽지 않았습니다.
|
| webp 사용 문구 |
이미지 Lazy-Loading 사용하기
구글 블로그 포스팅에 이미지 Lazy-Loading을 사용하기 위해선 아래 코드를 복사하여 구글 블로그스팟 관리자 HTML모드에서 </body>태그 바로 위에 붙여넣기 해주면 됩니다.
<script> //<;b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn7QnTUbPgDR0C6BO3twEnKLbiWn8JdF9OCQpfZXLHUvXFUBbQnuYOnB-hawAB9cPsUUJ9qA9knk1t7K-dNNJobX_eb8hQUCZGztfKc9-yR8xHjR2vK3ZzLlk6aCMq65NQv-RHiiBo2mD6/s1600/sun.gif",effect:"fadeIn",threshold:"-50"})}); //]]> </script> <script defer src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
관리자메뉴 - 테마 - HTML편집으로 들어가 맨 아래 </body> 태그 위에 아래와 같이 스크립트를 복사하여 붙여넣기 합니다.
 |
| body 태그 위에 코드 넣은 모습 |
저장 후 이미지가 많은 포스팅을 다시 들어가 스크롤을 내려보면 아래와 같이 스크롤이 이미지를 지나갈때 로딩 이미지가 나오면서 이미지를 불러옵니다. 화면의 위 부분부터 스크롤을 밑으로 내려오면서 이미지를 불러오기 때문에 페이지 속도가 크게 향상되고 (일부 사용자는 불편할 수 있음) 페이지 속도를 올리는데 큰 도움이 됩니다.
근데 이게 모바일은 괜찮은데 PC버젼에서 이미지 불러오는 속도가 좀 느린 경향이 있네요.
다시 구글 Lighthouse를 돌려보면 아래와 같이 이미지 관련 경고 문구가 사라진걸 볼 수 있습니다.
