Cara Mempercepat Loading Blog Dengan Lazy Load Gambar

Jika kalian menemukan suatu blog atau website yang kecepatan loadingnya sangat lemot atau lelet, pasti kalian akan sangat kesal dan langsung beralih ke blog atau website yang lain.

Pasti blog atau website tersebut akan sepi pengunjung karena si pengunjung dibuat kesal terhadap loading blog tersebut. Pasti para blogger tidak mau itu semua terjadi gara-gara masalah loading blog doang. Jangan sampai itu terjadi kepada kita semua:). 

Loading blog juga sangat berpengaruh kepada SEO blog kita. Jika loading blog lemot maka kemungkinan besar blog kalian tidak akan SEO friendly.

Sebenarnya ada banyak cara untuk mempercepat loading blog. Namun di artikel kali ini saya akan share tutorial cara mempercepat loading blog dengan cara memasang script lazy load.

Ada salah satu cara untuk mempercepat loading blog, yaitu dengan cara memasang script lazy load gambar di blog kalian.

Apa itu lazy load gambar?, Lazy load gambar merupakan sebuah script untuk menyembunyikan gambar sementara, gambar akan muncul ketika si pengunjung mengscroll halaman blog kalian.

Jadi lazy load gambar memiliki fungsi untuk mempercepat loading blog dengan cara menyembunyikan gambar sementara dan gambar akan muncul ketika si pengunjung mengscroll halaman blog.

Bagaimana sih cara memasang script lazy load gambar?

Caranya tergolong sangat mudah. Kalian tinggal menambahkan script lazy load yang ada di bawah tepat diatas kode </body>.

Cara Membuat Lazy Load Gambar di Blog

1. Kalian login terlebih dahulu ke akun blogger kalian.

2. Jika kalian sudah masuk ke dashboard blog kalian, kalian klik "Tema" >> "Edit HTML".

3. Jika sudah kalian klik, kalian lanjut ke tahapan yang ketiga dengan cara mencari code </body> . Gunakan CTRL-F untuk mencari dengan cepat.

4. Jika sudah ketemu kodenya, kalian copy script dibawah ini kemudian kalian pastekan tepat diatas kode </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(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZT7zGg61MZ9DP-tKX9VpNHXwhDw7DZsW-R9q1XKF21wShIpfQNT8OXwU_XSf7SzyLBVXPAYy6YWS0_cWpYyhBFBLDMU2hCYaZDfh64mhBpcrZqubFnm0-hELcR_8NcZEvYzNQp0bVR36w/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

5. Jika sudah kalian paste, kalian klik saja "Simpan".

Sampai disini kalian sudah berhasil membuat blog kalian semakin kencang dengan cara memasang script lazy load gambar di blog kalian.

Untuk cara mempercepat loading blog lainnya akan saya share di artikel selanjutnya. Terimakasih sudah berkunjung ke blog saya :).

Share this post