Leverage browser caching, atau dalam bahasa Indonesianya adalah "manfaatkan penyimpanan cache browser" adalah suatu masalah kecepatan loading blog pada Google PageSpeed Insights yang disebabkan karena blog tersebut tidak mengatur dan menyuruh agar browser untuk menyimpan data blog tersebut ketika dikunjungi.
Bingung artinya? Begini...
Misal anda mengunjungi blog ini, lalu anda keluar sebentar dan kembali lagi mengunjungi blog ini.
Bila anda bandingkan, waktu load yang anda butuhkan untuk kunjungan kedua (atau lebih) ke blog ini 2x lipat lebih cepat dibandingkan kunjungan pertama anda ke blog ini.
Mengapa?
Karena sebagian data tentang blog ini masih tersimpan di dalam browser anda. Jadi, browser hanya perlu me-load data-data yang baru saja, sisanya menggunakan data yang tersimpan tadi (atau nama kerennya browser caching).
Bagi yang ingin langsung ke cara memasangnya silahkan klik disini.
Kembali ke topik awal, mengapa Google PageSpeed Insights sangat merekomendasikan anda untuk membuat blog anda support browser caching?
Sudah tentu, agar pengunjung di blog anda tidak membuang-buang kuota dan waktunya hanya untuk melihat blog anda. Nah, sekarang, mari kita buat blog agar support dengan browser caching ini, dengan script yang dinamakan lazyload.
Lazyload? Kayaknya baru dengar nih hehehe...
Bagi anda yang baru didalam dunia blogging pasti script ini terdengar asing. Script Lazyload adalah script (Javascript) yang berguna agar elemen-elemen tertentu di blog anda dimuat sesaat setelah blog sudah 100% dimuat (full load).
Dengan artian begini...
Misal saya membuat gambar thumbnail di blog saya dengan Lazyload, maka ketika anda mengunjungi blog saya, gambar thumbnail tidak akan muncul bila loading blog saya masih muter-muter di browser anda, kecuali sudah selesai loadingnya (full load). Oleh karenanya, Lazyload ini dapat menyelesaikan masalah Leverage Browser Caching ini.
Lha, apa hubungannya antara browser caching dengan load setelah full-load?
Disini sebenarnya kita sedikit "memanipulasi" Google PageSpeed Insights...
Bila sebelumnya gambar "A" pada blog anda memiliki masalah dengan Google PageSpeed Insights, lalu anda berikan gambar "A" tadi script Lazyload, maka ketika anda cek blog anda di Google PageSpeed Insights, ia tidak akan mendeteksi bahwa blog anda mempunyai gambar "A" tadi...
...padahal ada. Cuman di-load setelah full-load.
 |
| Bisa anda lihat, semua gambar di blog saya tidak terdeteksi Google PageSpeed Insights... |
Tenang aja... Script ini gak buat blog anda error kok...
Langsung saja, berikut solusi dan cara membuatnya.
Caranya...
Silahkan anda cek terlebih dahulu di Google PageSpeed Insights, apa yang menjadi masalah untuk Leverage Browser Caching disana untuk dipasangi Lazyload. Disini saya akan mencontohkan cara memasang Lazyloadnya di gambar thumbnail.
Langkah Pertama...
- Tentunya, pertama silahkan anda login di blogger.com > Tema > Edit HTML.
- Lalu, cari kode untuk gambar thumbnail anda. Biasanya berbentuk seperti ini:
<img class='thumbnail-post' expr:src='...' />
Yang saya maksud dari titik-titik (...) diatas adalah kode bawaan dari template anda, silahkan anda simpan kode tersebut.
- Sekarang, ganti kode tersebut menjadi seperti ini:
<img class='thumbnail-post lajarwo' src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" expr:data-src='...' />
Keterangan:
Silahkan anda ganti kode titik-titik (...) diatas dengan kode yang sudah disimpan tadi.
- Penambahan lajarwo pada class
- Pengantian dari expr:src menjadi expr:data-src
- Penambahan kode src
- Lanjut ke langkah kedua...
Langkah Kedua...
- Masih di template editor, silahkan anda masukkan kode dibawah ini tepat diatas tag </body>
<script>//<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'](''));
//]]></script>
- Lalu, simpan template anda dan lihat hasilnya.
Langkah Ketiga... (bagi yang tidak work)
- Silahkan anda masukkan kode ini diatas </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>
Langkah Keempat... (bagi yang ngeblur gambarnya)
- Masukkan kode ini diatas </body>
<script>
//<![CDATA[
function resizeThumb(parentID, size) {
var parent = document.getElementById(parentID),
image = parent.getElementsByTagName('img');
for (var i = 0; i < image.length; i++) {
image[i].src = image[i].src.replace(/\/s72\-c/, "/s" +
size + "-c");
image[i].width = size;
image[i].height = size;
}
} resizeThumb('Blog1', 160);
//]]>
</script>
Bagaimana? Apakah masalah sudah terselesaikan? Semoga artikel diatas dapat membantu mempercepat loading blog anda.