Cara Mempercepat Loading Blog Dengan Lazy Load

Blog yang ringan dan memiliki Load page yang cepat tentu sangat disukai oleh Google dan dipercaya bisa meningkatkan peringkat di mesin pencarian. Banyak optimasi yang bisa dilakukan untuk mempercepat loading blog dan salah satunya yang terbaru dan sangat direkomendasikan oleh google sendiri yaitu "Lazy Load".

Apa itu Lazy Loading ? ini sebenarnya merupakan efek yang menunda pemuatan dari resource pada sebuah halaman di blog. Lazy load bisa diterapkan pada gambar / image agar loading page bisa lebih cepat dari biasanya. Cara kerja Lazy Load ini yaitu ketika sebuah halaman kalian akses maka hanya gambar yang tampil dilayar saja yang akan terbuka sedangkan gambar-gambar yang tidak terlihat dilayar tidak akan terbuka sampai kalian melakukan scroll kebawah, hal ini akan mempercepat load page halaman blog dan seperti yang sudah saya katakan tadi ini direkomendasikan oleh google sendiri.

Lazy Load khusus untuk blog ada 2 jenis yang disarankan dan bisa kalian gunakan sekarang juga yaitu Lazy Load untuk Gambar dan Lazy Load untuk iklan Adsense.

Cara Pasang Efek Lazy Load Gambar :

1). Buka dasbor akun blogger kalian

2). Kemudian masuk ke Tema > Edit HTML

3). Pastekan kode script dibawah ini tepat diatas </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(){$(".post img").lazyload({placeholder:"https://2.bp.blogspot.com/-sfHulA4OdIk/WnhzaXJZ9CI/AAAAAAAAACw/wRDXk4QGA5MtSVGkDfKClkDSbcNmIjfegCLcBGAs/s320/LazyLoading.gif",effect:"fadeIn",threshold:"0",effectTime:"2000"})});
//]]>
</script>

4). Simpan tema dan lihathasilnya.

Cara Pasang Efek Lazy Load Iklan Adsense

1). Buka dasbor akun blogger kalian
2). Masuk ke Tema > Edit HTML
3). Hapus semua kode Java script pada semua unit iklan kalian. Kodenya seperti dibawah ini:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

4). Pastekan script dibawah ini tepat diatas </body>

<script type='text/javascript'>
//<![CDATA[
// Lazy Load AdSense
var lazyadsense=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
//]]>
</script>

5). Simpan tema dan lihat hasilnya.

Berbagi :