Cara Mempercepat Blog Dengan Script Lazy Load Image

Cara Mempercepat Loading Blog Dengan Script Lazy Load Image - Jika kalian pernah menemukan suatu blog atau website yang kecepatan loadingnya sangatlah lambat, pasti kalian akan merasa kesal dan langsung pindah ke blog atau website yang lain. Biasanya blog yang seperti itu akan sepi karena sudah membuat pengunjung merasa kesal terhadap loading blog tersebut.

Kecepatan blog juga sangat berpengaruh kepada SEO blog kita. Jika loading blog lambat maka untuk kemungkinan besar blog kalian tidak akan SEO friendly, sebenarnya ada banyak cara untuk mempercepat loading blog. Namun di artikel kali ini kami akan berbagi tutorial cara mempercepat loading blog dengan cara memasang script lazy load.

Salah satu cara untuk mempercepat loading blog, yaitu dengan cara memasang script lazy load gambar di blog kalian. Apa itu lazy load gambar? Lazy load gambar merupakan sebuah script untuk menyembunyikan gambar sementara, gambar akan muncul ketika pengunjung menggulir halaman blog kalian.

Fungsi dari lazy load gambar untuk mempercepat loading blog dengan cara menyembunyikan gambar sementara dan gambar akan muncul ketika pengunjung mengscroll halaman blog.

Cara Mempercepat Loading Blog Dengan Script Lazy Load Image

1. Langkah pertama, pergi ke halaman Dashboard Blogger - >> Tema - >> Edit HTML dan temukan kode </body>. Gunakan CTRL-F untuk mencari dengan mudah.

2. Salin dan tempel kode tepat di atas </body>  berikut kode yang disediakan di bawah ini.

<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/AVvXsEh0TVppEWbm2opDUIZHU04XtMQKWIeRMlEZY7uClzwhRM0wvReR2H657QG2UFtZy0GIuqAZkMw-mkek-gkxeKYioK3amTwLrHd-Ef45ZhUpGqPtHGO7vGdUAvaoVYX6uda5_PWwRYQD2lkY/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

3. Jika sudah kalian Tempel lalu klik Simpan.

Sampai disini kalian sudah berhasil membuat blog kalian semakin kencang dengan cara memasang script lazy load gambar di blog kalian.

Demikian untuk Cara Mempercepat Loading Blog Dengan Script Lazy Load Image, semoga bisa menjadi referensi dan bermanfaat untuk semua.