Cara Mempercepat Tampilan Blog Menggunakan Kode Script Lazy Load

Baca Juga

Cara Membuat Blog Menjadi Ringan dan Cepat Tampil (Fast Loading) Menggunakan Kode Lazy Load

Menjadikan blog jadi lebih ringan atau tampil cepat (fast loading) merupakan bagian dari pengoptimalan mesin telurus (Seach Engine Optimization/SEO). Loading cepat merupakan salah satu dari tiga faktor SEO peringkat atas.

Salah satu cara mempercepat loading blog adalah dengan memasang atau  menggunakan kode script Lazy Load di template.

Kode Lazy Load ini  mempercepat loading blog karena membidik tampilan gambar (image/foto) yang menjadi salah satu faktor yang mempengaruhi kecepatan loading blog.

"Lazy Load menunda pemuatan gambar dalam halaman web yang panjang. Gambar di luar area pandang tidak akan dimuat sebelum pengguna menggulirkannya. Ini berlawanan dengan preloading gambar," tulis NPM JS.

"Menggunakan Lazy Load pada halaman web panjang yang berisi banyak gambar besar membuat pemuatan halaman lebih cepat. Browser akan dalam status ready setelah memuat gambar yang terlihat. Dalam beberapa kasus, ini juga dapat membantu mengurangi beban server."

Intinya, dengan kode Lazy Load ini, tampilan gambar dioptimalkan menjadi lebih efektif dan efisien. Gambar di bagian bawah halaman baru akan muncul setelah halaman blog discroll ke bawah.

Namun, harus diperhatikan juga kekurangan kode Lazy Load ini, yaitu jika di postingan blog memiliki lebih dari empat gambar, maka Lazy Load biasanya hanya akan menampilkan 2-3 gambar saja.

Cara Memasangan Kode Lazy Load di Blogger

1. Tema > Edit HTML
2. Copas kode lazy load untuk percepat loading blog berikut ini di atas kode </body> atau </head>

Kode Lazy Loads

<span style='font-family: verdana, geneva, sans-serif;'>
<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:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script></span>

3. Save! 
Simpan template.

Silakan buka blog Anda, maka tampilan atau loadingnya akan lebih cepat.

Untuk blog selfhosted CMS Wordpress, tinggal pasang Plugin Lazy Load untuk mempercepat tampilan blog.

Demikian Cara Mempercepat Tampilan Blog Menggunakan Kode Script Lazy Load.

Cara lain membuat blog fast loading a.l. dengan mengurangi pemasangan kode script dan mengoptimalkan ukuran gambar yang diupload. Template Blog yang sudah Fast Loading sekalipun, jika ditambah script dan gambarnya berukuran besar, akan melambat.

Good Luck and Happy Blogging! (www.contohblog.com).*