Cara Memasang Script Lazy Load di Blog - Untuk Mempercepat Loading

Pernahkah anda berkunjung ke suatu blog dengan sinyal dan koneksi yang bagus namun blog tersebut lama loadingnya. Blog yang lama ketika dibuka ketika diakses sangatlah buruk. Buruk bagi pemilik blog dan juga buruk bagi pengunjung. Pengunjung akan lari dan anda akan kehilangan trafik. Loading blog yang amat sangat lama memiliki dampak negatif. 

Blog yang loading blognya lama sangat tidak disukai oleh google. Google jauh lebih suka dengan blog yang ringan dan cepat. Loading yang laa juga akan berpengaruh terhadap SEO blog anda. Jika blog anda termasuk blog yang lama dalam masalah loading sangat disarankan untuk memsang script Lazy Load di blog.

Dengan memasang script Lazy Load maka loading blog anda akan lebih cepat dan wuzz namun ada juga kekurangan dari script ini. Script Lazy Load kadang bisa membuat script lain tidak bekerja jadi sangat disarankan sebelum memasang script Lazy Load anda membackup template anda terlebih dahulu.Lazy Load sangat bagus terutama untuk blog yang benar-benar berat. Lalu bagaimana cara kerja script ini. 

Cara Kerja

Script ini sangat cocok untuk blog yang memiliki banyak gambar didalam postingannya. Karena akan bereaksi terhadap gambar didalam postingan.Lazy Load ini akan membuat gambar dimuat perlahan-lahan diakhir. Jadi loading blog anda akan lebih cepat karena gambar akan dimuat setelah blog selesai loading.

Jika terdapat banyak gambar dalam postingan maka gambar-gambar tersebut akan dibuat lebih akhir jika sudah termuat seluruhnya maka baru gambar diatas dimuat untuk gambar dibawahnya akan dimuat setelah pengunjung men-scroll kebawah. Disaat itulah gambar akan dimuat.

Cara Memasang Script Lazy Load

1. Memasang script Lazy Load sangatlah mudah, silakan buka blogger → Template → Edit HTML
2. Salin script Lazy Load dibawah ini dan letakkan diatas kode </body> ,lalu simpan template.

 

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh-UXDO478YsjgRoWa6wqg8BO9vX09mZ4EnNy-h_QpOSQPHNOeF5X481T2g4QpsnogPRx-5Bk1H5321SEluoTu_aYCVMx2Byp5GQBSGB2_4bdsQnM0ia0mNvrqIapvJa3g8YNsWAuS5C1C/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

Sekarang coba buka blog sobat. Apakah kecepatan loadingnya sudah berubah? Untuk membedakan kecepatan sebelum dan sesudah memasang script Lazy Load maka anda harus mengeceknya terlebih dahulu. Ok cukup sekian artikel ini semoga bermanfaat.