Cara Memasang Lazy Load Di Blogger

Mempercepat Loading Blog dengan Lazy Load memang sudah banyak tersebar caranya diberbagai blog/web tentu saja setiap trik tersebut mempunyai perbedaan pada setiap penggunaan lazy load itu sendiri tapi pada pembahasan kali ini lazy load hanya akan tapi apabila pengunjung melakukan Scroll maka gambar / image tidak akan muncul bisa tidak melakukan Scroll. Trik ini merupakan salah satu dari optimasi blog dengan plug in jQuery Lazy Load untuk meringankan loading saat memuat halaman blog sobat.

Cara ini juga sudah diterapkan di alpukoding dan menghasilkan speed yang bagus yaitu 100/100 saat dicek Gtmetrix akan tetapi kalau di Google PageSpeed mungkin akan berbeda tapi untuk hal ini Gtmetrix sangat akurat bila untuk pengecekan Speed blog.

Sobat juga bisa menggunakan animasi untuk lebih memperbagus tampilan saat terjadi loading pada tampilan gambar / image mungkin bila melihat bagian Home pada alpukoding akan terlihat animasi yang seperti Facebook.

Cara Memasang Lazy Load Di Blogger

1. Buka Blogger > Klik Tema > Klik tombol Edit HTML > kemudian tambahkan kode dibawah ini sebelum </body>

jQuery<script>
//<![CDATA[
function loadScript(d){var l=document.createElement("script");l.src=d,document.body.appendChild(l)}function downloadJSAtOnload(){loadScript("data:application/x-javascript;base64,ZnVuY3Rpb24gbGF6eUxvYWQoKXtmb3IodmFyIGU9ZG9jdW1lbnQuZ2V0RWxlbWVudHNCeUNsYXNzTmFtZSgibGF6eSIpLHQ9MDt0PGUubGVuZ3RoO3QrKylpc0luVmlld3BvcnQoZVt0XSkmJihlW3RdLnNyYz1lW3RdLmdldEF0dHJpYnV0ZSgiZGF0YS1zcmMiKSl9ZnVuY3Rpb24gaXNJblZpZXdwb3J0KGUpe3ZhciB0PWUuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7cmV0dXJuIHQuYm90dG9tPj0wJiZ0LnJpZ2h0Pj0wJiZ0LnRvcDw9KHdpbmRvdy5pbm5lckhlaWdodHx8ZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LmNsaWVudEhlaWdodCkmJnQubGVmdDw9KHdpbmRvdy5pbm5lcldpZHRofHxkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xpZW50V2lkdGgpfWZ1bmN0aW9uIHJlZ2lzdGVyTGlzdGVuZXIoZSx0KXt3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcj93aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcihlLHQpOndpbmRvdy5hdHRhY2hFdmVudCgib24iK2UsdCl9cmVnaXN0ZXJMaXN0ZW5lcigibG9hZCIsbGF6eUxvYWQpLHJlZ2lzdGVyTGlzdGVuZXIoInNjcm9sbCIsbGF6eUxvYWQpO2RvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoIkRPTUNvbnRlbnRMb2FkZWQiLGZ1bmN0aW9uKCl7InVzZSBzdHJpY3QiO2Zvcih2YXIgZT1kb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCJhIiksdD1lLmxlbmd0aCxuPS9maXJlZm94fHRyaWRlbnQvaS50ZXN0KG5hdmlnYXRvci51c2VyQWdlbnQpP2RvY3VtZW50LmRvY3VtZW50RWxlbWVudDpkb2N1bWVudC5ib2R5LG89ZnVuY3Rpb24oZSx0LG4sbyl7cmV0dXJuKGUvPW8vMik8MT9uLzIqZSplKmUrdDpuLzIqKChlLT0yKSplKmUrMikrdH07dC0tOyllLml0ZW0odCkuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLGZ1bmN0aW9uKGUpe3ZhciB0LHI9bi5zY3JvbGxUb3AsaT1kb2N1bWVudC5nZXRFbGVtZW50QnlJZCgvW14jXSskLy5leGVjKHRoaXMuaHJlZilbMF0pLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLnRvcCxjPW4uc2Nyb2xsSGVpZ2h0LXdpbmRvdy5pbm5lckhlaWdodCx1PWM+citpP2k6Yy1yLGQ9OTAwLGw9ZnVuY3Rpb24oZSl7dD10fHxlO3ZhciBpPWUtdCxjPW8oaSxyLHUsZCk7bi5zY3JvbGxUb3A9YyxkPmkmJnJlcXVlc3RBbmltYXRpb25GcmFtZShsKX07cmVxdWVzdEFuaW1hdGlvbkZyYW1lKGwpLGUucHJldmVudERlZmF1bHQoKX0pfSk7")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

2. Selanjutnya tinggal menentukan gambar thumbnail mana yang ingin diberi lazy load ini.

Sobat harus menambahkan class='lazy' pada tag imagenya dan juga harus merubah src menjadi data-src atau expr:src menjadi expr:data-src

Contoh

HTML
<img src=".../link-image.png">
<img expr:src="dataimagenya">

Rubah Menjadi

<img class="lazy" data-src=".../link-image.png">
<img class="lazy" expr:data-src="dataimagenya">

Atau Kalian Juga Bisa Merubahnya Jadi

<img class="lazy" src='.../link-image-resolusi-kecil.png' data-src=".../link-image.png">

Jika sobat masih belum paham juga disini saya akan memberikan tutorial menggunakan lazy load pada template nubiefast.

3. Langkah pertama, silahkan cari kode data:post.thumbnailUrl kira kira kodenya seperti ini

HTML<b:if cond='data:post.thumbnailUrl'>
               <div class='nubies-thumbnail' itemprop='image' itemscope='itemscope' itemtype='//schema.org/ImageObject'>
                  <a expr:href='data:post.url' expr:title='data:post.title'>                          
                  <img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl' expr:title='data:post.title' height='72' width='72'/>
                  <span expr:content='data:post.thumbnailUrl' itemprop='url'/>
                  <span content='250' itemprop='width'/>
                  <span content='160' itemprop='height'/>
                  </a>
               </div>
               <b:else/>
               <div class='nubies-thumbnail' itemprop='image' itemscope='itemscope' itemtype='//schema.org/ImageObject'>
                  <a expr:href='data:post.url' expr:title='data:post.title'>
                     <b:if cond='data:post.firstImageUrl'>
                        <img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl' expr:title='data:post.title' height='72' width='72'/>                           
                        <span expr:content='data:post.firstImageUrl' itemprop='url'/>
                        <span content='250' itemprop='width'/>
                        <span content='160' itemprop='height'/>
                        <b:else/>
                        <img class='post-thumbnail' src='//2.bp.blogspot.com/-0bF5umofbmo/WsqN0eA3bxI/AAAAAAAAN0E/K-aOkz5i4LUUFwmFC5C3LKweX7_JQT69QCLcBGAs/s1600/noimage.gif' expr:alt='data:post.title' expr:title='data:post.title' height='72' width='72'/>                              
                        <span content='//2.bp.blogspot.com/-0bF5umofbmo/WsqN0eA3bxI/AAAAAAAAN0E/K-aOkz5i4LUUFwmFC5C3LKweX7_JQT69QCLcBGAs/s1600/noimage.gif' itemprop='url'/>
                        <span content='250' itemprop='width'/>
                        <span content='160' itemprop='height'/>
                     </b:if>
                  </a>
               </div>
            </b:if>

4. Lalu rubah menjadi seperti ini

HTML<b:if cond='data:post.thumbnailUrl'>
               <div class='nubies-thumbnail' itemprop='image' itemscope='itemscope' itemtype='//schema.org/ImageObject'>
                  <a expr:href='data:post.url' expr:title='data:post.title'>                          
                  <img alt='thumbnail' class='post-thumbnail lazy' expr:data-src='data:post.thumbnailUrl' expr:title='data:post.title' height='72' width='72'/>
                  <span expr:content='data:post.thumbnailUrl' itemprop='url'/>
                  <span content='250' itemprop='width'/>
                  <span content='160' itemprop='height'/>
                  </a>
               </div>
               <b:else/>
               <div class='nubies-thumbnail' itemprop='image' itemscope='itemscope' itemtype='//schema.org/ImageObject'>
                  <a expr:href='data:post.url' expr:title='data:post.title'>
                     <b:if cond='data:post.firstImageUrl'>
                        <img alt='thumbnail' class='post-thumbnail lazy' expr:data-src='data:post.thumbnailUrl' expr:title='data:post.title' height='72' width='72'/>                           
                        <span expr:content='data:post.firstImageUrl' itemprop='url'/>
                        <span content='250' itemprop='width'/>
                        <span content='160' itemprop='height'/>
                        <b:else/>
                        <img class='post-thumbnail lazy' data-src='//2.bp.blogspot.com/-0bF5umofbmo/WsqN0eA3bxI/AAAAAAAAN0E/K-aOkz5i4LUUFwmFC5C3LKweX7_JQT69QCLcBGAs/s1600/noimage.gif' expr:alt='data:post.title' expr:title='data:post.title' height='72' width='72'/>                              
                        <span content='//2.bp.blogspot.com/-0bF5umofbmo/WsqN0eA3bxI/AAAAAAAAN0E/K-aOkz5i4LUUFwmFC5C3LKweX7_JQT69QCLcBGAs/s1600/noimage.gif' itemprop='url'/>
                        <span content='250' itemprop='width'/>
                        <span content='160' itemprop='height'/>
                     </b:if>
                  </a>
               </div>
            </b:if>

Kalo sobat menggunakan readmore dengan javascript, tinggal rubah src nya menjadi data-src.
Intinya, sobat cari kode <img lalu rubah bagian.
src menjadi data-src atau expr:src menjadi expr:data-src dan tambahkan class lazy

5. Simpan Tema dan lihat hasilnya.

Untuk menambahkan animasi loading pada bagian lazy load agar terlihat seperti Facebook sobat bisa gunakan animasi kode dibawah ini.

1. Buka Blogger > Klik Tema > Klik tombol Edit HTML > kemudian tambahkan kode dibawah ini sebelum ]]></b:skin> atau </style>

CSS/* Animasi Gua */
.lazy{margin:auto;width:auto;height:auto;animation:loaded .85s linear infinite;-moz-animation:loaded .85s linear infinite;-webkit-animation:loaded .85s linear infinite;-o-animation:loaded .85s linear infinite;background:#e4e4e4 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30% );background-size:800px 100px;position:relative;transition:all .5s ease;}@keyframes loaded{0%{background-position:-400px 0;}100%{background-position:400px 0;}}@-webkit-keyframes loaded{0%{background-position:-400px 0;}100%{background-position:400px 0;}}@-moz-keyframes loaded{0%{background-position:-400px 0;}100%{background-position:400px 0;}}

2. Simpan Tema dan lihat hasilnya.

Mungkin sekian artikel tentang cara mempercepat loading blogger menggunakan lazy load image ini semoga bermanfaat. apabila ada yang tidak dimengerti silahkan bertanya dikolom komentar.