Tutorial Memasang Lazy Load Gambar Di Blogger Untuk Meningkatkan Kecepatan Blog

Tutorial Memasang Lazy Load Gambar Di Blogger Untuk Meningkatkan Kecepatan Blog

Lazy Load adalah sebuah plugin yang memungkinkan Blog Anda lebih cepat melakukan loading dibandingkan sebelum menggunakan lazy load. Awalnya lazy load hanya diperuntukkan untuk WordPress tetapi lama kelamaan lazy load sudah tersedia untuk para blogger. Lazy load hanya berfungsi untuk akses yang dicari saja, jadi dia tidak memberatkan beban dengan terjadinya loading yang terlalu lama.


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


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.

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://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 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.

Semoga Bermanfaat 
Tutorial

NULIS ARTIKEL DIJOKIJENIUS DIBAYAR

  • ARTKEL YANG DITULIS ASLI BUATAN SENDIRI
  • JENIS ARTIKEL YANG DITULIS BELUM PASARAN
  • JUMLAH KATA DALAM ARTIKEL MINIMAL 700 KATA
  • SATU ARTIKEL KAMI HARGAI 10.000

6 Responses to "Tutorial Memasang Lazy Load Gambar Di Blogger Untuk Meningkatkan Kecepatan Blog"

  1. Gan, bedanya lady load dengan AMP apa?

    ReplyDelete
  2. thanks scriptnya gan, tapi apa bisa di pasang pada artikel yang telah di pasang ads?

    ReplyDelete
  3. Ternyata itu fungsi dari lazy load, sangat membantu blog kita juga sih dalam proses pembukaan artikel

    ReplyDelete
Catatan Untuk Para Jejaker
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel