Improvisasi Performa Web Pribadi Bagian 2

Saya masih penasaran kira-kira apa yang bisa saya lakukan agar skor performa website pribadi saya bisa naik menjadi 100? Setelah membaca artikel preload Google Fonts yang menyatakan bahwa Google Fonts cukup sering diperbaharui dan dapat kadarluarsa sewaktu-waktu sehingga disarankan agar web font yang saya gunakan di simpan di host milik saya.

Kemudian, saya membaca kembali waterfall terakhir dan melihat sebuah peluang untuk mewujudkan hal di atas. Saya memutuskan untuk menghapus CDN Google Fonts dan menyimpan font yang saya gunakan di host milik saya.

Image of analyze waterfall view run 1 part 2

Sebelum:

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&display=swap" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&display=swap">
<link rel="preload" href="https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/robotomono/v6/L0xkDF4xlVMF-BfR8bXMIjDwjmqxf7-pAVU_.woff2" as="font" type="font/woff2" crossorigin>

Sesudah:

<link rel="preload" href="{{ "fonts/Roboto-mono.woff2" | absURL }}" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="{{ "fonts/Roboto-mono-bold.woff2" | absURL }}" as="font" type="font/woff2" crossorigin>
<style>
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400;font-display:swap;src:local('Roboto Mono'),local('RobotoMono-Regular'),url(fonts/Roboto-mono.woff2) format('woff2')}@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:700;font-display:swap;src:local('Roboto Mono Bold'),local('RobotoMono-Bold'),url(fonts/Roboto-mono-bold.woff2) format('woff2')}
</style>

Setelah diuji menggunakan webpagetest.org hasilnya sesuai perkiraan yakni skor performa website pribadi saya bernilai 100 dengan catatan First Contentful Paint sebesar 1.1 detik, First Meaningful Paint sebesar 1.1 detik dan Time to Interactive sebesar 1.9 detik. ๐ŸŽŠ Hasil laporan bisa dibuka di tautan ini.

Image of web performance score personal website part 3

Kemudian di waterfall view run 1 halaman web membutuhkan waktu dirender sekitar 2.3 detik dan saat itu sudah dinyatakan interaktif pada kolom Page is Interactive. Waterfall tersebut hanya memuat satu sumber dari pihak ketiga yakni Google Analytics. Hasilnya bisa diklik pada tautan ini.

Image of waterfall view run 1 part 3

Perlu diketahui bahwa ini hanya halaman depan saat website tersebut dimuat. Halaman lain bisa jadi butuh perlakuan tertentu atau bisa jadi sama untuk ditingkatkan performanya.