Cara Memasang Lazy Load Image untuk Mempercepat Loading Blogger

Cara Memasang Lazy Load Image di Blogger – Gambar merupakan hal terpenting dalam faktor kecepatan blog, ntah itu sebuah banner, logo, maupun gambar produk pemasaran atau thumbnail. Apa jadinya jika suatu blog tidak memiliki gambar? pasti tidak pernah terbayangkan tentang itu.

Sayangnya, gambar dalam ukuran besar merupakan faktor yang mempengaruhi kecepatan pada blog tersebut.

Pada pertemuan kali ini, admin akan membahas tentang Lazy Load Image. Sebuah teknik yang membantu meningkatkan waktu pemuatan halaman, mengurangi ukuran halaman, dan tetap mempertahankan semua gambar pada halaman.

Apa Itu Lazy Load Image?

Malas memuat gambar (Lazy Load Image) adalah teknik menunda pemuatan gambar pada suatu halaman web. Maksudnya, gambar yang tidak dibutuhkan di awal, tidak akan dimuat sebelum terjadi scrolling pada halaman tersebut, seperti pada website https://milenialjoss.com.

Contoh & Cara Kerja Lazy Load Image

Cara kerja script ini tidak jauh berbeda dengan Lazy Load Adsense. Perhatikan gambar diatas, (lihat tulisan berwarna Hijau) Gambar yang berada di kotak tersebut akan dimuat lebih dahulu, karena gambar tersebut berada di tampilan awal pada halaman.

Sedangkan, (perhatikan tulisan berwarna biru) Gambar yang berada dibawah, tidak akan dimuat sebelum ada scrolling yang mengarahkan ke gambar bagian bawah.

Mengapa Lazy Load Image?

Lazy Load Image dapat membatasi pemuatan gambar yang tidak diperlukan di halaman awal. Sebuah gambar yang tidak terlihat oleh pengguna saat halaman dimuat, akan dimuat nanti ketika pengguna menggulir(scroll). Jika pengguna tidak pernah menggulir, gambar yang tidak terlihat oleh pengguna tidak akan pernah dimuat.

Pastinya teknik ini akan membuat performa blog anda jauh lebih baik dalam kinerja dan kecepatan loading nya.

Cara Memasang Lazy Load Image di Blog

Untuk memasang lazy load image, caranya sangat mudah, Anda tinggal mengikuti tutorial berikut ini.

• Pada halaman dashboard blogger, pergi ke Template ➤ Edit HTML
• Lalu tekan CTRL+F untuk mencari kode </body>.
• Letakkan Script lazyload image berikut tepat diatasnya kode </body>.
  

  <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>

• Tekan Simpan.
• Lalu silahkan akses blog Anda untuk mengecek apakah script lazyload berjalan dengan baik.

Tersebut adalah cara memasang lazy load image di blogger. Setelah melakukan cara diatas, periksa kecepatan bloganda, apakah ada perubahan? Terimakasih, semoga bermanfaat.