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 type='text/javascript'>//<![CDATA[
// LaJarwo
function kodejarwo(d)window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
// LaJarwo Event
function lazyLoad(){for(var e=document.getElementsByClassName("lajarwo"),t=0;t<e.length;t++)isInViewport(e[t])&&(e[t].src=e[t].getAttribute("data-src"))}function isInViewport(e){var t=e.getBoundingClientRect();return t.bottom>=0&&t.right>=0&&t.top<=(window.innerHeight||document.documentElement.clientHeight)&&t.left<=(window.innerWidth||document.documentElement.clientWidth)}function registerListener(e,t){window.addEventListener?window.addEventListener(e,t):window.attachEvent("on"+e,t)}registerListener("load",lazyLoad),registerListener("scroll",lazyLoad);document.addEventListener("DOMContentLoaded",function(){"use strict";for(var e=document.querySelectorAll("a"),t=e.length,n=/firefox|trident/i.test(navigator.userAgent)?document.documentElement:document.body,o=function(e,t,n,o){return(e/=o/2)<1?n/2*e*e*e+t:n/2*((e-=2)*e*e+2)+t};t--;)e.item(t).addEventListener("click",function(e){var t,r=n.scrollTop,i=document.getElementById(/[^#]+$/.exec(this.href)[0]).getBoundingClientRect().top,c=n.scrollHeight-window.innerHeight,u=c>r+i?i:c-r,d=900,l=function(e){t=t||e;var i=e-t,c=o(i,r,u,d);n.scrollTop=c,d>i&&requestAnimationFrame(l)};requestAnimationFrame(l),e.preventDefault()})});
//]]></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.

Rabu, Juli 05, 2017 - 10 komentar

10 komentar untuk Cara Mengatasi Leverage Browser Caching Gambar Blogger dengan Lazyload.

Silakan masukkan komentar anda. Jangan habiskan waktu hanya untuk melakukan SPAM disini.


Perlihatkan Semua Komentar Tutup Semua Komentar
.

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

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

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

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

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

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

Terima kasih

Afaea

Balas Hapus
.

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

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

diblog saya tidak ada

Balas Hapus
.

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

Balas Hapus