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.

22 komentar:

  1. 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,

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

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

    BalasHapus
  4. 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?

    BalasHapus
    Balasan
    1. 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

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

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

      Hapus
    4. Mantap haha.. Ditunggu yang lainnya gan

      Hapus
  5. Bisa dipake untuk blog yang AMP, nggak?

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

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

    BalasHapus
    Balasan
    1. 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...

      Hapus
  7. untuk wordpress bagaimana bang jarwo

    BalasHapus
    Balasan
    1. Setting expires header nya untuk .JS via .htaccess

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

    BalasHapus
    Balasan
    1. 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.

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

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

      Hapus