Cara Memasang Lazy Load Image di Blogger (Blogspot)

Pernah dengar istilah lazy load blogger di grup atau komunitas? Bagi kalangan blogger, lazy load blogger ini wajib mereka ketahui. Sebab, blogger mereka akan lebih baik jika dipasang fitur lazy load blogger ini.

Blogger (blogspot) memang dapat digunakan secara gratis selama seumur hidup. Kalaupun mau, kita cuma butuh modal domain saja supaya url/domainnya menjadi lebih terkesan premium dan tanpa embel-embel "blogspot".

Namanya juga gratisan, tentu ada keterbatasan pada fitur, plugin, maupun kustom. Tidak semerdeka bila menggunakan Wordpress. Salah satunya, fitur lazy load image yang cukup krusial kehadirannya bagi sebuah website.

Di era sekarang, saat tulisan ini dibuat, bahkan hingga bebebrapa tahun ke depan, lazy load image sudah menjadi fitur yang wajib dipasang. Sayangnya, untuk memasang lazy load image di platform Blogger, kita perlu sedikit effort lebih untuk memasangnya.

 

Apa itu lazy load image blogger yang penting buat website?

Lazy load image merupakan teknik pemanggilan gambar dari sumbernya sesuai dengan kapan gambar itu perlu ditampilkan. Tujuannya, untuk meringankan load website sehingga dapat diakses lebih cepat. Jadi, prosesnya, saat suatu artikel diakses, semua kontennya akan diload/dipanggil untuk dimunculkan di layar.

Seperti yang kita tahu, konten itu dapat berupa teks, gambar pendukung, video, dan sebagainya. Pada website yang tidak memiliki fitur lazy load image, semua resource artikel tersebut akan diload/dipanggil semua saat artikel diakses.

Proses pemanggilan semua resource ini seringkali memakan waktu lama karena dipanggil secara berbarengan saat itu juga. Hal ini berdampak pada kecepatan load websitenya. Sehingga, website terasa lebih berat.

Berbeda halnya jika website tersebut sudah memasang fitur lazy load image. Website akan terasa jauh lebih ringan. Mengapa bisa demikian?

Ketika sebuah artikel diakses, hanya teks yang diload/dipanggil untuk ditampilkan di layar. Jika ditemui adanya gambar pada bagian artikel tertentu, barulah gambar tersebut diload/dipanggil untuk dimunculkan.

Jadi, pemanggilan resource gambar hanya terjadi pada saat ada bagian gambar yang perlu ditampilkan. Resource gambar tidak dipanggil semua seperti halnya pada website yang tidak memasang lazy load image.

Baca juga: Pasang Jump Break Blogger supaya Blog Lebih Ringan


Contoh penerapan lazy load image di Blogger

Supaya lebih memahami fungsinya, coba perhatikan saja apakah gambar berikut langsung muncul sejak awal atau baru "loading" dan muncul saat discroll ke bagian tersebut?

Jawabannya, jelas. Gambar di atas baru diload/dipanggil saat dibutuhkan untuk tampil. Kalau tidak ada fitur lazy load image, sejak awal artikel diakses, gambar tersebut sudah muncul walaupun belum saatnya kita ingin lihat bagian tersebut.


Manfaat lazy load image Blogger

Dari penjelasan dan contoh penerapannya di atas, mungkin kamu sudah mengerti manfaat dari lazy load image ini. Jadi, manfaatnya, yaitu untuk menajemen resource web yang lebih baik dan load website yang jauh lebih ringan.

Semua itu akan berdampak pada kenyamanan pengunjung ketika mampir di website kita. Coba saja bayangkan sendiri. Kamu pasti kesal kan kalau akses web yang berat? Padahal di situ ada informasi yang lagi kita cari.


Memasang lazy load image di Blogger

Setelah perjuangan panjang mencari kesana kemari di dunia maya, akhirnya dapat juga caranya. Memasang lazy load image di Blogger mungkin tidak semudah memasangnya di platform Wordpress.

Di Wordpress, biasanya kita cukup dengan menginstall sebuah plugin tambahan. Sementara di platform Blogger, kita perlu mengakses kodingan template untuk meletakkan script lazy load image nya.

Berikut cara memasangnya.

  1. Buka blogger.com.
  2. Masuk ke menu Theme/Tema.
  3. Klik ikon panah bawah di sebelah tombol CUSTOMIZE.


  4. Klik pilihan Edit HTML dan kamu akan melihat kodingan templatenya.
  5. Tekan kombinasi tombol Ctrl+F lalu ketikkan </body>.


  6. Paste-kan script lazy load image tepat di atas </body>.
  7. Klik Simpan atau disket dan lihatlah perubahannya.

Baca juga: Cara Membuat Tombol Share Media Sosial di Blog 


Script lazy load image Blogger (blogspot)

Berikut script untuk menambahkan fitur lazy load image di blogspot kita. 

Ingat, paste-kan tepat di atas </body>.

<script>
//<![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://4.bp.blogspot.com/-XNnCtsmVWps/WwUzI4O3OMI/AAAAAAAAGzM/s5IzNI42txMh8ZglfGk9ktfD7CqQ0JkMgCLcBGAs/s1600/sun.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

Cara memasang lazy load image di platform Blogger memang tidak semudah di Wordpress. Namun, masih sangat mungkin untuk dilakukan. Selamat mencoba dan semoga website kamu jadi lebih cepat load nya dari sebelumnya.