Cara Mempercepat Loading Blog Dengan Lazy Load

Cara Mempercepat Loading Blog Dengan Lazy Load - Kecepatan loading sebuah blog memiliki pengaruh penting pada kenyamanan pengunjung ketika mengunjungi sebuah blog. Blog yang memiliki loading yan cepat tentu akan disukai oleh pengunjung. Tapi apabila blog tersebut memiliki kecepatan loading yang lambat pasti akan kurang disukai oleh pengunjung.

Oleh karena itu, kita sebagai pemilik blog harus berusaha untuk mempercepat loading blog kita. Loading blog harus sudah selesai dalam waktu kurang dari 3 detik agar pengunjung tetap nyaman. Tapi bagaimana cara kita mengetahui apakah kecepatan loading blog kita sudah cepat atau belum? Untuk caranya, silahkan baca tutorial saya tentang cara mengetahui kecepatan loading sebuah blog.

Setelah kalian mengetahui kecepatan loading blog anda, bagaimana menurut anda? Apakah loading blog anda sudah dikatakan cepat? Menurut saya Kecepatan loading dikatakan cepat apabila memiliki skor diatas 80. Jika skor blog anda masih dibawah 80 kalian masih harus mengoptimasinya. Silahkan baca artikel saya tentang cara mempercepat loading blog menjadi super cepat. Selain cara yang saya sebutkan pada artikel tersebut, ternyata masih ada cara untuk mempercepat loading blog anda. Yaitu dengan menggunakan jQuery Lazy Load.
Cara Mempercepat Loading Blog Dengan Lazy Load

Mempercepat loading blog dengan jQuery Lazy Load

Kita dapat mempercepat loading blog kita dengan jQuery Lazy Load. Lazy Load adalah sebuah plugin yang gunanya untuk menunda pemanggilan object ketika object tersebut belum dibutuhkan. Jadi object gambar, video, dan komponen lainnya hanya akan terbuka ketika kita mengarahkan ke object tersebut. Hal itu akan mempercepat loading blog karena blog hanya akan membuka object object yang dibutuhkan saja. Terus bagaimana cara memasang jQuery Lazy Load untuk mempercepat loading blog? Caranya sangat mudah sekali kok. Langsung saja simak caranya dibawah ini.

1. Pertama, kalian masuk ke dashboard blogger anda.
2. Setelah itu masuk ke Tema/Template > Edit HTML.
3. Cari kode </body> dengan cara menekakn tombol CTRL + F. Kemudian pastekan kode ini TEPAT DIATAS 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:"http://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});

//]]>

</script>
4. Setelah itu klik simpan tema. Selamat anda telah berhasil memasang jQuery Lazy Load.

Yak, itulah tadi cara mempercepat loading blog dengan jQuery lazy load. Bagaimana? Apakah kecepatan loading blog anda semakin cepat atau belum. Silahkan cek kembali kecepatan loading blog anda dengan Gtmetrix dan Google pagespeed. Terimakasih telah berkunjung ke www.bloggerkoplo.com. Salam koplo.

Berlangganan update artikel terbaru via email:

0 Response to "Cara Mempercepat Loading Blog Dengan Lazy Load"

Post a Comment

Iklan Tengah Artikel 2

Iklan Bawah Artikel