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?
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 fitur tersebut.
Baca juga: jump break blogger
Contoh penerapan lazy load image
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 lini, sejak awal artikel diakses, gambar tersebut sudah muncul walaupun belum saatnya kita ingin lihat bagian tersebut.
Manfaat lazy load image
Dari penjelasan dan contoh penerapannya di atas, mungkin Anda 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. Anda 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 ini 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.
- Buka blogger.com.
- Masuk ke menu Theme/Tema.
- Klik ikon panah bawah di sebelah tombol CUSTOMIZE.
- Klik pilihan Edit HTML dan Anda akan melihat kodingan templatenya.
- Tekan kombinasi tombol Ctrl+F lalu ketikkan </body>.
- Paste-kan script lazy load image tepat di atas </body>.
- Klik Simpan atau disket dan lihatlah perubahannya.
Baca juga: cara membuat tombol share di blog
Script lazy load image
Berikut script untuk menambahkan fitur lazy load image di blogspot kita. Ingat, paste-kan tepat di atas </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://4.bp.blogspot.com/-XNnCtsmVWps/WwUzI4O3OMI/AAAAAAAAGzM/s5IzNI42txMh8ZglfGk9ktfD7CqQ0JkMgCLcBGAs/s1600/sun.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>Sekali lagi, cara memasang lazy load Blogger memang tidak semudah di WordPress. Namun, masih sangat mungkin untuk dilakukan. Selamat mencoba dan semoga website Anda jadi lebih cepat loadnya daripada sebelumnya. Sekian pembahasan AneIqbal kali ini dan semoga bisa bermanfaat.
