Cara Membuat Lazy Load Image Agar Mempercepat Loading Blog

www.azid45.web.id - Cara Membuat Lazy Load Image Agar Mempercepat Loading Blog. Assalamualaikum.wr.wb, pada kesempatan kali ini saya akan share pengalaman saya tentang lazy load. Mungkin blog terkenal seperti kode jarwo, kompi ajaib dan arlina design sudah banyak paham mengenai lazy load. Dari keterangannya, lazy load merupakan script agar image atau gambar tampil ketika discroll, hal ini dapat mempercepat loading blog karena image tidak akan terindeks oleh alat untuk tes kecepatan blog. Biasanya test yang digunakan adalah dengan PageSpeed Insights. Terus bagaimana cara memasang lazy load diblog kita?. Sebenarnya cara melakukannya sangatlah mudah namun perlu diingat kita harus teliti dalam memasukkan kode pemanggil script lazy load.

Ok. Langsung saja, adapun cara membuat lazy load saya memiliki dua cara model, yaitu  model yang saya ambil dari blognya bang jarwo dan model dari kak igniel. Secara aplikatif kedua model ini secara umum sama, namun dari pengalaman saya ada sedikit perbedaan kalau milik bang jarwo lebih ringan dan ada segi kelemahan menurut saya yaitu ketika tidak layar yang terlihat ada gambar maka gambar tersebut tetap terindeks. Adapun milik kak igniel perbedaannya scriptnya telah di decode dan agak berat menurut saya. Tetapi itu bukanlah masalah, yang penting blog kita menjadi lebih fast loading dan mengurangi masalah optimize image.

Model Pertama: Milik Bang Jarwo

Langkah pertama yang harus kita lakukan adalah masuk di edit HTML. Caranya teman-teman tinggal klik theme/ Tema pada menu blog dan pilih edit HTML. Langkah Selanjutnya adalah mencari kode </body> atau &lt;/body&gt;. Untuk mempermudah mencarinya,  teman-teman bisa menggunakan control+F dan ketikkan /body, setelah ketemu copy kode berikut dan pastekan tepat diatas kode </body> atau &lt;/body&gt;

<script>//<![CDATA[
this['eval'](';)daoLyzal,\"llorcs\"(renetsiLretsiger,)daoLyzal,\"daol\"(renetsiLretsiger})t,e+\"no\"(tnevEhcatta.wodniw:)t,e(renetsiLtnevEdda.wodniw?renetsiLtnevEdda.wodniw{)t,e(renetsiLretsiger noitcnuf})htdiWtneilc.tnemelEtnemucod.tnemucod||htdiWrenni.wodniw(=<tfel.t&&)thgieHtneilc.tnemelEtnemucod.tnemucod||thgieHrenni.wodniw(=<pot.t&&0=>thgir.t&&0=>mottob.t nruter;)(tceRtneilCgnidnuoBteg.e=t rav{)e(tropweiVnIsi noitcnuf}))\"crs-atad\"(etubirttAteg.]t[e=crs.]t[e(&&)]t[e(tropweiVnIsi)++t;htgnel.e<t;0=t,)\"yzal\"(emaNssalCyBstnemelEteg.tnemucod=e rav(rof{)(daoLyzal noitcnuf'['split']('')['reverse']()['join'](''));

function myFunction() {
    var y = document.getElementById("body");
    var x = document.getElementById("drop");
    var z = document.getElementById("nav");
    if (x.checked) {
        y.style.overflow = "hidden";
        z.style.height = "100%";
//        y.style.height = "99%";
    } else {
        y.style.overflow = "auto";
        z.style.height = "0px";
//        y.style.height = "auto";
    }
} 

//]]></script>

Untuk berjaga-jaga agar tidak terjadi error, simpan terlebih dahulu dan refresh dengan menekan tombol F5.

Menuju langkah berikutnya, kita harus memasukkan kode lazy ke script yang berawalan <img .......>. Cari kode tersebut dengan ctrl+F dan tambahkan kode class='lazy' dan ubah src='.........' menjadi data-src='' serta tambahkan src=''. Untuk lebih jelasnya, lihat contoh berikut;

<img expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 225, "225:170")'/>

Menjadi

 <img class='lazy' expr:alt='data:post.title' expr:title='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 225, "225:170")' src=''/>

atau

 <img alt='data:post.title' title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDI2pt-9h16hb4FMwD83eGbNkyCfOQnfeFvtX_k0VWrOSJ_h26ZRt9vutCh-Hgl_KG8zfdSEL843K-aeEzFYq9vrTOsJyz9oxQGXWcMS8PyuOcdoL_vHBLH5_aMOPbPd48OJPi6SVnkT5/w250/5-jenis-generasi-perkembangan-manusia.jpg' width='300' height='100'/>

Menjadi

 <img class='lazy' alt='data:post.title' title='data:post.title' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDI2pt-9h16hb4FMwD83eGbNkyCfOQnfeFvtX_k0VWrOSJ_h26ZRt9vutCh-Hgl_KG8zfdSEL843K-aeEzFYq9vrTOsJyz9oxQGXWcMS8PyuOcdoL_vHBLH5_aMOPbPd48OJPi6SVnkT5/w250/5-jenis-generasi-perkembangan-manusia.jpg' width='300' height='100' src=''/>

Jika teman-teman menemukan setelah <img ..... sudah terdapat class='....' maka cukup menambahkan lazy setelahnya, contoh;

<img class='tumbhnail' expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 225, "225:170")'/>

Menjadi

<img class='tumbhnail lazy' expr:alt='data:post.title' expr:title='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 225, "225:170")' src=''/>

Setelah itu save template teman-teman, dan cek kecepatan blog teman-teman di PageSpeed Insights.

Model Kedua: Milik Kak Igniel

Caranya tetap sama, letakkan script berikut tepat diatas kode </body> atau &lt;/body&gt;

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

Seperti tadi, untuk berjaga-jaga agar tidak error simpan terlebih dahulu dan tekan F5 untuk refresh.

Menuju langkah berikutnya, kita harus memasukkan kode lazy ke script yang berawalan <img .......> seperti pada model yang pertama. Cari kode tersebut dengan ctrl+F dan tambahkan kode class='lazy' dan ubah src='.........' menjadi data-src='' serta tambahkan src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' Kalau pada model pertama hanya src='' untuk model yang kedua ini harus ditambahi "data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" . Untuk lebih jelasnya, lihat contoh berikut;

<img expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 225, "225:170")'/>

Menjadi

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

atau

 <img alt='data:post.title' title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDI2pt-9h16hb4FMwD83eGbNkyCfOQnfeFvtX_k0VWrOSJ_h26ZRt9vutCh-Hgl_KG8zfdSEL843K-aeEzFYq9vrTOsJyz9oxQGXWcMS8PyuOcdoL_vHBLH5_aMOPbPd48OJPi6SVnkT5/w250/5-jenis-generasi-perkembangan-manusia.jpg' width='300' height='100'/>

Menjadi

 <img class='lazy' alt='data:post.title' title='data:post.title' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDI2pt-9h16hb4FMwD83eGbNkyCfOQnfeFvtX_k0VWrOSJ_h26ZRt9vutCh-Hgl_KG8zfdSEL843K-aeEzFYq9vrTOsJyz9oxQGXWcMS8PyuOcdoL_vHBLH5_aMOPbPd48OJPi6SVnkT5/w250/5-jenis-generasi-perkembangan-manusia.jpg' width='300' height='100' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Jika teman-teman menemukan setelah <img ..... sudah terdapat class='....' maka cukup menambahkan lazy setelahnya, contoh;

<img class='tumbhnail' expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 225, "225:170")'/>

Menjadi

 <img class='tumbhnail lazy' expr:alt='data:post.title' expr:title='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 225, "225:170")' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Setelah itu, simpan template blog teman-teman dan ujilah dengan PageSpeed Insights. Demikianlah Tutorial Cara Membuat Lazy Load Image Agar Mempercepat Loading Blog. Semoga ada penambahan kecepatan, dan permasalahan optimize images sudah tidak ada lagi. Amin.