Monday, December 4, 2017

Lazy Load, Cara Mudah Mempercepat Waktu Loading Blog

Lazy Load, Cara Mudah Mempercepat Waktu Loading Blog | Selain berkonsentrasi pada konten yang berkualitas, seorang blogger pun harus melakukan optimisasi pada blog yang dikelolanya, menaruh perhatian optimisasi blog dengan jalan terus mengoptimalkan kinerjanya supaya tampilan, loading dan konten terus berkembang menjadi lebih baik.


Mengoptimalkan loading blog memang menjadi masalah yang sangat sering dihadapi oleh sebagian besar atau pun semua blogger, khususnya blogger yang memakai platform blogspot, barangkali tidak menjadi begitu masalah untuk mereka yang memakai platform wordpress dengan self host, karena tersedia banyak plug in yang dapat diinstall guna mengoptimalkan loading blog supaya selalu cepat meski terdapat banyak file dan gambar yang terunggah didalamnya.

Lalu bagaimana dengan blogger dengan platform blogspot? apakah mereka yang memnguunakan blogger dapat mengoptimalkan loading blog supaya lebih cepat? jawabanya? BISA, sebab, kali ini saya akan membagikan tutorial cara untuk mempercepat loading blog dengan memasang plug in lazy load.

" Apaan sih lazy load itu? Terus, gimana lazy load bisa buat loading blog saya jadi lebih cepat? "

Lazy load ialah sebuah plug in atau script yang dikembangkan khusus bagi platform blogspot, Fungsi dari lazy load ini sendiri adalah menunda pemanggilan objek saat objek masih belum dibutuhkan. Dengan kata lain, gambar, video, dan komponen yang terdapat dalam blog tidak bakal dimuat sebelum kamu menyentuh atau mengarahkan konten tersebut.

Sehingga dengan ini, waktu yang dibutuhkan untuk pertama kali meload halaman blog mu akan sedikit berkurang karena akan memuat terlebih dahulu halaman yang kamu lihat saja, ketika kamu scroll cursor kamu ke bawah, barulah disini seluruh halaman bakal dimuat secara keseluruhan.

Tentunya andai blogmu semakin cepat diakses, maka semakin berpotensi untuk mendapatkan perhatian visitor sebab blog tidak memerlukan waktu yang lama guna memuat semua halaman, sehingga semua pengunjung pun bakal semakin kerasan berselancar di blog anda.

" Oke, sekarang saya sudah mengerti apa itu lazy load dan cara kerjanya. Nah, kalo cara pasang nya gimana? "

Cara pasangnya mudah kok. Saya rasa, blogger pemula yang belum tau apa apa tentang coding sekalipun bisa dengan mudah memasangnya. Berikut ini langkah langkah memasang lazi load di blog:

1. Seperti biasa, login dulu ke Blogger. Jika sudah, buka menu Tema > Edit Template.

Lazy Load, Cara Mudah Mempercepat Waktu Loading Blog

2. Cari kode </body> lalu paste kode berikut ini di atasnya
Kamu bisa mencari kode <body> dengan CTRL+F


<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>

3. Simpan

Sekarang kamu bisa melihat hasilnya. Sekian artikel mengenai Lazy Load, Cara Mudah Mempercepat Waktu Loading Blog , semoga dapat membantu

Load disqus comments

0 komentar