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.