Iklan Bawah Header

Cara Mempercepat Loading Blog Dengan Lazy Load

Cara Mempercepat Loading Blog Dengan Lazy Load - Mempercepat suatu blog adalah tujuan untuk para blogger agar para visitor tidak merasa kesal atas kelamaan loading untuk memasuki blog anda.


Cukup banyak cara untuk mempercepat loading blog, yakni salaah satunya adalah dengan memasang plugin lazy load di blog anda. Kali ini CaraSatuKu akan berbagi tutorial bagaimana cara memasang lazy load di blog anda agar visitor pun merasa tenang hehehe. Tapi sebelum itu saya ingin memberitahu apasih itu Lazy load ?

Apa Itu Lazy Load ?

Lazy load adalah sebuah plugin atau script yang dibangun dan dikembangkan khusus untuk flatform blogspot, Fungsinya untuk menunda pemanggilan objek ketika objek masih belum dibutuhkan. Dengan kata lain, gambar, video, dan komponen lain yang ada dalam blog tidak akan dimuat sebelum anda menyentuh atau mengarahkan kepada konten tersebut.

Sehingga dengan ini, loading blog akan sedikit berkurang karena hanya memuat halaman yang terbuka saja, ketika anda scroll cursor anda ke bawah, baru disini semua halaman akan dimuat secara keseluruhan.

Oke langsung saja Ke tutorialnya, silahkan bisa langsung coba dan terapkan di blog anda :

1. Buka Blogger => Template => Edit HTML => Tambahkan kode dibawah ini sebelum </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://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})}); //]]> </script>

2. Kalau sudah simpan Template dan lihat hasilnya blog akan terasa lebih ringan.

Sebagai penutup, begitu kamu selesai menerapkan plugin Lazy Load di Blogger, maka, kamu akan mendapati gambar di blogmu baru akan termuat begitu kamu melakukan scroll kebawah, optimasi ini cocok sekali untuk blog yang banyak menggunakan ilustrasi gambar dalam setiap artikelnya.

Bagaimana langkah - langkahnya cukup mudah bukan, Cara Mempercepat Loading Blog Dengan Lazy Load ?  Oke bro / sis cukup sampai disini pembahasan saya kali ini. Jika ada yang kurang di mengerti silakan kalian tanyakan pada kolom komentar dibawah.

5 Responses to "Cara Mempercepat Loading Blog Dengan Lazy Load"

  1. Sudah saya coba dan memang ada perubahan speed blog meski tidak begitu signifikan

    ReplyDelete
  2. Replies
    1. Gampang kok untuk memahaminya Copy aja Kode diatas setelah itu pasang di bagian atas < /body >

      Delete
  3. This comment has been removed by a blog administrator.

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel