Cara Mempercepat Loading Blog: Memasang jQuery Lazy Load

Baca Juga

Kecepatan tampilan halaman (page speed) merupakan faktor SEO penting untuk peringkat atas halaman Google. Mesin telusur menyukai blog yang tampil cepat (fast loading). Demikian pula pengunjung.

Salah satu cara untuk mempercepat loading blog adalah memasang kode jQuery Lazy Load.

Lazy Load adalah penundaan pemuatan gambar di halaman web/blog yang panjang. Gambar di luar viewport tidak dimuat sampai pengguna menggulir ke sana.

Menggunakan Lazy Load pada halaman web yang panjang akan membuat halaman memuat lebih cepat. Dalam beberapa kasus ini juga dapat membantu mengurangi beban server.

Secara harfiyah, Lazy Load artinya "malas tampil". Kalo kita mah "mager" (malas gerak) :)

Jadi, denan adanya kode jQuery Lazy Load ini, foto atau gambar, yang menjadi salah satu faktor yang melambatkan loading, akan "malas tampil" hingga halaman discroll ke bawah. Si gambar baru nongol.

Template premium atau template seo friendly biasanya sudah dipasangi kode jQuery Lazy Load. Cek aja. Jika belum ada, pasang saja. Mudah kok pasangnya.

Cara Memasang jQuery untuk Mempercepat Loading Blog

1. Tema > Edit HTML
2. Copas kode berikut ini di atas kode </body>

<script type='text/javascript'>//<![CDATA[
(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/AVvXsEjcK1ZsJk-jCua9sKt4JXTlTfj97vz_hzk-WWjI33fVU9A65WfzsPpQneUiXLm8CdygzjpdChD4sYrgfZLMq9mUuSRB2h3QcS9Se8m08iVD4IMcnM2CtoNHDKHmDb-obJdCckDgtfksBLw/h120/lazy+image.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

3. Save! Simpan template.

Beres. Kode jQuery Lazy Load untuk Mempercepat Loading Blog sudah terpasang. Wasalam. (blogromeltea.blogspot.com).*