Cara Ampuh Untuk mengatasi Add Expires Header di GTmetrix YSlow

FOLLOW www.instagram.com/ml_freak

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

Gimana? ijo ijo buka.. bikin adem mata dan gak kelamaan untuk menunggu loading blog..

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

Okelah kita masuk ke Bagian cara mengatasi Add expires Header.. Mungkin akan agak sedikit ribet. tapi ya kalau mau bisa haru mau susah dulu hehe.

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

Bagi yang belum tau, snippet count ialah suatu fitur dari beberapa template yang berfungsi sebabagi pengatur kata untuk ditampilkan pada deskripsi postingan di blog.

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.

Mungkin kode sekitar 20 baris saja Bila anda melihatnya dari versi desktop. Apabila terlalu besar akan mengakibatkan masalah yang baru Di PageSpeed. yaitu prioritize visible content

FOLLOW www.instagram.com/ml_freak

Jangan lupa share dan baca artikel lainnya