BLOGTUTORIAL

Cara Memasang Lazy Load Untuk Mempercepat Blog

Cara Memasang Lazy Load Untuk Mempercepat Blog– Salah satu keinginan semua blogger yaitu mempercepat loading pada blog yang dimilikinya, terutama dengan blog yang memiliki gambar dengan ukuran besar dan kualitas tinggi.

Ukuran gambar yang memiliki kualitas pixel yang tinggi memang sangat bagus untuk tampilan blog, namun pada blogspot hal tersebut dapat mempengaruhi kecepatan loding pada blog terutama blog yang menngunakan banyak gambar dan script.

Terkadang dengan loading yang lambat, selain mengesalkan juga dapat membuat lari atau kabur pembaca blog anda karena malas untuk menunggu loading pada blog tersebut.

Salah satu cara yang dapat mempercepat loading pada blog yaitu dengan memasang sebuah kode Script yang di letakkan pada template blog tersebut dengan cara edit HTML.

Manfaat dari Lazy Load pada blog yaitu untuk mendahulukan tampilnya konten dahulu dan menampilkan gambar secara perlahan dan belakangan, jadi blog akan terasa cepat dalam melakukan loading, dan menutup gambar sementara sebelum terlihat oleh pembaca.

Telah terbukti dengan memasang Lazy Load dapat meningkatkan kecepatan pada loading blog secara baik dan dalam hal Seo kecepatan blog adalah salah satu syarat supaya konten kita di sukai oleh mesin pencari.

Selain itu blog yang memiliki loading yang cepat juga sangat disukai oleh pembaca dan mendapat peringkat atau rangking yang baik di mata google atau search engine.


Lalu bagai mana cara memasang Lazy Load pada blog ? Berikut ini adalah cara:

Baca Juga:   6 Cara Paling Ampuh Menghemat Kuota Data Internet di Android

 

Cara Memasang Lazy Load Untuk Mempercepat Blog

 

1. Buka Blogger anda, Kemudian >> Template >> Edit HTML

2. Lalu Cari Kode </body> Untuk mempermudah gunakan CTRL+F dalam pencarian di Edit HTML

3. Setelah ketemu Kode </body> letakkan kode berikut ini tepat di atas kode </body>

Kode script

 <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. Simpan Template
Setelah simpan template silahkan anda coba buka beranda blog anda, apakah berfungsi atau tidak script nya. saya coba sih berfungsi dengan baik.

Demikianlah artikel saat ini tentang Cara Memasang Lazy Load Untuk Mempercepat Blog ,semoga membantu dan juga bermanfaat.

Tags

Uhendrayana

Manusia apa adanya yang gak ada apa apa nya

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Back to top button
error: Content is protected !!
Close

Adblock Terdeteksi

Harap pertimbangkan mendukung kami dengan menonaktifkan pemblokir iklan Anda