Pada artikel seputar PageSpeed Insights ini, saya akan membagikan lagi cara mengatasi Leverage Browser Caching (atau bahasa GTmetrixnya Add Expires Header). Tapi kali ini berbeda, karena hanya untuk masalah yang timbul dikarenakan Javascript.
Penjelasan
Sedikit saya jelaskan lagi, Leverage Browser Caching atau dalam bahasa Indonesianya memanfaatkan penyimpanan cache browser merupakan sebuah masalah kecepatan loading blog/web yang timbul di Google PageSpeed dikarenakan suatu sumber daya yang tidak tersimpan di browser pengguna.
Bahasa mudahnya gini...
Misal pada saat anda membuka blog saya, browser me-load bangjarwo.js. Kemudian anda keluar dari blog saya, kemudian buka lagi. Tetapi anda me-load bangjarwo.js lagi, padahal tadi pada kunjungan pertama sudah.
Nah inilah yang dinamakan Leverage Browser Caching, anda harus me-load 2x script yang sama pada waktu kunjungan yang berbeda. Tentu sangat memboros waktu dan kuota.
Cara Mengatasinya
Cara mengatasi dari masalah ini adalah menggunakan script LazyLoad Javascript pada blogger. Sudah tau apa itu LazyLoad? Ya, JS yang berfungsi agar script baru di-load setelah blog discroll. Bila belum di scroll, script masih belum ter-load.
Sebenarnya cara LazyLoad ini hanya untuk "membohongi" PageSpeed saja...
...anda tau mengapa?
Jelas, dikarenakan mau bagaimanapun script tetap di-load 2x, hanya saja bedanya dengan menggunakan LazyLoad script ter-load pada saat di scroll.
Robot yang digunakan PageSpeed Insights dan GTmetrix tidak menscroll laman yang diceknya, sehingga script tidak ter-load. Oleh karena itu saya mengatakan hanya membohongi, agar skor kita lebih tinggi & waktu load awal sebelum di scroll lebih cepat.
Pemasangan Script
Langsung ke pemasangannya, seperti biasa silakan anda buka terlebih dahulu blogger.com. Pada dashboard kiri blogger, tekan Tema, Edit HTML.
Lalu, silakan anda cari link beserta kode yang menyebabkan Leverage Browser Caching/Add Expires tadi, disini saya memberi contoh kodenya seperti ini:
<script type="text/javascript" src="../script/bangjarwo.js"/>
Lihat link diatas yang saya mark kuning, copy kode tersebut dan simpan di notepad, lalu hapus semua kode diatas.
Selanjutnya, silakan anda copy kode dibawah ini diatas </body>.
<script type='text/javascript'>//<![CDATA[
var LLJSbangjarwo=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&LLJSbangjarwo===!1||0!=document.body.scrollTop&&LLJSbangjarwo===!1)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="link javascript";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}(),LLJSbangjarwo=!0)},!0);
//]]></script>
Ganti tulisan yang saya mark kuning dengan link yang sudah disimpan tadi.
Sehingga penampilan akhir kode menjadi seperti ini (contoh)...
<script type='text/javascript'>//<![CDATA[
var LLJSbangjarwo=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&LLJSbangjarwo===!1||0!=document.body.scrollTop&&LLJSbangjarwo===!1)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="../script/bangjarwo.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}(),LLJSbangjarwo=!0)},!0);
//]]></script>
</body>
Selesai, silakan anda simpan template dan cek kembali skor loading blog anda.
Tambahan
Bila anda ingin menerapkan LazyLoad untuk Javascript eksternal lainnya, cukup copy kembali kode diatas dibawah kode yang pertama, dan ganti kode link yang di mark dengan link Javascript lainnya.
Semoga script diatas dapat membantu dan bila ada kesalahan dalam penulisan kode atau kode yang tidak work dimohon segera untuk memberi tau saya lewat kolom komentar yang tersedia, terima kasih.