Jumat, 03 Januari 2020

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

Your Ads Here

2 Cara Memasang Lazy Load Gambar Di Blogger Untuk Meningkatkan Kecepatan Blog
Javaziana.com
Your Ads Here

Cara Memasang Lazy Load Gambar Di Blogger Untuk Meningkatkan Kecepatan Blog. Setelah membahas Cara Mempercepat Loading Iklan Adsense Meggunakan Script Lazy Load, kini kita akan membahas Lazy Load untuk menunda request data pada gambar di dalam blog.

Fungsi dari lazy load ini akan menunda request data gambar pada blog selama loading blog dan hanya diekseskusi pada saat loading blog sudah selesai dan melakukan scrolling pada browser tersebut. Jadi dengan memasang script yang satu ini akan membuat blog kita menjadi 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

A. 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>.

1. Buka blog kalian dan masuk ke menu "Tema" lalu klik "Edit HTML"
2. 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>

3. 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.
Baca juga:

B. 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 atribut expr:src menjadi expr:data-src pada tag <img>
Kemudian tambahkan kode ini juga kedalam tag <img>
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi85ldPhBCn8ub4Ju-lNwzA1epcs_2Fl5fRST6g1rXovjAPKU-DSSJCpb4BFkG2MTTHYazTNvCROej1DrMfgDQFPlgz89gssV5PCtlIFbzjG9oODBs1434yrum9ay3d6WCI5rgnk5kUbtbT/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi85ldPhBCn8ub4Ju-lNwzA1epcs_2Fl5fRST6g1rXovjAPKU-DSSJCpb4BFkG2MTTHYazTNvCROej1DrMfgDQFPlgz89gssV5PCtlIFbzjG9oODBs1434yrum9ay3d6WCI5rgnk5kUbtbT/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 blogmu untuk memastikannya. Kalian juga bisa menggunajan tool khusus untuk test kecepatan blog kalian di GTMetrix dan Pagespeed Insight

Script ini tidak hanya untuk dipakai ada gambar thumbnail blog saja, melainkan kita juga dapat menggunakannya pada popular post dan juga featured post. Untuk pengaplikasiannya juga sama seperti di atas.

Blog ini adalah tempat untuk penyedia berbagai macam tutorial, tips, dan info menarik lainnya. Admin berharap pengunjung dapat lebih mudah mencari apa yang di inginkan dan mendapatkan informasi yang menarik di blog ini.