Lazyload: Tips Mempercepat Loading Tema Blogger

Apa itu fungsi lazyload? dan sebagai apa perannya di situs yang Anda kelola?

Kita akan coba membahas bersama fungsi dan manfaat lazyload ini lewat tulisan ini.

Pengertian Singkat Lazyload

Lazyload image bisa di sebut artinya males untuk menunggu foto.

Dan pastinya maksud dari kata tersebut adalah menahan objek loading tampilan foto.

Contohnya disini kita lihat sebagai acuan adalah sebuah blog.

Dimana bila blog yang menggunakan plugin Lazyload akan menahan suatu loading tampilan gambar jika di akses oleh user (pengguna).

Baca juga — Pelajari tentang Cara Membuat Slider Caraousel Image di Blogspot.

Fungsi dari lazyload itu sendiri adalah memberikan kecepatan akses tanpa harus memakan file | mendownload file yang ada dari Blog.

Jika Anda salah satu orang yang memiliki Website.

Baca juga: Update: 3 Cara Berbeda Memasang Lazyload Blogspot

Maka lazyload ini sangat disarankan Google untuk Anda pasang agar mendapatkan nilai kecepatan yang bagus dipencarian Google. 

Untuk memasang lazyload ini juga, Anda tidak perlu pusing atau ahli dalam masalah ilmu coding dan HTML.

Sebab kami sudah menyediakan kode JavaScript lazyload yang mudah untuk digunakan.

Baca juga — Pelajari tentang Cara Memperkecil Ukuran kode CSS,HTML dan Javasript di Blogspot.

Kekurangan dari lazyload image ini adalah tidak bagus untuk kenerja SEO dibagian pencarian Gambar.

Sebab gambar tidak akan terbaca secara baik dipencarian Google.

Karena terhambat akan suatu loading saat gambar tampil di halaman mesin pencari.

Lebih dari itu semuanya tergantung keperluan dan kepentingan kalian masing-masing. 

Jika kamu mementingkan nilai kecepatan blog maka silahkan pasang kode JavaScript lazyload ini.

Memasang Scipt Lazy Load di Blogger

Salin / Copy kode script dikotak bawah ini.

<script type='text/javascript'>
//<![CDATA[
// Lazy Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);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://www.spruko.com/demo/pinlist/demo/img/loader.svg",effect:"fadeIn",threshold:"-50"})});
//]]></script>

NB: Warna tanda merah itu adalah tampilan gambar saat gambar blog masih belum ada aktifitas scroll. Kamu bisa ubah gambar sesuai gambar milik sendiri.

Buka Dashbor > Tema > Edit HTML > CTRL+F masukan kode </body>

Letakan kode JavaScript lazyload diatas tepat di atas kode </body>

Klik " SIMPAN "

JavaScript Lazyload AdSense Blogger

<script type='text/javascript'>
// Lazy Load AdSense
var lazyadsense=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
//]]></script>

Pasang kode script lazyload ads diatas diatas kode </body>

Lalu, hapus link JavaScript Google AdSense yang sebelumnya terpasang di template blog Anda.

Sebagai contoh kode iklan Google AdSense dibawah ini akan memberikan kamu kemudahan dalam memahaminya.

<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-123456789"
     data-ad-slot="123456789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Akhir Kata

Selesai sudah cara pemasangan kode lazyload untuk blog tipe blogspot.

Jika ada pertanyaan lain jangan ragu untuk menulisnya di kolom komentar blog ini.

Berbagi :