Cara Mengatasi Leverage Browser Caching Gambar Blogger dengan Lazyload
Cara Mengatasi Leverage Browser Caching Blogger dengan Lazyload

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.

Script Lazyload untuk Thumbnail
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:
  • Penambahan lajarwo pada class 
  • Pengantian dari expr:src menjadi expr:data-src
  • Penambahan kode src
Silahkan anda ganti kode titik-titik (...) diatas dengan kode yang sudah disimpan tadi.
  • Lanjut ke langkah kedua...

Langkah Kedua...

  • Masih di template editor, silahkan anda masukkan kode dibawah ini tepat diatas tag </body>
<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'](''));
//]]></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.
Silakan pilih sistem komentar anda ⇛   

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM di sini.

Nasrul Umam Kode Jarwo
Nasrul Umam
# 14 Agustus 2018 00.18

Waah repot juga kalau begitu 🤔

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 13 Agustus 2018 20.15

Sepertinya kalau Contempo belum bisa, soalnya dia pakai fungsi b:include supaya responsive, bukan img + css biasa...

Balas
Nasrul Umam Kode Jarwo
Nasrul Umam
# 13 Agustus 2018 11.56

Untuk penerapan di template bawaan blogger "contempo" bagaimana ya mas, saya kesulitan mencari tag <img nya.

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 8 Agustus 2018 18.35

Kalo nda salah di Arlina udah dikasih LazyLoad. Kalo kena masalah Optimize Image / Leverage Browser Caching, coba pakai cara lain yang ada di blog ini, misal dengan mengganti data:post.body dengan data:post.snippet. Saya sudah pernah buat panduannya itu di cara memperbaiki Optimize Image.

Balas
John HS Kode Jarwo
John HS
# 8 Agustus 2018 00.51

Oh iya, aku mau tanya lagi, aku pake template Arl*na kalau pake cara ini lazyload nya gak bekerja, jadi pemasangan nya bisa, cuman kalau halaman discroll gambarnya gak nongol/tetap blank, tau gak om gimana solve nya?
Makasih.

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 7 Agustus 2018 19.21

Mungkin bisa buat JS baru, pakai atribut .className ke element img yang dimaksud. Tapi biasanya sih di JS itu ada nyelip kode kayak class="....", nah masukkan ke situ aja class lazy nya.

Balas
John HS Kode Jarwo
John HS
# 7 Agustus 2018 13.27

Gimana caranya supaya lazyload bekerja yang gambarnya ada di JS? Misalnya ("<img").

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 28 Maret 2018 16.42

Iya sih saya aja baru tau Pingdom akhir 2017 lalu hihi

Balas
fhaia blog Kode Jarwo
fhaia blog
# 27 Maret 2018 21.50

Jarang ada yang mau ngecek di Pingdom mas XD

Orang-orang lebih familiar sama GTMetrix dan Speed Insight.

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 27 Maret 2018 10.04

100% betul, asalkan ngerti cara ubah url jadi Base64...

Tapi base64 tetap terbaca sama tool Pingdom

Balas
fhaia blog Kode Jarwo
fhaia blog
# 27 Maret 2018 07.11

Kalau memang Image di CSS ngak bisa pakai script ini, coba ubah ekstensi gambarnya jadi base64 :D

Dijamin hilang masalahnya.

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 5 Februari 2018 11.19

Iya. Gambar bisa muncul kalau sudah scroll kebawah. Itu namanya Lazyload.

Balas
Queue Kode Jarwo
Queue
# 5 Februari 2018 06.57

Setelah saya ikuti langkah-langkah tersebut koq gambar jadi blank putih?

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 28 Desember 2017 11.35

Bisa, caranya juga sama yaitu penggantian src jadi data-src & penambahan class lajarwo

Balas
kandra wilko Kode Jarwo
kandra wilko
# 28 Desember 2017 08.18

Om ane banyak yak. Kalau script lazy load itu ditetapin buat file selain gambar bisa? Kan selain gambar caching browser biasanya detek file javascript juga tuh.

Thanks

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 27 Desember 2017 18.23

Gambar depan post

Balas
Ahmad Muzakki Kode Jarwo
Ahmad Muzakki
# 27 Desember 2017 17.57

thumbnail itu apa bang

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 24 November 2017 18.33

Saya lihat di blog agan nda pakai Auto Read-More... Jelas aja nda ada karena tanpa Auto Read-More, thumbnail nda bakal muncul...

Balas
Diky NN Kode Jarwo
Diky NN
# 24 November 2017 14.04

maaf mau nnya maksudnya code expr:src='...'
yang . . . . itu bentuknya seperti apa ya ? apakah angka?

diblog saya tidak ada

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 9 November 2017 18.43

Mungkin gak bisa mas, karena nanti arahnya pasti ke CSS background:url()... Sedangkan kode CSS macam ini gak bisa diurai dengan Javascript.

Sama sama

Salam buat Galantys

Balas
Adagaki Aki Kode Jarwo
Adagaki Aki
# 8 November 2017 06.58

Jika gambar yang kita gunakan, ditaruh didalam code CSS. Bagaimana cara memasang lazyload pada gambar tersebut ?

Terima kasih

Afaea

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 25 Oktober 2017 08.37

Iya, manual ke tiap gambar.

Balas
Rogue_One Kode Jarwo
Rogue_One
# 24 Oktober 2017 21.13

sudah saya terpakan di templatenya tapi masih di suruh optimalin juga apakah,di setiap gambar yg ada di artikel kita kasih class='... jarwo' juga?

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 13 Oktober 2017 18.04

Oh iya iya saya ngerti itu masalahnya dimana. Saya sudah cek blog mas tadi.

Caranya mas harus pakai lazyload versi onscroll, alias pakai script eksternal. Caranya bisa dicek disini, blog teman saya, MasTamvan. Semoga berhasil.

Balas
Dzkry Azq Kode Jarwo
Dzkry Azq
# 13 Oktober 2017 13.30

Kalau lazyload saya sudah pasang, tapi belum ada perubahan berarti.

Masih pusing sama leverage browse caching, gambar minta di caching terus..

Sekalian belajar juga.. Trims mastah

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 12 Oktober 2017 11.58

Mungkin cara terakhirnya cuma 2, yaitu pakai script LazyLoad atau semua gambar dibuat ngeblur dikit dengan Javascript.

Selain itu bisa juga karena widget popular post yang pakai thumbnail. Saran dipolosin aja, jangan pakai thumbnail.

Balas
Dzkry Azq Kode Jarwo
Dzkry Azq
# 12 Oktober 2017 08.30

Masih bingung di terapkan di evomagz :D Kalau gambar yang udah di compress tapi di speed insight minta dikompress gimana ya gan? Padahal di kompress berkali-kali

Balas