Cara Ampuh Untuk mengatasi Add Expires Header di GTmetrix YSlow
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 sekarang Skor blog saya adalah seperti Gambar dibawah ini heehe..
Dengan memiliki kecepatan tinggi bisa juga membuat para pengunjung nyaman dan betah.
Untuk itulah kali ini saya akan memberikan tutorial dan penjelasan bagaimana cara mengatasi Add expires header ini
Apa itu add Expires Headers
Expires header sendiri adalah suatu permasalahan yang terjadi Pada sebuah blog, Yang penyebabnya adalah penggunaan cache yang kurang maksimal.
Untuk masalah yang satu ini tergolong Mendapatkan prioritas tinggi.. Jadi jangan heran ya kalau kalian mendapatkan masalah seperti ini..
Add expires header ini berkaitan dengan Gambar, Script css, dan juga JavaScript.. Jadi saat anda membuka suatu website pasti browser akan mendownload Bagian dari web itu..
Jika tidak menggunakan expires header saat anda berkunjung kembali ke website yang sama makan anda tidak perlu mendownloadnya kembali..
Tetapi Jika menggunakan expires header maka anda tidak perlu mendownload lagi bagian bagian dari website tersebut karena sudah tersimpan.
Cara Mengatasi Add Expires Headers
Kalian pasti pernah melakukan search di google cara mengatasi add expires ini Dan menemukan banyak website yang bilang menggunakan Script seperti 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 setelah 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 adalah memakai Script Lazy Load
Jika belum tau apa itu lazy Load akan saya jelaskan.. LazyLoad berfungsi agar 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 kode ini 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>
Jika sudah ditaruh selanjutnya carilah gambar penyebabnya.. Biasa masalah terletak pada thumbnail..
Kurang Lebih bentuk kode nya itu seperti ini
<img class='...' expr:src='...' />
Tanda ... Adalah kode nya, Sesuaikan saja dengan Kode pada blog anda
Sekarang ubah menjadi seperti dibawah ini
<img class='... lazy' expr:data-src='...' />
Jika anda perhatikan Saya menambahkan kata Lazy dan mengubah kode src menjadi data-src
Gimana masih bingung?? Baiklah akan saya kasih contoh 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, jika anda melakukannya dengan benar maka speed blog anda akan bertambah.. Selain expires header masalah lainnya adalah Reduce DNS Looksup
B. Snippet count
Tidak semua template ada snippet count, jadi bila di blog anda tidak ada maka lanjut ke bagian selanjutnya
Pertama, cari kode yang mirip atau sama seperti 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 kode 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 masalah Lainnya Seperti Leverage Browser caching dan optimize Image Di PageSpeed.
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 ada di atribut href (yang saya miring & tebalkan tulisannya) pada notepad.
agar biar lebih mudah mencarinya gunakan CTRL + F Lalu tulis " .css " nanti akan muncul link yang berakhiran ,css
Kemudian, hapus semua kode diatas. biasanya, kode seperti diatas tidak hanya 1, melainkan ada beberapa, 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 (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 seperti 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 melakukan ini akan terjadi perubahan pada blog anda.. Karena kadang kadang cara ini tidak work karena beberapa Alasan.
Kalau untuk blog saya sih terbilang work
D. JavaScript
Untuk yang terakhir ini adalah Java Script.. Mungkin ini lah yang menjadi musuh utama para Blogger..
Karena Selain membuat blog menjadi berat, Dia jugalah yang menimbulkan berbagai macam Masalah Lainnya.
Seperti Render Blocking, Leverage, Serta minify
Cara yang bisa kita pakai untuk JS ini ada 2, yaitu dengan memakai Lazyload dan Inline. Tidak semua JS eksternal dapat dipakai kan Lazyload.
Tidak semua Java Script dapat dibuat ke dalam bentuk inline. Jadi saya sarankan untuk cara yang inline ini tidak dilakukan jika anda tidak mengerti sama sekali tentang JavaScript
Tetapi jika bisa ya silahkan Di Lanjutkan
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>
kode diambil dari blog.kodejarwo.com
Ubah kode 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.. jika ada perbuhan maka lebih baik tidak dilanjutkan.
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[// Kode JavaScriptnya taro di sebelah Sini//]]></script>
Jika sudah selesai simpan dan Lihat hasilnya..
Simpan template dan lihat hasilnya. Oh ya, jangan ambil sembarang kode JSnya, cari kode JS dari link yang isinya kecil.
BERITA LENGKAP DI HALAMAN BERIKUTNYA
Halaman Berikutnya
0 Response to "Cara Ampuh Untuk mengatasi Add Expires Header di GTmetrix YSlow"
Post a Comment