Tutorial Blog: Cara Mempercepat Loading Blog, Dengan Memasang Lazy Load Image

Tutorial Blog: Cara Mempercepat Loading Blog, Dengan Memasang Lazy Load Image

Ada banyak cara untuk mempercepat loading suatu blog, diantaranya dengan memasang Lazy Load Image ini teman-teman. Cara kerja dari script ini cukup simpel, yakni akan menampilkan gambar suatu postingan artikel ketika di scroll keatas dan kebawah. Dengan begini tentu pengunjung blog teman-teman akan merasa nyaman dalam berselancar dan tentu pengunjung takan pergi, akibat dari loading blog sobat yang terbilang cepat

Jika di artikel sebelumnya, admin membagikan tutorial mempercepat Loading blog Dengan Memasang DNS-Prefecth, maka dengan menggunakan cara ini, juga bakal semakin mempercepat loading blog kalian pastinya

www.margatomsio.com

Karena salah satu faktor terbesar pengunjung suatu blog pergi atau meninggalkan sebuah laman, diakibatkan karena loading pada blog tersebut yang terlalu lama. Sehingga pengunjung merasa bosan dan muncul pemikiran waktu mereka terbuang percuma hanya karena menunggu loading daripada blog tersebut

Nah! untuk itu, pada kesempatan kali ini, admin bakalan nge-share dan berbagi pengetahuan sederhana kepada kalian untuk mempercepat loading blog teman-teman. Jadi, apabila kalian tertarik dan ingin mencoba trik yang bakal admin share kali ini, simak tutorial singkat dibawah ini:
  • Masuk ke Dashboard blog >ke Menu Tema >Edit HTML
  • Tambahkan script dibawah, ini sebelum tag penutup </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:"http://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

  • Simpan Tema
  • Done!
Gimana! mudah bukan, silahkan cek pagespeed blog teman-teman untuk sebelum dan sesudah memasang script ini? Well, demikian pembahasan terkait Tutorial Blog: Cara Mempercepat Loading Blog, Dengan Memasang Lazy Load Image pada artikel kali ini, semoga bermanfaat serta bisa menjadi referensi terbaik buat teman-teman semuanya. Jangan lupa berlangganan blog ini, guna mendapatkan notifikasi artikel terbaru secara gratis
DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.margatomsio.com. Terima kasih.

LANGGANAN ARTIKEL TERBARU VIA EMAIL:

0 Response to "Tutorial Blog: Cara Mempercepat Loading Blog, Dengan Memasang Lazy Load Image"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel