2 Cara Memasang Lazy Load Gambar Di Blogger Buat Meningkatkan Kecepatan Blog

Cara Memasang Lazy Load Gambar Di Blogger Buat Meningkatkan Kecepatan Blog

Cara Memasang Lazy Load Gambar Di Blogger Untuk Meningkatkan Kecepatan Blog. Setelah beberapa waktu lalu membahas Cara Membuat dan Memasang file Ads.txt di WordPress, kini kita akan membahas Lazy Load untuk menunda request data pada gambar di dalam blog.

Fungsi dari lazy load ini dmana kita akan menunda request data gambar dalam blog selama loading blog dan hanya  bisa dieksekusi ketika loading blog telah selesai & melakukan scrolling dalam browser tadi. Jadi dengan memasang script yang satu ini akan membuat blog kita sebagai fast loading.

Cara Mempercepat Loading Blog Dengan Script Lazy Load Gambar Di Blogspot (Blogger.Com)

Cara Mempercepat Loading Blog Dengan Script Lazy Load Gambar Di Blog

1. Lazy Load Gambar Secara Otomatis

Dengan menggunakan script ini, maka kita tidak perlu repot repot untuk melakukan seleksi data gambar yang ingin di beri perintah lazy load. Sebab script ini secara otomatis akan menyeleksi semua tag gambar <img>.

  • Buka blog kalian dan masuk ke menu “Tema” lalu klik “Edit HTML
  • Copy javascript berikut ini lalu letakkan tepat 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:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>
  • Setelah selesai silahkan klik tombol “Simpan tema“.

Setelah itu silahkan kalian cek sendiri blogmu, apakah script tersebut sudah.

Jika tampilan loading gambar pada blogmu mengalami penundaan maka script tersebut telah bekerja.

2. Lazy Load Gambar Secara Manual Ala Igniel

Berbeda dengan script sebelumnya, script yang satu ini hanya akan berfungsi pada gambar yang diberi class “lazy” dan mengganti src pada tag gambar dengan menambahkan atribut data-src. Untuk lebih lengkapnya silahkan ikuti tutorial berikut.

1. Masuk ke blog, pilih menu “Tema” dan klik “Edit HTML“.

2. Setelah cari kode tag <img> untuk gambar thumbnail blog kalian pada template tersebut.

Setiap template memiliki kode yang berbeda

<img expr_alt='data:post.title' expr_title='data:post.title' expr_src='data:post.firstImageUrl'/>

3. Jika kalian sudah menemukan kode tersebut, silahkan edit seperti ini:

Tambahkan atribut class=’lazy’ kedalam tag <img>

Ubah atributexpr:src menjadi expr:data-src pada tag <img>

Kemudian tambahkan kode ini juga kedalam tag <img>

src=https://1.bp.blogspot.com/-EUMFaJytG6o/XgTgzIvMLbI/AAAAAAAAFEY/5zv84uNt3woAiFOIEwzE4OcoIp7jNpL6wCLcBGAsYHQ/s1600/loadme.gif

Jika sudah selesai, maka hasil akhir dari kode tersebut akan menjadi seperti ini.

<img class='lazy' expr_alt='data:post.title' expr:data-src='data:post.firstImageUrl' expr_title='data:post.title' itemprop='image' src='https://1.bp.blogspot.com/-EUMFaJytG6o/XgTgzIvMLbI/AAAAAAAAFEY/5zv84uNt3woAiFOIEwzE4OcoIp7jNpL6wCLcBGAsYHQ/s1600/loadme.gif'/>

4. Selanjutnya kalian copy kode dibawah ini dan letakkan di atas kode </body> lalu klik tombol “Simpan tema“.

<script type='text/javascript'>//<![CDATA[ function ignielLazyLoad(){eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('u B(){Y(v e=o.1r("B"),t=0;t<e.1q;t++)Q(e[t])&&(e[t].N=e[t].1p("1n-N"))}u Q(e){v t=e.1t();Z t.1x>=0&&t.1w>=0&&t.1v<=(y.1u||o.T.1m)&&t.1k<=(y.1c||o.T.1b)}v b=["\r\m\m\D\G\a\f\c\M\n\p\c\a\f\a\k","\h\f","\r\c\c\r\l\A\D\G\a\f\c","\g\h\r\m","\p\l\k\h\g\g","\V\1a\1e\R\h\f\c\a\f\c\M\h\r\m\a\m","\w\p\a\1l\p\c\k\n\l\c","\r","\1f\w\a\k\L\1j\a\g\a\l\c\h\k\W\g\g","\g\a\f\q\c\A","\w\p\a\k\W\q\a\f\c","\c\a\p\c","\m\h\l\w\F\a\f\c\D\g\a\F\a\f\c","\1i\h\m\L","\l\g\n\l\1g","\p\l\k\h\g\g\1h\h\J","\c\h\J","\q\a\c\S\h\w\f\m\n\f\q\R\g\n\a\f\c\1z\a\l\c","\A\k\a\X","\a\1y\a\l","\q\a\c\D\g\a\F\a\f\c\S\L\1F\m","\p\l\k\h\g\g\U\a\n\q\A\c","\n\f\f\a\k\U\a\n\q\A\c","\J\k\a\G\a\f\c\V\a\X\r\w\g\c","\n\c\a\F"];u I(d,j){y[b[0]]?y[b[0]](d,j):y[b[2]](b[1]+d,j)}I(b[3],B),I(b[4],B),o[b[0]](b[5],u(){b[6];Y(v d=o[b[8]](b[7]),j=d[b[9]],s=/1D|1B/i[b[11]](1G[b[10]])?o[b[12]]:o[b[13]],C=u(d,j,s,C){Z(d/=C/2)<1?s/2*d*d*d+j:s/2*((d-=2)*d*d+2)+j};j--;){d[b[1C]](j)[b[0]](b[14],u(d){v j,E=s[b[15]],x=o[b[1A]](/[^#]+$/[b[19]](1H[b[18]])[0])[b[17]]()[b[16]],z=s[b[1d]]-y[b[1s]],O=z>E+x?x:z-E,K=1o,H=u(d){j=j||d;v x=d-j,z=C(x,E,O,K);s[b[15]]=z,K>x&&P(H)};P(H),d[b[1E]]()})}});',62,106,'||||||||||x65|_0x1b5d|x74|_0xdd48x2||x6E|x6C|x6F||_0xdd48x3|x72|x63|x64|x69|document|x73|x67|x61|_0xdd48x4||function|var|x75|_0xdd48x7|window|_0xdd48x8|x68|lazy|_0xdd48x5|x45|_0xdd48x6|x6D|x76|_0xdd48xb|registerListener|x70|_0xdd48xa|x79|x4C|src|_0xdd48x9|requestAnimationFrame|isInViewport|x43|x42|documentElement|x48|x44|x41|x66|for|return|||||||||||x4F|clientWidth|innerWidth|21|x4D|x71|x6B|x54|x62|x53|left|x20|clientHeight|data|900|getAttribute|length|getElementsByClassName|22|getBoundingClientRect|innerHeight|top|right|bottom|x78|x52|20|trident|24|firefox|23|x49|navigator|this'.split('|'),0,{}));} eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('j 4=["\7\9\9\e\d\a\b\8\i\g\h\8\a\b\a\k","\f\c\7\9","\7\8\8\7\m\l\e\d\a\b\8","\c\b\f\c\7\9"];5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;',23,23,'||||_0xdfb4|window|ignielLazyLoad|x61|x74|x64|x65|x6E|x6F|x76|x45|x6C|x69|x73|x4C|var|x72|x68|x63'.split('|'),0,{})); //]]></script>

Setelah itu silahkan cek blog Anda buat memastikannya. Anda juga bisa menggunakan tool khusus untuk test kecepatan blog kalian di GTMetrix dan Pagespeed Insight.

Script ini tidak hanya untuk dipakai pada gambar thumbnail blog saja, tetapi Anda juga bisa menggunakannya pada popular post dan juga featured post. Untuk pengaplikasiannya juga sama seperti yang sudah dijelaskan diatas.

About the Author: Andi Setiawan

1 Comment

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

error: Content is protected !!