Cara Mudah Pasang Lazy Load Image dan Loading Slash di Blog Responsive

Aslori.com - Cara Mudah Memasang Lazy Load Image dan Animasi Slash di Blogger - Mengenai masalah terhadap Expires Header atau Laverage Browser Caching merupakan sudah menjadi persoalan umum bagi para pengguna blogger. Karena soal mengatasi hal tersebut bisa di bilang cukup sulit teman-teman, Meskipun masalahnya bisa kamu atasi menggunakan Lazy Load. Expires Header ini mengenai dan mengatur cache pada browser default. Sebelum lanjut ke tutorial Pasang Lazy Load Image dan Loading Slash di Blog, Saya akan membahas terlebih dahulu mengenai Apa Itu Cache ?

Apa Itu Cache ?

Cache Anda pernah mendengar kata cache sebelumnya, tetapi tidak tahu persis apa artinya dalam konteks Web. Dalam bahasa umum, caching berarti menempatkan sesuatu dalam penyimpanan (biasanya secara rahasia) dengan kemungkinan bahwa itu akan berguna nanti (mis. Cache senjata). Peramban atau cache Web melakukan hal itu, kecuali dengan aset program dan situs web. Ketika Anda mengunjungi situs web, browser Anda mengambil beberapa halaman dan menyimpannya di hard drive komputer Anda. Beberapa aset yang akan disimpan oleh browser Anda adalah:

• Images - logos, pictures, backgrounds, etc.
• HTML
• CSS
• JavaScript

Singkatnya, browser biasanya menyimpan apa yang dikenal sebagai "aset statis" - bagian dari situs web yang tidak berubah dari kunjungan ke kunjungan.
Apa yang di-cache dan berapa lama ditentukan oleh situs web. Beberapa aset dihapus dari mesin Anda dalam beberapa hari sementara yang lain mungkin tetap dalam cache Anda hingga satu tahun.
Ketika banyak orang mendengar bahwa situs web menyimpan aset di mesin mereka tanpa sepengetahuan atau izin mereka, mereka menjadi sedikit gugup. Bagaimanapun, kami menaruh kepercayaan besar pada pengembang Web, berharap mereka tidak akan merusak atau merusak perangkat kami.
Manfaat caching peramban jauh lebih besar daripada risikonya. Hanya firewall yang bagus, pemindai virus, dan akal sehat yang Anda perlukan untuk menjaga keamanan mesin Anda.

Manfaat caching

Saat Anda mengunjungi situs web untuk pertama kalinya, peramban Anda melakukan percakapan dengan server jarak jauh yang menghosting situs tersebut. Browser Anda mengirimkan permintaan, dan server mengirimkan kembali salah satu aset situs web. Halaman HTML adalah yang pertama untuk diunduh dan itu menjadi cetak biru yang digunakan situs tersebut. Saat browser Anda membaca kode HTML, ia mengirimkan lebih banyak permintaan ke server untuk mengirim lebih banyak halaman, kebanyakan aset statis yang disebutkan di atas.
Proses ini memakan bandwidth. Beberapa halaman Web akan membutuhkan banyak waktu untuk mengunduh sepenuhnya dan menjadi fungsional karena mereka memiliki banyak bagian atau aset mereka besar.
Misalnya, Anda mungkin memperhatikan bahwa ketika Anda pertama kali membuka halaman Web, teks muncul sebelum gambar. Itu karena teks kecil dan membutuhkan sedikit waktu untuk mengunduh, sedangkan gambar berkualitas tinggi mungkin membutuhkan beberapa detik (keabadian dalam waktu komputasi) untuk diisi.
Caching meningkatkan dan mempercepat penelusuran. Setelah Anda mengunduh aset, aset itu hidup (untuk sementara waktu) di mesin Anda. Mengambil file dari hard drive Anda akan selalu lebih cepat daripada mengambilnya dari server jarak jauh, tidak peduli seberapa cepat koneksi Internet Anda.
Ambil situs e-niaga yang khas. Aset tertentu, seperti logo, akan muncul di setiap halaman di lokasi yang sama persis di mana pun Anda berada di situs. Tanpa caching, mesin Anda harus mengunduh logo itu setiap kali Anda mengklik halaman produk baru.
Seiring dengan gambar besar, situs kompleks menggunakan file JavaScript besar - diperlukan untuk aplikasi seperti keranjang belanja, gambar interaktif dan daftar keinginan. Bayangkan bagaimana tingkat konversi akan berdampak negatif jika pengguna harus menunggu lima hingga sepuluh detik untuk tombol "Beli Sekarang" muncul di bawah produk. Pengalaman menjelajah yang cepat dan lancar sangat penting untuk membuat pelanggan merasa nyaman dan mendorong konversi. Selain itu, saat berikutnya Anda mengunjungi situs e-commerce yang di-cache, aset itu masih akan tersedia di perangkat Anda untuk pemuatan yang lebih cepat.
Perangkat seluler seringkali dibatasi oleh bandwidth. Beberapa paket data seluler juga memiliki batas bandwidth atau biaya. Semakin sedikit pengguna harus mengunduh situs web, semakin baik bagi mereka.

Beberapa Jebakan

Anda telah mengaktifkan caching aset untuk situs web Anda. Keesokan harinya, Anda memutuskan untuk mengubah warna logo Anda. Anda menukar logo lama dengan yang baru dan memeriksa situs web langsung Anda untuk melihat tampilannya. Namun logo lama masih ada.
Dengan asumsi Anda menyelesaikan pertukaran gambar dengan benar, masalahnya biasanya caching.
Mesin Anda memiliki versi cache dari logo Anda di hard drive. Tidak pernah repot untuk meminta unduhan gambar baru. Karenanya, mesin Anda tidak akan mendapatkan logo baru sampai file cache yang ada di tangannya kadaluwarsa.
Versi lama dari file yang di-cache menyebabkan segala macam masalah bagi pengguna jika perangkat mereka tidak memiliki versi terbaru dari file - pemformatan yang tidak cocok, JavaScript yang rusak dan gambar yang salah hanya beberapa.
Sebagian besar, ini tidak terjadi karena server tahu aset mana yang telah diperbarui dan perlu diganti pada mesin pengguna. Namun, jika salah satu pelanggan Anda mengeluh bahwa situs ini rusak untuk mereka dan tidak ada orang lain, maka Anda harus menyarankan mereka untuk menghapus cache browser mereka.
Semua browser utama memiliki tombol "hapus cache". Beberapa lebih mudah ditemukan daripada yang lain. Menekan tombol itu akan menghapus semua file dalam cache Anda. Cobalah. Kunjungi halaman yang sering Anda kunjungi dan catat berapa lama waktu yang diperlukan untuk memuat. Bersihkan cache Anda. Kunjungi halaman lagi dan catat berapa lama waktu yang dibutuhkan untuk memuat halaman.
Browser juga memungkinkan Anda untuk menghapus cache hanya untuk situs web tertentu. Jika hanya satu situs web yang mengalami masalah caching, bersihkan situs yang bermasalah dan biarkan situs web Anda yang lain tetap menjaga penelusuran Anda lancar dan lancar.

Apa Itu Lazy Load Image/Gambar ?

Lazy Load Image Adalah Merupakan script yang berfungsi untuk menunda pemanggilan file sebelum di lakukan selama proses loading pada blog berlangsung. Jadi script tersebut akan bekerja dan melakukan penundaan pemuatan pada file di blog sebelum anda menscroll halaman tersebut.
Script Lazy Load Image Ini juga sudah dikombinasikan dengan animasi slash saat penundaan pemuatan pada file di blog sebelum kamu scroll halaman blog. Oke kita langsung aja pergi ke tutorial memasang Lazy Load Image dan Loading Slash.

Cara Memasang Lazy Load Image Dan Animasi Slash

1. Pertama, Silakan login ke Blogger > Masuk Dashboard Blogger
2. Pilih Tema > Edit HTML
3. Silakan kamu cari Kode Tag HTML image <img> Kode ini merupakan kode dari Thumbnail blog. Di setiap Template blog pasti berbeda – beda, sekiranya codenya seperti itu.

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

4. Jika Udah, Silakan kamu simak baik-baik penjelasan berikut ini.

~ Tambahkan class='lazy' pada tag imagenya.
~ Ubah expr:src jadi expr:data-src.
~ Tambahkan src dan value nya disi dengan data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII= (value src ini, berbeda dengan tutorial lain, jadi jika animasi loadingnya ingin berjalan silakan ganti dengan value yang ini)
Dan hasilnya seperti 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,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII='/>

5. Copy kode Lazy Load Gambar. Dan Simpan Kodenya tepat di 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>

6. Kemudian silakan kamu tambahkan animasi loadingnya. Copy kode dibawah dan Letakkan Kode dibawah ini di atas </b:skin> atau </style>

.lazy {animation: ignielShine 1.5s linear infinite;-moz-animation: ignielShine 1.5s linear infinite;/*-webkit-animation: ignielShine 1.5s linear infinite;*/-o-animation: ignielShine 1.5s linear infinite;background: #f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.78) 20%,rgba(255,255,255,0) 30%);background-size: 800px 104px;}
.Night .lazy{background:#252931 linear-gradient(to right,rgba(255,255,255,0) 5%,rgb(49,54,64) 20%,rgba(255,255,255,0) 30%);background-size:800px 104px}
@keyframes ignielShine{0%{background-position:-468px 0}100%{background-position:468px 0}}@-webkit-keyframes ignielShine{0%{background-position:-468px 0}100%{background-position:468px 0}}@-moz-keyframes ignielShine{0%{background-position:-468px 0}100%{background-position:468px 0}}@keyframes ignielZoom{0%{transform:scale(0)}100%{transform:scale(1)}}@-webkit-keyframes ignielZoom{0%{transform:scale(0)}100%{transform:scale(1)}}@-moz-keyframes ignielZoom{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes ignielFade{from{opacity:0}to{opacity:1}}@-webkit-keyframes ignielFade{from{opacity:0}to{opacity:1}}@-moz-keyframes ignielFade{from{opacity:0}to{opacity:1}}@keyframes ignielGradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-webkit-keyframes ignielGradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes ignielGradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes ignielWobble{0%{transform:scale(0) rotate(-54deg) translatey(40px)}45%{transform:scale(1.1) rotate(20deg) translatey(0px)}60%{transform:scale(1) rotate(-15deg) translatey(0px)}77%{transform:scale(1) rotate(10deg) translatey(0px)}100%{transform:translatey(0)}}@-webkit-keyframes ignielWobble{0%{transform:scale(0) rotate(-54deg) translatey(40px)}45%{transform:scale(1.1) rotate(20deg) translatey(0px)}60%{transform:scale(1) rotate(-15deg) translatey(0px)}77%{transform:scale(1) rotate(10deg) translatey(0px)}100%{transform:translatey(0)}}@-moz-keyframes ignielWobble{0%{transform:scale(0) rotate(-54deg) translatey(40px)}45%{transform:scale(1.1) rotate(20deg) translatey(0px)}60%{transform:scale(1) rotate(-15deg) translatey(0px)}77%{transform:scale(1) rotate(10deg) translatey(0px)}100%{transform:translatey(0)}}@keyframes ignielShine{0%{background-position:-468px 0}100%{background-position:468px 0}}

7. Terakhir silakan Save / Simpan Template kalian, Dan lihat hasilnya..

PENUTUP
Demikian artikel mengenai Cara Mengatasi Artikel Blog Tidak Muncul Di Semua Halaman Blog, Jika kalian kurang mengerti atau gagal silakan komentar atau Contact untuk di bantu mengatasi permasalahan yang kalian hadapi, cukup sekian dan Terima Kasih.

KLIK

DONASI Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.aslori.com. Terima kasih.