Skip to content Skip to sidebar Skip to footer
Home / Lazyload Gambar / mempercepat website / script lazyload gambar

Cara Mempercepat Website dengan Lazyload Gambar

Post a Comment
mempercepat blogger,mempercepat website,mempercantik blog,cara mempercepat loading blogger,mempercepat website wordpress
Contoh Website dengan Lazyload Gambar

Ini adalah contoh website yang memakai lazylod gambar, tentunya kalian para blogger santuy mau dong website nya secepat amyusup.eu.org yang kualitasnya lumayan lah ga jelek jelek amat. walaupun masih amatiran hehe.

Penjelasan Tentang Lazyload Gambar


Salam blogger santuy, kali ini ane akan membahas tentang Lazyload Gambar, apa itu lazyload gambar, bagaimana cara memasang lazyload gambar, nanti kita akan bahas disini. 

Gambar faktor utama yang paling penting dalam mempengaruhi kecepatan website, ntah itu sebuah spanduk, simbol, atau gambar produk marketing atau thumbnail. Apa yang terjadi bila satu website tidak mempunyai gambar? tentu tak pernah terpikirkan mengenai itu.

Sayang seribu kali sayang, gambar dalam ukuran besar sebagai factor utama yang memengaruhi kecepatan pada website itu. Langkah kerja script ini hampir sama dengan Lazy Load Adsense, karena gambar itu ada di penampilan awalnya pada halaman.

Penejelasan Singkat Mengenai Cache 


Saat kalian mengunjungi pertama kali web, browser akan lakukan beberapa keinginan untuk mendownload semua content dari website. Baiknya, semua file barusan diletakkan dalam cache browser sang pengunjung. Supaya saat ia kembali berkunjung website kamu, semua file dapat diambil langsung dari cache browser. Ini terang akan memudahkan loading website, karena browser tidak perlu terus menerus request file-nya ke server. Berapa lama waktunya cache itu diletakkan di browser dapat kamu mengatur sendiri. Beberapa macam file yang penting di data cache-nya diantaranya:

  • Gambar: jpg, gif, png
  • Favicon/ico
  • Javascript
  • CSS

Itu baiknya ya. Dan itu cuma dapat dilaksanakan di website atau web yang mempunyai hosting sendiri (self-hosted).

Karena kita blogger santuy yang statusnya hanya numpang hosting gratis dari google, kita NGGAK BISA mengatur expires header itu untuk mengatur cache browser. Karena itu setiap pengunjung buka website kamu, browser langsung akan mendownload ulangi semua file langsung dari server. Karena itu waktu pintas yang dibutuhkan untuk tampilkan halaman website jadi lebih lama. 

Tapi dont hariwang. Kamu dapat pakai script lazy load gambar untuk Blogger untuk menangani permasalahan expires header. Dampak yang lain, page speed jadi bertambah dan loading website menjadi lebih cepat. Yok langsung saja ke scriptnya.


Apa Itu Script Lazy Load Gambar ?


Script Lazy Load Gambar adalah Sebuah script yang hendak tunda panggilan file saat sebelum dilakukan aktivitas tertentu. Untuk script Lazy Load Gambar Blogger di artikel ini, panggilan file akan diundur saat sebelum ada aktivitas scroll halaman. 

Fungsi dari Lazyload Gambar itu sendiri adalah untuk menunda pemuatan data dalam website secara menyeluruh. sesuai namanya Lazy Load ( Pemuatan yang malas) bukan karena malas tidak mau bekerja tapi malas untuk ngirit bandwich pada website kita sehingga bandwich website kita tidak cepat habis karena itulah website kita sering ngeload.

Kenapa Lazy Load Gambar?

Lazy Load Gambar bisa batasi pemuatan gambar yang tidak dibutuhkan di halaman awalnya. Sebuah gambar yang tidak kelihatan oleh pemakai saat halaman termuat, akan termuat kelak saat pemakai menggulir(scroll). Bila pemakai tak pernah menggulir, gambar yang tidak kelihatan oleh pemakai tidak pernah termuat.

Langkah-langkah Memasangkan Script Lazy Load di Blogspot


  • Masuk pada menu Theme, lalu tentukan Ubah HTML.
  • Mencari code tag HTML gambar
  • yang disebut code dari thumbnail website. Setiap template tentu berlainan, jadi saya contohkan code thumbnail dari template saya. Untuk kamu, mencari sendiri ya kodenya. Tentu mirip-mirip.
  • Sudah bertemu?
  • Tambah class='lazy' pada tag image-nya.
  • Ganti expr:src jadi expr:data-src.

  • Tambah src dan value-nya berisi 

Hingga hasilnya jadi semacam ini:


<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='/>


Kalau kamu memakai tema Linkmagz karya mas sugeng maka kamu tidak perlu menambahkan script di atas karena sudah dibuatkan langsung oleh mas sugeng, kamu langsung saja ke step selanjutnya yaitu memasang script lazyload gambar dibawah ini.

 

Langsung pasangkan saja scriptnya di bagian atas </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>


Jangan lupa save dan langsung cek kecepatan nya di gtmatrix  

Semoga permasalahan tentang loading website kalian para blogger santuy teratasi. ini baru lazyload gambar masih ada lagi lazyload untuk adsense, youtube dan lain lain. 

Terimakasih telah berkunjung, salam blogger santuy

Post a Comment for "Cara Mempercepat Website dengan Lazyload Gambar"