Cara Mengatasi Add Expires Headers pada GTmetrix YSlow
Cara Mengatasi Add Expires Headers pada GTmetrix YSlow

Sesuai dengan salah satu permintaan dari sobat KaJe di halaman pertanyaan, kali ini saya ingin membahas seputar cara mengatasi Add Expires Headers di GTmetrix bagian YSlow. Sebenarnya masalah ini sama seperti Leverage Browser Caching, tapi sedikit lebih sulit. Mari kita bahas dari pengertiannya.

Apa Itu Add Expires Headers ?


Add Expires Headers merupakan sebuah masalah loading blog yang dikarenakan penggunaan cache browser yang tidak dimaksimalkan. Masalah ini mendapatkan prioritas High di GTmetrix, jadi jangan salah kalau skor anda jelek ketika mendapatkan Add Expires Headers ini.

Contoh permasalahannya seperti ini...

Anda sedang mengunjungi blog saya, lalu di blog saya muncul sebuah gambar, sebut saja gambar A. Dan gambar A tersebut memiliki ukuran sekitar 100 KB. Nah keesokan harinya, anda membuka blog saya lagi dan muncul gambar A lagi yang tadi.

Bila anda mengaktifkan "Add Expires Headers", maka anda sudah menghemat 100 KB karena gambar A yang kita bicarakan di atas tidak perlu didownload lagi. Browser hanya menampilkan gambar "bekas" kemarin.

Sebaliknya, bila anda tidak mengaktifkannya, maka gambar akan didownload lagi supaya muncul. Sekalipun anda baru menutup tab beberapa menit dan membuka blog saya lagi, gambar A tetap akan didownload lagi.

Tentu hal ini akan membuang-buang kuota dan waktu saja, padahal kita bisa menghematnya. Ketika Add Expires Headers diaktifkan, ia akan memberi tau browser bahwa "gambar/script ini harus disimpan", sehingga dapat dibuka lagi lain waktu tanpa akses internet.

Sebenarnya untuk anda para blogger tidak akan bisa mengatasi masalah ini, karena anda tidak memiliki akses untuk mengatur ke folder root hosting. Berbeda dengan para pengguna Self Host, ia mendapatkan akses penuh sehingga dapat mengatur hingga ke dalam.

Tapi jangan bersedih hati dulu, kita disini diajak untuk "pintar" sedikit. Kita harus melakukan sedikit manipulasi agar masalahnya kelar.

Mungkin ilustrasi diatas sudah lumayan jelas...

...bila iya, lanjut ke caranya.

Cara Mengatasi Add Expires Headers


Add Expires Headers tidak hanya diakibatkan oleh gambar, resources-resources lain seperti Javascript, CSS, HTML, dan sebagainya juga dapat menjadi biang keroknya. Oleh sebab itu, saya akan membahasnya satu per satu secara rinci karena tiap tipe resource beda cara. Mari kita bahas dari gambar.

a. Gambar - PNG, JPG, GIF


Untuk file berjenis gambar, cara yang dapat dilakukan hanyalah 1, yaitu dengan menggunakan Lazyload. Bagi anda yang tidak tau apa itu Lazyload, Lazyload semacam cara agar gambar di blog tidak akan dimuat sebelum user menscroll kebawah.

Langsung saja ke caranya ya...

Pertama, silakan anda masukkan kode berikut tepat dibawah <body :

<script>//<![CDATA[
function lazyLoad(){for(var e=document.getElementsByClassName("lazy"),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);
  for(i=0; i<1; i++){
lazyLoad();
  }
//]]></script>

Setelah itu, cari gambar yang menyebabkan masalah, biasanya terletak pada thumbnail. Kurang lebih bentuknya seperti ini:

<img class='...' expr:src='...' />
Maksud tanda yang saya titik-titik (...) diatas adalah contoh.

Sekarang, ubah tag yang seperti diatas menjadi seperti ini:


<img class='... lazy' expr:data-src='...' />
Bisa dilihat, saya menambahkan 1 class baru yaitu lazy, dan mengubah artibut src menjadi data-src.

Simpan template dan lihat hasilnya. Bila anda melakukannya dengan benar, saya pastikan ada mengalami perubahan pada speed blog. Apabila masih belum ada perubahan yang signifikan, kemungkinan berasal dari penggunaan snippet count.

b. Snippet Count


Bagi yang tidak tau, snippet count merupakan fitur dari beberapa template yang berfungsi untuk mengatur kata yang ditampilkan pada deskripsi postingan di blog. Tidak semua template ada snippet count, jadi bila di blog anda tidak ada maka lanjut ke bagian c.

Contoh Snippet di blog saya
Contoh Snippet di blog saya

Nanti saya akan berikan informasi mengapa snippet count berpengaruh pada masalah ini. Yang penting kita tau dulu cara mengatasinya. Silakan ikuti panduan berikut.

Pertama, cari kode yang mirip atau sama seperti ini di Edit HTML:

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</script>

Bila sudah ketemu, hapus kode tersebut dan ganti menjadi:

<div class='snippets'><data:post.snippet/></div>

Simpan template. Tidak hanya Add Expires Headers, cara ini juga ampuh untuk mengatasi beberapa masalah lainnya seperti Leverage Browser Caching dan Optimize Images di PageSpeed Insights.

c. Cascading Style Sheet - .css


Yang ketiga adalah karena CSS, lebih tepatnya lagi CSS eksternal. Biasanya tag HTML untuk CSS eksternal berbentuk kurang lebih seperti ini:

<link href='...css' rel='stylesheet' type='text/css'/>

Simpan link yang terdapat pada atribut href (yang saya miring & tebalkan tulisannya) pada notepad. Kemudian, hapus semua tag diatas. Oh ya, kode seperti diatas tidak hanya 1, ada beberapa didalam Edit HTML, jadi silakan dicek semuanya & simpan.

Setelah itu, masukkan kode berikut tepat diatas </body>

<script type='text/javascript'>
//<![CDATA[
// CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("...css");
//]]>
</script>
Ganti ...css dengan link yang sudah anda simpan di notepad tadi.

Bila link ada lebih dari 1 di notepad, maka cukup tambahkan pemanggil loadCSS nya saja, menjadi seperti ini (yang saya garis bawahi):

<script type='text/javascript'>
//<![CDATA[
// CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("...css");
loadCSS("...css");
loadCSS("...css");
loadCSS("...css");
//]]>
</script>

Simpan template dan lihat hasilnya. Saya harap anda mengalami perubahan setelah melakukan cara ini, karena terkadang tidak work pada beberapa blog dan situasi.

d. Javascript - .js


Yang terakhir yaitu Javascript. Mungkin yang ini sudah menjadi momok bagi anda para blogger, karena selain memberatkan, ia juga menjadi pusat dari berbagai masalah loading blog seperti Render Blocking, Minify, Leverage, dan sebagainya.

Cara yang dapat kita pakai untuk JS ini ada 2, yaitu dengan menggunakan Lazyload dan Inline. Tidak semua JS eksternal dapat dipakai kan Lazyload, dan tidak semua JS eksternal juga dapat dibuat inline. Jadi saya hanya menyarankan cara ini dilakukan oleh anda yang sudah mengerti setidaknya skill basic dari JS.

Mari kita mulai dari Lazyload. Pertama, ambil terlebih dahulu link JS nya, caranya sama seperti mengambil link CSS seperti pada langkah c diatas. Hanya bentuknya yang berbeda, biasanya seperti ini:

<script src='...js' type='text/javascript' />

Kemudian, kode Lazyloadnya seperti ini:

<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="....js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}(),LLJSbangjarwo=!0)},!0);
//]]></script>

Ganti kode yang saya mark kuning dengan link JS yang sudah anda simpan tadi. Kemudian simpan dan cek blog anda. Bila tidak ada perubahan, bagus lah. Tapi jika ada, jangan lakukan hal ini, lanjut ke cara inline.

Sama seperti cara diatas, cari linknya, lalu buka link tersebut. Nanti akan muncul kode-kode Javascript. Copy semua kode tersebut, taruh diatas </body> dengan format seperti berikut:

<script type='text/javascript'>//<![CDATA[

// Taruh disini kode yang sudah dicopy tadi disini

//]]></script>

Simpan template dan lihat hasilnya. Oh ya, jangan ambil sembarang kode JSnya, cari kode JS dari link yang isinya kecil, mungkin kisaran maksimal 20 baris bila dilihat dari laptop, karena bila kode besar kita buat inline, maka akan mengakibatkan masalah baru di PageSpeed yaitu Prioritize Visible Content.

Mungkin sampai sini dulu tutorial dari saya, semoga bermanfaat. Bila ada kode yang error, rusak, bingung, atau sebagainya, bisa ditanyakan ke saya lewat kolom komentar yang tersedia.
Silakan pilih sistem komentar anda ⇛   

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM di sini.

azid zainuri Kode Jarwo
azid zainuri
# 6 September 2018 19.19

Owalah siap bang. Maksih banyak

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 6 September 2018 08.59

Itu mengubah kode yang sudah ada mas, bukan menambah kode baru...

Kode yang diubah itu, tag IMG untuk menampilkan thumbnail blog.

Balas
azid zainuri Kode Jarwo
azid zainuri
# 6 September 2018 07.05

Untuk yg kode tersebut d letakkan dmn bang?. Maklum baru pemula

Balas
Ismy NR Kode Jarwo
Ismy NR
# 26 Juli 2018 21.13

Oh gitu yah... Makasi udah dijawab.. soalnya kadang walaupun dikompress juga masih rada gede ukuranya...

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 26 Juli 2018 19.44

Nda bisa, tetap harus nambahkan class & atribut data-src. Saran saya gambar di post gk usah dikasih LL, cukup kompres aja di tinypng.com, compresspng.com, dll...

Balas
Ismy NR Kode Jarwo
Ismy NR
# 26 Juli 2018 19.33

kan lazy load diatas buat thumbnailnya dikasih class, gimana caranya agar gambar dalam postingan di taruh lazy load ?? biar otomatis gitu.. gak usah satu2 buka postingan tambahhin class soalnya postinganya udah banyak

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 17 Juli 2018 14.13

Iyap

Balas
Mbak Say Kode Jarwo
Mbak Say
# 17 Juli 2018 12.41

bang ozy ini begini kah ? <img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 19 Juni 2018 09.13

Wordpress bisa, Blogger juga bisa

Balas
Mebel Jepara Jati Kode Jarwo
Mebel Jepara Jati
# 19 Juni 2018 01.21

maksud saya itu html buat wordpres kan mas bukan untuk blogger atau gmn mas? ya sdh saya pahami ckup jls mas, hanya saja lupa tanya itu utk kedua domain atau hanya satu kusus blogger?

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 11 Juni 2018 21.56

Mungkin perlu sedikit pemahaman dasar HTML, CSS, sama JavaScript mas supaya cepat paham. Tanyakan ke saya bagian mana yang bingung, soalnya saya lihat itu sudah lumayan jelas...

Balas
Mebel Jepara Jati Kode Jarwo
Mebel Jepara Jati
# 11 Juni 2018 21.43

detail pencarianya dan naruhnya di lokasi htmlnya belum jelas di mana posisinya mas, bisa di bantu mas.

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 19 Mei 2018 05.17

Oke lanjut di chat...

Balas
Den sena Kode Jarwo
Den sena
# 19 Mei 2018 05.13

gambarnya saya edit sendiri mas, gambarnya itu ada yang ilang kalau di bukak di UCbrowser. gambar di hompage..

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 19 Mei 2018 05.10

Biasanya itu karena gambarnya langsung comot URL, baru paste di postingan.

Kalau mau ambil gambar dari luar, download dulu gambarnya, kompres ukurannya, baru masukkan secara manual (dihost) di postingan...

Balas
Den sena Kode Jarwo
Den sena
# 19 Mei 2018 03.08

stelah makek cara di atas gambar saya yang di home page ada yang muncul ada yang ga mas. cara ngatasinya gimana..

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 24 Maret 2018 12.38

Iya untuk 1 link aja...

Balas
Ito Indrawan Kode Jarwo
Ito Indrawan
# 24 Maret 2018 10.01

gan kalo untuk lazy load js 1 kode js untuk 1 link js?

Balas
Lokerntb Kode Jarwo
Lokerntb
# 18 Februari 2018 11.08

jos gandooss tutorialnya

Balas