Cara Ampuh Untuk Mengatasi Add Expires Header Di Gtmetrix Yslow
April 22, 2018
Sudah pernah mengecek kecepatan blog kalian di GTmetrix.com ?. Apa kalian melihat skor Add expires header kalian 0 ??
Sama Seperti saya dulu hehe.. Tapi itu dulu lhoo ya kini Skor blog saya ialah menyerupai Gambar dibawah ini heehe..
Dengan mempunyai kecepatan tinggi sanggup juga menciptakan para pengunjung nyaman dan betah.
Untuk itulah kali ini saya akan memperlihatkan tutorial dan klarifikasi bagaimana cara mengatasi Add expires header ini
Apa itu add Expires Headers
Expires header sendiri ialah suatu permasalahan yang terjadi Pada sebuah blog, Yang penyebabnya ialah penggunaan cache yang kurang maksimal.
Untuk dilema yang satu ini tergolong Mendapatkan prioritas tinggi.. Makara jangan heran ya kalau kalian mendapat dilema menyerupai ini..
Add expires header ini berkaitan dengan Gambar, Script css, dan juga JavaScript.. Makara ketika anda membuka suatu website niscaya browser akan mendownload Bagian dari web itu..
Jika tidak menggunakan expires header ketika anda berkunjung kembali ke website yang sama makan anda tidak perlu mendownloadnya kembali..
Tetapi Jika menggunakan expires header maka anda tidak perlu mendownload lagi serpihan bagian dari website tersebut lantaran sudah tersimpan.
Cara Mengatasi Add Expires Headers
Kalian niscaya pernah melaksanakan search di google cara mengatasi add expires ini Dan menemukan banyak website yang bilang menggunakan Script menyerupai Dibawah ini :
<include expiration=’7d’ path=’*.css’/>
<include expiration=’7d’ path=’*.js’/>
<include expiration=’3d’ path=’*.gif’/>
<include expiration=’3d’ path=’*.jpeg’/>
<include expiration=’3d’ path=’*.jpg’/>
<include expiration=’3d’ path=’*.png’/>
<meta http-equiv=”expires” content=”sat, 02 jun 2020 00:00:00 GMT”/>
Benar? dan sesudah anda mencobanya tidak ada perubahan pada score, ya iyalah itu script gak berpengaruh.. baik, saya akan memulainya dari Gambar..
A. Gambar png, jpg ,jpeg
Untuk mengatasi File yang berjenis Gambar.. Cara satu satunya ialah menggunakan Script Lazy Load
Jika belum tau apa itu lazy Load akan saya jelaskan.. LazyLoad berfungsi biar Gambar tidak akan diLoad sebelum Di Scroll.
Jadi akan menghemat Kuota internet dan Juga mempercepat Loading suatu website atau blog
Langsung saja ke caranya ya...
Pertama, Copy dan pastekan aba-aba ini sempurna 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>
Jika sudah ditaruh selanjutnya carilah gambar penyebabnya.. Biasa dilema terletak pada thumbnail..
Kurang Lebih bentuk aba-aba nya itu menyerupai ini
<img class='...' expr:src='...' />
Tanda ... Adalah aba-aba nya, Sesuaikan saja dengan Kode pada blog anda
Sekarang ubah menjadi menyerupai dibawah ini
<img class='... lazy' expr:data-src='...' />
Jika anda perhatikan Saya menambahkan kata Lazy dan mengubah aba-aba src menjadi data-src
Gimana masih bingung?? Baiklah akan saya kasih pola nya lagi perhatikan gambar dibawah ini :
script yang tadinya hanya bertuliskan
<img class='thumbnail-post' src=... diubah menjadi <img class='thumbnail-post lazy' expr:data-src=...
Jika sudah diubah selanjutnya simpan template dan lihat perubahan, kalau anda melakukannya dengan benar maka speed blog anda akan bertambah.. Selain expires header dilema lainnya adalah Reduce DNS Looksup
B. Snippet count
Tidak semua template ada snippet count, jadi bila di blog anda tidak ada maka lanjut ke serpihan selanjutnya
Pertama, cari aba-aba yang menyerupai atau sama menyerupai ini di Edit HTML:
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet("summary<data:post.id/>");</script>
Sudah ketemu? Jika sudah hapus semua aba-aba tersebut dan ganti dengan kode
<div class='snippets'><data:post.snippet/></div>
Jika sudah silakan Simpan template. bukan hanya Add Expires Headers..
Melakukan cara tersebut Juga terbilang cukup efektif untuk mengatasi dilema Lainnya Seperti Leverage Browser caching dan optimize Image Di PageSpeed.
C. Cascading Style Sheet - .css
Yang ketiga ialah lantaran CSS, lebih tepatnya lagi CSS eksternal. Biasanya tag HTML untuk CSS eksternal berbentuk kurang lebih menyerupai ini:
<link href='...css' rel='stylesheet' type='text/css'/>
Simpan link yang ada di atribut href (yang saya miring & tebalkan tulisannya) pada notepad.
biar biar lebih gampang mencarinya gunakan CTRL + F Lalu tulis " .css " nanti akan muncul link yang berakhiran ,css
Kemudian, hapus semua aba-aba diatas. biasanya, aba-aba menyerupai diatas tidak hanya 1, melainkan ada beberapa, jadi silakan dicek semuanya & simpan.
Setelah itu, masukkan aba-aba berikut sempurna 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 (yang di mark kuning) dengan link yang sudah anda simpan di notepad tadi.
Jika link nya ada lebih dari satu.. Maka anda hanya perlu menambah Script pemanggilnya menjadi menyerupai ini
<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>
Jika sudah selesai Simpan template dan lihat hasilnya..
Saya harap Setelah melaksanakan ini akan terjadi perubahan pada blog anda.. Karena kadang kadang cara ini tidak work lantaran beberapa Alasan.
Kalau untuk blog saya sih terbilang work
D. JavaScript
Untuk yang terakhir ini ialah Java Script.. Mungkin ini lah yang menjadi musuh utama para Blogger..
Karena Selain menciptakan blog menjadi berat, Dia jugalah yang menyebabkan banyak sekali macam Masalah Lainnya.
Seperti Render Blocking, Leverage, Serta minify
Cara yang sanggup kita pakai untuk JS ini ada 2, yaitu dengan menggunakan Lazyload dan Inline. Tidak semua JS eksternal sanggup digunakan kan Lazyload.
Tidak semua Java Script sanggup dibentuk ke dalam bentuk inline. Makara saya sarankan untuk cara yang inline ini tidak dilakukan kalau anda tidak mengerti sama sekali perihal JavaScript
Tetapi kalau sanggup ya silahkan Di Lanjutkan
Mari kita mulai dari Lazyload. Pertama, ambil terlebih dahulu link JS nya, caranya sama menyerupai mengambil link CSS menyerupai pada langkah c diatas. Hanya bentuknya yang berbeda, biasanya menyerupai ini:
<script src='...js' type='text/javascript' />
Kemudian, aba-aba Lazyloadnya menyerupai 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>
kode diambil dari blog.kodejarwo.com
Ubah aba-aba yang diberi label kuning dengan link JavaScript yang sudah disimpan tadi,
Setelah itu simpan dan cek blog anda.
Jika pada blog tidak terjadi perubahan itu berarti berhasil atau template anda memang support.. kalau ada perbuhan maka lebih baik tidak dilanjutkan.
Sama menyerupai cara diatas, cari linknya, kemudian buka link tersebut. Nanti akan muncul kode-kode Javascript. Copy semua aba-aba tersebut, taruh diatas </body> dengan format menyerupai berikut:
<script type='text/javascript'>//<![CDATA[// Kode JavaScriptnya taro di sebelah Sini//]]></script>
Jika sudah selesai simpan dan Lihat hasilnya..
Simpan template dan lihat hasilnya. Oh ya, jangan ambil sembarang aba-aba JSnya, cari aba-aba JS dari link yang isinya kecil.