Bagaimana Cara Mendapatkan Nilai 99 di Google Page Speed Test ?

Mendapatkan nilai 90 keatas di google page speed test itu tidaklah mudah.

Kita lihat saja situs besar di Indonesia seperti Tokopedia atau Bukalapak, masing masing mentok diangka 40 dan 80an. Teman saya berpendapat kalau nilai 99 bisa didapat kalau situsnya cuma Hello World 😂. Ya itu benar sebenarnya, karena di situs yg polosan seperti itu tidak ada request keluar untuk mengambil asset. Kalau nilai 99 bisa didapat dengan situs polosan itu, maka sebenarnya untuk meraihnya agak sedikit tricky.

Cara ini sudah saya aplikasikan di blog ini, Resepnya sungguh mudah! tinggal “Inline”kan semua asset. Bagaimana maksudnya? begini : Inline

CSS

Mulai dengan css. Entah kalian menggunakan Sass, Less, atau vanilla css, yang biasa kalian lakukan adalah menggunakan tag link. Hal ini bikin halaman web jadi request file css, yang artinya memperlambat page untuk segera muncul. Jadi solusinya adalah tulis langsung di htmlnya.

<style>
    taruh kodemu disini
</style>

Hal ini bisa kalian akali menggunakan server side rendering atau jika kalian menggunakan jekyll bisa langsung taruh file css di folder include dan beri script berikut di bagian bawah body html

<div>
``"{% include your.css %}"
</div>

GAMBAR

Untuk gambar-gambar kecil seperti logo situs dan yg lain-lain, resepnya adalah menggunakan file SVG. kenapa? karena svg berbentuk seperti xml dan semua browser mendukungnya. Kalian bisa menggunakan inkscape untuk membuatnya kemudian buka file svg-nya menggunakan text-editor lalu copy paste di HTML.

Untuk membuat gambar biasa jadi inline seperti .jpg atau .png bisa mengkonversinya ke base64. Memang harus ada pertimbangan yg baik karena, dengan mengubahnya ke base64, maka file html akan jadi besar. Jadi gunakan dengan bijak. Untuk menggunakannya bisa dengan cara berikut

<img                 
    src='data:image/jpeg;base64, <!-- copy paste base64 nya disini -->' />

Nah, untuk mengubah file gambar jadi base64 bisa melalui commandline di linux, atau melalui tools-tools di internet. pasti ada

$ base64 gambar.jpg > text.txt #lalu buka, copy, paste isi text.txt

JAVASCRIPT

Tricknya sama seperti di css. Jangan buat request keluar. Jadikan satu di html

<script type="text/javascript">
    //kodemu disini
</script>

TIPOGRAFI

Ini juga penting karena kita biasanya menggunakan font dari luar seperti Google Fonts atau kita memasukkannya secara local. Pertanyaannya apa bisa di-inline-kan sekalian? Bisa. Pakai cara di bagian Gambar sebelumnya untuk encode ke base64. Tidak punya file font-nya? bisa didownload di Local Font. Disana ada semua font yang ada di Google Fonts. Saran saya pakai yang format .woff karena ukurannya termasuk kecil. Untuk memasukkannya bisa menggunakan code berikut di bagian css :

@font-face {
    font-family: 'Nunito';
    src: url(data:application/font-woff;base64, <!-- copy paste base64 nya disini -->')
    font-weight: 700;
    font-style: normal;
}

Bagian Tipografi ini juga sedikit tricky. Karena sewaktu saya taruh di bagian tag head, sudah benar tidak ada flashy-flashy halaman waktu fontnya berubah, cuma di Google Page Speed Test nya nilainya turun jadi 90. Karena apa? karena ukuran file di head sangat besar. Kalau bisa ukuran file sewaktu di head jangan melebihi 14 kB. Maka tricknya adalah taruh bagian font-face tadi di bagian bawah body, agar peforma halaman tetap baik. Cuma ya gt, ada yg harus dikorbankan yaitu halamannya jadi sedikit flashy karena perubahan font 😂.

NEXT STEP

Lakukan penghapusan spasi di semua html. Tools nya bisa cari di NPM atau Grunt. Saya belum berhasil di step ini wkwk. level selanjutnya uglify semua nama class dan id agar file html jadi semakin kecil.

Sekian post dari saya, semoga bermanfaat dan happy coding 😉

kamu di halaman ini selama .