Cara Mempercepat Loading Blog: Memasang jQuery Lazy Load

Romeltea | Follow @romel_tea
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.

Cara Memasang jQuery Lazy Load untuk Mempercepat Loading Blog.


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://lh5.googleusercontent.com/-20YhsQ_Xw9Y/UjHQlUIi0UI/AAAAAAAAGIo/6_etIYcweEQ/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).*

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Blogger from Bandung, Jawa Barat, Indonesia. Follow me: facebook twitter instagram twitter youtube

Recommended Posts

No comments on Cara Mempercepat Loading Blog: Memasang jQuery Lazy Load

Post a Comment

No Spam, Please!

Contact Form

Name

Email *

Message *