Cara Mempercepat Loading Blog Dengan Lazy Load

Kamis, 06 Juni 2019

Bagikan :

Tweet

Cara Mempercepat Loading Blog Dengan Lazy Load - Kecepatan loading sebuah blog mempunyai dampak penting pada kenyamanan pengunjung saat mengunjungi sebuah blog. Blog yang mempunyai loading yan cepat tentu akan disukai oleh pengunjung. Tapi apabila blog tersebut mempunyai kecepatan loading yang lambat niscaya akan kurang disukai oleh pengunjung.

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

Setelah kalian mengetahui kecepatan loading blog anda, bagaimana berdasarkan anda? Apakah loading blog anda sudah dikatakan cepat? Menurut saya Kecepatan loading dikatakan cepat apabila mempunyai 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.

Mempercepat loading blog dengan jQuery Lazy Load

Kita sanggup mempercepat loading blog kita dengan jQuery Lazy Load. Lazy Load yakni sebuah plugin yang gunanya untuk menunda pemanggilan object saat object tersebut belum dibutuhkan. Kaprikornus object gambar, video, dan komponen lainnya hanya akan terbuka saat kita mengarahkan ke object tersebut. Hal itu akan mempercepat loading blog sebab blog hanya akan membuka object object yang diharapkan saja. Terus bagaimana cara memasang jQuery Lazy Load untuk mempercepat loading blog? Caranya sangat gampang 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 instruksi </body> dengan cara menekakn tombol CTRL + F. Kemudian pastekan instruksi ini TEPAT DIATAS instruksi </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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzVTx49NbcsSTeQ24Mktwmg8gtPOm3EZClLPrbA-EmynAl8QEx9jwvQ5mCdJ8jBOmRPK9-RbjV6-SL27nOizK0NM-DBuuwj7dRoUm7sDioh4S3AiWa0yxBPhyXuqirndF0UFU1Y6SOemlK/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.

Tag : Belajar Ngeblog, Belajar SEO