Mengatasi Leverage Browser Caching / Add Expires Header Javascript Eksternal

Mengatasi Leverage Browser Caching / Add Expires Header Javascript Eksternal

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.

Senin, September 18, 2017 - 20 komentar

20 komentar untuk Mengatasi Leverage Browser Caching / Add Expires Header Javascript Eksternal.

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


Perlihatkan Semua Komentar Tutup Semua Komentar
.
imam asri
Minggu, 15 Oktober 2017 06.56.00 WITA

Sipp terimakasih artikelnya, dari semua yang saya baca tentang cara meningkat kan pagespeed di google insnight, akhirnya blog saya bisa cepat juga, di tunggu ka jarwo artikel selanjutnya,

Balas Hapus
.
Rogue_One
Selasa, 24 Oktober 2017 21.03.00 WITA

Mantap gan ,akhirnya ketemu juga tutor selain menggunakan async='async',soalnya kalo make async beberapa widget jadi gk fungsi :(

Balas Hapus
.
Adi Jaya
Minggu, 05 November 2017 22.18.00 WITA

Apakah sesuai dengan template yang saya gunakan gan. Trims balasannya.

Balas Hapus
.
Ozik Jarwo
Senin, 06 November 2017 17.09.00 WITA

Template EvoMagz ya? Cocok aja...

Balas Hapus
.
Dzkry Leskompi
Minggu, 12 November 2017 06.54.00 WITA

Mantaap, seketika masalah cache javascript hilang semua.. Tapi ada pertanyaan gan..

Sebelumnya saya pernah tanya cara atasi leverage browse caching, dan agan kodejarwo rekomended pakai lazyload dari mastamvan (buat evomagz)..

Nah, ane udah pasang lazyloadnya, tapi scriptnya kena leverage browse caching juga, dan pas dicoba pake cara agan diatas, lazyloadnya malah jadi ngga aktif.. Itu gimana ya gan?

+ Kalau kode daftar adsense bisa diubah begini juga? Aman gak ya?

Balas Hapus
.
Ozik Jarwo
Minggu, 12 November 2017 12.46.00 WITA

Jawabannya:

(1) Script mastamvan memang kadang begitu, jadi solusinya pakai script saya

(2) Script lazyload saya gak work gimana maksudnya gan? Saya coba work aja

(3) Untuk adsense aman, saya sendiri pake kok di blog saya yang lain

Balas Hapus
.
Dzkry A
Minggu, 12 November 2017 17.15.00 WITA

1. Maksud saya script lazyload untuk gambar disini:

mastamvan*blogspot*co*id/2017/06/mempercepat-loading-blog-lazy-load-image*html

2. Script lazyload dari mastamvan diatas tadi butuh javascript. script lazyloadnya work, tapi javascriptnya malah kena leverage browse caching.

3. Kemudian saya coba modif script lazyload gambar dari mastamvan diatas, ke model cara mengatasi leverage browse caching dari artikel ini. Tapi lazyloadnya malah jadi nggak work.


Untuk script lainnya work kok gan.. Mantap

Balas Hapus
.
Ozik Jarwo
Senin, 13 November 2017 20.59.00 WITA

Nanti gan, doakan saya supaya bisa ada waktu buat update artikel LazyLoad lagi, nanti saya buatkan "Versi Base64" nya, dijamin gak bertambah masalah lagi gan... 8-)

Balas Hapus
.
Dzkry A
Selasa, 14 November 2017 05.20.00 WITA

Mantap haha.. Ditunggu yang lainnya gan

Balas Hapus
.
Deka
Minggu, 14 Januari 2018 13.33.00 WITA

Bisa dipake untuk blog yang AMP, nggak?

Balas Hapus
.
Ozik Jarwo
Minggu, 14 Januari 2018 15.46.00 WITA

Bisa. Tapi script untuk AMP nya saran saya jangan diberi LazyLoad.

Balas Hapus
.
Deka
Senin, 15 Januari 2018 06.50.00 WITA

Hehehe.., justru itu yang saya maksud, Mas.
Adsense yang menggunakan kode AMP kan tetap saja muncul di GTmetrics, alias mengganggu loading blog.
Apa pasangnya Adsense pake script biasa yang sudah disediakan oleh google tapi dibungkus LazyLoad?
Tapi saya takutnya malah Adsense-nya munculnya terlambat karena harus nunggu scroll. Bukankah itu bisa mengurangi CTR?
Baiknya gimana ya, Mas?

Balas Hapus
.
Ozik Jarwo
Senin, 15 Januari 2018 12.59.00 WITA

Kalau pakai Adsense memang SANGAT tidak baik kalau dibungkus LazyLoad, karena mengurangi active view sama CTR.

Jadi kalau pakai adsense usahakan jangan banner gambar, lebih baik gunakan Link Units sama Richer Text aja...

Balas Hapus
.
Irwin Andriyanto
Selasa, 16 Januari 2018 21.04.00 WITA

untuk wordpress bagaimana bang jarwo

Balas Hapus
.
Ozik Jarwo
Rabu, 17 Januari 2018 06.04.00 WITA

Setting expires header nya untuk .JS via .htaccess

Balas Hapus
.
mita GROUP
Rabu, 17 Januari 2018 08.03.00 WITA

mohon bantuwannya untuk mengatasi leverage browser caching https://www.google-analytics.com/analytics.js dan http://connect.facebook.net/en_US/all.js terimakasih

Balas Hapus
.
Ozik Jarwo
Rabu, 17 Januari 2018 18.24.00 WITA

Untuk https://www.google-analytics.com/analytics.js mungkin belum bisa, script Google Analytics kurang baik kalau loadingnya diberi LazyLoad karena bisa jadi tidak work. Jadi pilihan terakhir yaitu tidak memakai Google Analytics.

Sedangkan http://connect.facebook.net/en_US/all.js, coba cari script tersebut di dalam Edit HTML. Kalau ketemu, hapus. Atau bisa juga hapus widget Navbar1 didalam Edit HTML.

Balas Hapus