Cara Mempercepat Loading Blog Dengan Lazy Load

Cara Mempercepat Loading Blog Dengan Lazy Load - Pada kesempatan kali ini saya akan membahas seputar blog yaitu bagaimana cara mempercepat loading pada blog dengan lazy load, pada umumnya cara mempercepat blog harus menghapus atau mengkompresi apa yang diperlukan. Nah dengan kode lazy load ini anda tidak perlu ribet lagi kompresi css atau lainnya cukup letakan kode lazy load ini kedalam blog, lalu lihat hasilnya.

Keunggulan dari lazy load ini adalah untuk meringankan beban saat memuat halaman pada suatu blog yang sedang dibuka mungkin cara ini adalah salah satu cara optimasi blog . Selanjutnya kita langsung ke pembahasan yaitu bagaimana cara mempercepat loading blog dengan lazy load berikut langkah-langkahnya ikuti langkahnya dan pahami isi nya biar kalian tidak bingung.

Cara Memasang Kode Lazy Load

Langkah pertama yang harus anda lakukan cukup mudah yaitu sebagai berikut ini.

1. Masuk Ke Akun Blogger masing-masing > Lalu klik Tema > Edit HTML  .
2. Kemudian Cari Kode </body>, untuk mempercepat pencarian kode anda cukup menekan tombol CTRL+F dan tuliskan kode </body> 
3. Letakan kode Lazy Blog tepat di atas kode </body> . Berikut kode lazy load :

 <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/AVvXsEgTrnA_FkXaB-0kB1-KkZhxZ9fbBX560V4MLG0_MUWZ8NNp4oqIvz_02nFoqQq3S5gQlnofY9t7Y_BkuAEA0LuL4MYDZSkraIo8JTU-nxyTkazn0RwLF9DNGCfGUBHw_CSBWLaZKE27cDeT/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script> 

4. Langkah terakhir Simpan Template dan Lihat hasilnya.

Catatan : Untuk Demo script saat ini tidak tersedia, jadi anda langsung saja mencoba script lazy load.

Kesimpulan

Kesimpulan jadi cara mempercepat loading blog ini sangat mudah untuk dicoba atau dipraktekan dengan menambah kode javascript lazy load blog loading anda akan cepat saat dimuat . Nah mungkin demikian apa yang saya sampaikan pada kali ini, semoga apa yang saya sampaikan ini dapat bermanfaat bagi anda dan menjadi bahan pembelajaran bagi anda, Apabila anda masih bingung atau kurang paham silahkan bertanya lewat berkomentar dibawah postingan ini terima kasih/