Mempercepat Blog : Memasang Lazy Load Gambar on Scroll

Mempercepat Blog : Memasang Lazy Load Gambar - SusahTidur - Halo sobat SusahTidur, pada kesempatan kali ini saya akan membagikan sebuah tutorial tentang Cara Mempercepat Blog : Memasang Lazy Load Gambar di blog. 

Apa itu Lazy Load Gambar? Lazy Load Image atau Malas Memuat Gambar ( Translate google haha ) adalah salah satu langkah untuk mempercepat kecepatan muat blog sobat. Kenapa bisa begitu? ya karena cara kerja Lazy Load ini sebelum digulir menunda muat halaman dulu, baru setelahnya digulir akan memuat file gambar tersebut.

Jadi muatnya gantian, dan sebelum gambar tersebut tertangkap oleh layar tetap belum di muat. Contoh nih kalian gulir ke bawah blog SusahTidur, gambar yang dulu dimuat yang paling atas dulu atau yang pas di layar kan dan yang lain belum ke muat kan? nah itu yang saya maksud.

Jadi ini pas untuk kalian pemuja nilai skor  Pageinsight maupun YSlow di GTmetrix. Tutorial ini cukup membingungkan bagi kalian yang masih awam dengan HTML, jika sobat masih kebingungan dalam pemasangan Lazy Load ini silahkan bertanya dan simak baik-baik berikut tutorialnya.

Mempercepat Blog : Memasang Lazy Load Gambar

1. Masuk Dashboard Blogger sobat
2. Masuk Tema > Edit HTML
3. Cari kode tag HTML image <img> merupakan kode gambar thumbnail blog. dibeberapa template mempunyai kode yang berbeda beda, sebagai contoh berikut kode dari template saya.

   <img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 420, &quot;300:200&quot;)' expr:title='data:post.title' />

   Pasti punya sobat mirip-mirip dengan kode tag img di atas
   
4. Lalu setelah sobat mencari <img> nanti akan muncul kode tag seperti di atas ada lebih dari satu, silahkan edit dan tambahkan kode berikut kedalam tag image-nya

   
   • class='lazy'
   • ubah expr:src menjadi expr:data-src
   • dan tambahkan src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=
   "

   lalu akan menjadi seperti ini
   Sebelum

   <img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 420, &quot;300:200&quot;)' expr:title='data:post.title' />

   Sesudah

   <img class="lazy" expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 420, &quot;300:200&quot;)' expr:title='data:post.title' src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />

5. Belum selesai ya, ini penting gunanya untuk menjalankan kode yang kita ubah tadi biar berjalan normal. Memasang Script Lazy Load, letakkan Script di bawah ini tepat di atas kode </body> 

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

6. Kemudian simpan Tema

Baiklah selesai sudah tutorial Cara Mempercepat Blog : Memasang Lazy Load Gambar di blog. Jika sobat masih kebingungan dalam pemasangan kode Lazy Load di atas silahkan bertanya di kolom komentar. Sekian dan terimakasih telah berkunjung ke SusahTidur.

"Mempercepat Blog : Memasang Lazy Load Gambar on Scroll"

Bagikan