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.
Silakan pilih sistem komentar anda ⇛   

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM, Fake Account, dan Flamming disini.

Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 17 Februari 2018 00.19

Oke sama-sama, kalau ada yang bingung juga bisa ditanyakan ke saya...

Balas
ken dhou Kode Jarwo
ken dhou
# 16 Februari 2018 23.58

Saya sangat berterima kasih sama bang Jarwo (titip salam buat Adit sama bang Sopo ya bang, hehehe...)
Menurut saya tutorial yang diberikan oleh kodejarwo termasuk yang paling lengkap, meskipun tidak semuanya berhasil saya pahami dengan baik (basic saya memang kurang mengerti bahasa pemrograman), tapi dari artikel2 yang bisa saya ikuti blog saya jauh lebih cepat loadingnya dan skor GMetrix juga naik drastis.
sekali lagi makasih bang...

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 17 Januari 2018 18.24

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
mita GROUP Kode Jarwo
mita GROUP
# 17 Januari 2018 08.03

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
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 17 Januari 2018 06.04

Setting expires header nya untuk .JS via .htaccess

Balas
Irwin Andriyanto Kode Jarwo
Irwin Andriyanto
# 16 Januari 2018 21.04

untuk wordpress bagaimana bang jarwo

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 15 Januari 2018 12.59

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
Deka Kode Jarwo
Deka
# 15 Januari 2018 06.50

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
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 14 Januari 2018 15.46

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

Balas
Deka Kode Jarwo
Deka
# 14 Januari 2018 13.33

Bisa dipake untuk blog yang AMP, nggak?

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

Siap gan

Balas
Dzkry A Kode Jarwo
Dzkry A
# 14 November 2017 05.20

Mantap haha.. Ditunggu yang lainnya gan

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 13 November 2017 20.59

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
Dzkry A Kode Jarwo
Dzkry A
# 12 November 2017 17.15

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
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 12 November 2017 12.46

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
Dzkry Leskompi Kode Jarwo
Dzkry Leskompi
# 12 November 2017 06.54

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
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 6 November 2017 17.09

Template EvoMagz ya? Cocok aja...

Balas
Adi Jaya Kode Jarwo
Adi Jaya
# 5 November 2017 22.18

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

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

Oke terima kasih

Balas
Rogue_One Kode Jarwo
Rogue_One
# 24 Oktober 2017 21.03

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

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 15 Oktober 2017 12.05

Sama sama

Balas
imam asri Kode Jarwo
imam asri
# 15 Oktober 2017 06.56

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