Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Memasang Lazy Load Image di Blogger (Blogspot)

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: Tips Agar Blog Cepat Diterima Google AdSense


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?

lazy load image blogger

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.

Baca juga: Cara Mengembangkan Kualitas Komunitas Blogger


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.

    lazy load image blogger

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

    lazy load image blogger

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

 

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.

Posting Komentar untuk "Cara Memasang Lazy Load Image di Blogger (Blogspot)"