Mempercepat Loading Blogger : jQuery Lazy Load Plugin

Ada banyak faktor kenapa lalu lintas blog kehilangan pengunjung, salah satunya adalah kecepatan loading blog yang memerlukan waktu lama. Hal seperti ini benar-benar akan berdampak buruk buat blog Anda, jadi penting buat Anda untuk memperhatikan beban dari template blog Anda. Salah satu yang membuat blog kita loading lebih lama karena gambar atau photo, lantas apa kita tidak harus menggunakan gambar untuk blog kita? Tentu saja tidak, seharusnya kita harus mengambil suatu langkah tertentu sehingga beban dari blog kita berkurang dan tampil lebih cepat.

satu-delapan

Nah, pada posting ini saya akan berbagi satu tips untuk mempercepat loading blog Anda dengan menggunanakan Plugin jQuery Lazy Image Load. Cara kerja plugin ini adalah memperlambat atau menunda loading gambar di blog Anda. Gambar yang muncul hanya pada halaman yang terlihat dan gambar yang lain akan terlihat saat kita mengscroll halaman blog ke bawah. Dengan begitu loading blog akan lebih cepat dan dalam beberapa kasus tertentu dapat membantu mengurangi beban server. Untuk lebih jelasnya silahkan kunjungi Appelsiini

Artikel Terkait :

• Menambahkan Judul dan Atribut Alt Di Gambar Posting Agar Lebih SEO

　

Cara Install Lazy Image Load di Blogger

• Login  ke Blogger Anda
satu-delapan
• Klik Temlate dan pilih Edit HTML
• Cari tag </head> gunakan Ctrl+F untuk mencari
• Selanjutnya salin javascript dibawah ini tepat sebelum tag </head> :

<!-- lazy load start www.blogsatudelapan.com -->

<script type='text/javascript'>//<![CDATA[

(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:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

<!-- lazy load end http://www.blogsatudelapan.com/ -->

satu-delapan

• Langkah terakhir klik Simpan template - selesai !

Dengan menyelesaikan langkah diatas Anda telah berhasil menginstall lazy image load diblog Anda. Akhir kata semoga tips yang mudah ini bermanfaat buat Anda dan jangan lupa untuk memberi 1+, like atau share posting ini. Salam satu-delapan!