Cara Memasang Lazy Load di Blogger (Blogspot)

Dibandingkan semua elemen website lainnya, gambar/foto memiliki ukuran terbesar. Jadi meski bisa mempercantik tampilan konten, gambar atau foto juga bisa membuat loading blog terasa lambat.

Jika kamu pernah memeriksa kecepatan website dengan tools seperti GTMetrix atau Google Page Speed Insight, gambar yang tidak dioptimasi dengan baik biasanya menjadi salah satu penyebab skor pagespeed yang rendah.

Nah, jika kamu memiliki masalah dengan gambar, salah satu langkah dalam optimasi gambar yang bisa kamu lakukan adalah dengan menggunakan Lazy Load.

Sayangnya pada Blogger kita tidak bisa memakai plugin seperti WordPress. Tapi tenang, ada cara mudah untuk menggunakan Lazy Loading di Blogger.

Pengertian Lazy Loading

Lazy Load atau Lazy Loading adalah teknik optimasi di mana gambar hanya akan di-load saat akan ditampilkan di layar pengguna saja.

Secara default, seluruh gambar yang ada pada sebuah artiikel biasanya akan langsung di-load semua. Jika ada banyak gambar pada artikel tersebut, maka loading akan terasa cukup lama. Namun dengan lazy loading, gambar yang akan di-load hanya yang muncul di layar pengguna saja. Sisanya akan ditampilkan dengan delay saat pembaca scroll ke bawah. Dengan begitu, waktu loading akan terasa lebih cepat.

Perlu gak sih pakai Lazy Loading di Blogger?

Tergantung. Jika terdapat banyak file media seperti gambar, video, atau GIF, maka Lazy Loading akan sangat membantu. Namun jika hanya ada 1-2 gambar saja pada setiap artikelnya, maka lazy loading tidak akan berpengaruh terlalu banyak.

Cara Menambahkan Script Lazy Loading di Blogger

Untuk menggunakan Lazy Loading di blog Blogger, kita hanya perlu menambahkan script lazy load saja di template Blogger. Caranya?

1. Login ke dasbor Blogger
2. Masuk ke menu TEMA lalu pilih EDIT HTML
3. Cari tag </body> lalu salin kode ini tepat di atas tag tersebut.

<script type='text/javascript'> //<![CDATA[
// Fast 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://1.bp.blogspot.com/-Ge7CuMYvGd4/Xo0_-_5w16I/AAAAAAAABn8/uPmMqvND6W0sPa1TKhxLtlK4GkgmDC4_gCLcBGAsYHQ/s1600/bisablog-loading.png",effect:"fadeIn",threshold:"-50"})}); //]]>
</script>

Jika sudah, simpan.

Seberapa besar sih pengaruh script lazy loading di blog Blogger?

Untuk mengetahuinya, iseng-iseng saya coba memasang lazy loading di salah satu blog Blogger saya. Sayangnya pada template Viomagz hal ini tidak berpengaruh banyak. Jadi saya menggantinya terlebih dahulu dengan template lain. Setelah diperiksa dengan GTMetrix, inilah skor default yang saya dapat.

Setelah itu saya memasang lazy loading di blog dengan script di atas. Setelah ditambahkan, berikut adalah hasil test yang saya dapat

Bagaimana, lumayan kan hasilnya?

Jadi jika kamu memakai banyak gambar dan ingin meningkatkan kecepatan loading blog Blogger, kamu bisa mencoba script lazy loading di atas.