Cara Mempercepat Loading Blog Dengan Lazy Load

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.

Cara Mempercepat Loading Blog Dengan 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, kira-kira seperti itulah cara untuk mempercepat loading blog dengan menggunakan Lazy Load. Sebuah blog yang memiliki kecepatan loading yang baik akan disukai oleh para pengunjung. Oleh karena itu, kecepatan loading blog merupakan faktor SEO yang sangat penting untuk diperhatikan. Jadi, silahkan cek loading blog anda. Jangan sampai loading blog anda lambat.

Jika anda tertarik dengan tutorial blogger lainnya, jangan lupa untuk membaca artikel saya yang berjudul cara mengaktifkan ads.txt di blogger dengan mudah. Semoga artikel saya kali ini bermanfaat bagi anda. Terimakasih telah berkunjung di www.bloggerkoplo.com. Salam koplo.

Share:

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.

close