Cara Mempercepat Tampilan Blog Menggunakan Kode Script Lazy Load Cara Mempercepat Tampilan Blog Menggunakan Kode Script Lazy Load
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 bab dari pengoptimalan mesin telurus (tiga faktor SEO peringkat atas.

Salah satu cara mempercepat loading blog ialah dengan memasang atau  memakai isyarat script Lazy Load di template.

Kode Lazy Load ini  mempercepat loading blog alasannya ialah membidik tampilan gambar (image/foto) yang menjadi salah satu faktor yang menghipnotis 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 menciptakan pemuatan halaman lebih cepat. Browser akan dalam status ready sesudah memuat gambar yang terlihat. Dalam beberapa kasus, ini juga sanggup membantu mengurangi beban server."

Intinya, dengan isyarat Lazy Load ini, tampilan gambar dioptimalkan menjadi lebih efektif dan efisien. Gambar di bab bawah halaman gres akan muncul sesudah halaman blog discroll ke bawah.

Namun, harus diperhatikan juga kekurangan isyarat Lazy Load ini, yaitu bila di postingan blog mempunyai 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 isyarat lazy load untuk percepat loading blog berikut ini di atas isyarat </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:"idtutorial.com/search?q=3-penentu-utama-peringkat-blog-di-google" rel="nofollow" target="_blank">Template Blog yang sudah Fast Loading sekalipun, bila ditambah script dan gambarnya berukuran besar, akan melambat.

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

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours