Di artikel sebelumnya, saya telah diberikan daftar peluang oleh Lighthouse report untuk meningkatkan performa website saya. Sekarang waktunya saya membagikan referensi yang saya peroleh untuk meningkatkan performa tersebut. Referensi yang saya gunakan rata-rata didapatkan dari situs web.dev
Mengecilkan ukuran (size) avatar di website pribadi
Saya menggunakan ImageMagick sebuah CLI untuk mengubah ukuran avatar di website pribadi saya dan me-resize avatar sekitar 75%. Perintahnya cukup sederhana.
|
|
Hasil yang saya peroleh sekarang adalah avatar dengan ukuran 26 KB. Silahkan dibaca lebih lanjut di artikel Serve images with correct dimmensions.
Menyediakan avatar tersebut dalam format JPEG 2000, JPEG XR dan WebP
Hasil avatar 26 KB tersebut saya gunakan untuk dikonversi ke dalam format WebP dengan menggunakan cwebp (CLI tool). Untuk menggunakan cwebp cukup sederhana, silahkan unduh di tautan ini dan cari versi paling baru di bagian paling bawah.
Berikutnya, ekstrak unduhan tadi dan masuk ke dalam folder examples
dengan menggunakan command line atau cmd. Kemudian, pindahkan avatar 26 KB tadi ke dalam folder examples
tersebut dan menjalankan dengan perintah:
|
|
Angka 40 tersebut mengacu pada kualitas webp tersebut, semakin kecil angkanya maka semakin kecil pula kualitas dan ukuran gambarnya.
Setelah berhasil mengubah format avatar ke dalam webp, langkah terakhir adalah cara menyajikan gambar dengan format webp tersebut ke dalam browser. WebP saat ini belum didukung oleh Safari saat artikel ini ditulis, sehingga jika gagal dimuat maka yang akan dimuat adalah format JPG.
Dengan menggunakan tag picture
dan source
, kita dapat menanggulangi hal tersebut.
Jika sebelumnya sintaks untuk menampilkan gambar seperti ini
|
|
Maka sekarang seperti ini
|
|
Browser akan menggunakan urutan source
yang pertama yakni image/webp, jika gagal maka akan menggunakan image/jpg.
Untuk lebih lanjut silahkan baca Use WebP images.
Mengeliminasi sumber yang bersifat render-blocking
Terdapat tiga sumber dari pihak ketiga yang bersifat render-blocking antara lain font-awesome, normalize.css, dan google fonts. Kemudian dengan sumber pribadi yakni coder.min.css yang merupakan theme dari website pribadi. Saya akan jabarkan satu per satu.
Font awesome
Jika saya perhatikan kembali halaman depan web saya, saya hanya menggunakan font awesome untuk icon Github, Medium, Linkedin, Twitter dan Bar (hamburger menu mobile web). Sehingga solusi yang bisa dipakai adalah menampilkan icon tersebut dalam format svg yang sudah diunduh dari repository Font Awesome.
Kemudian, agar icon tersebut benar-benar tampil kita set class .inline-svg
dan memasang atribut fill="currentColor"
agar warna svg sesuai dengan warna yang dipasang oleh induk body
.
|
|
Cara memasang svg bisa dilihat di repositori website pribadi saya.
Psst, saya dapatkan referensi tersebut dari website pribadi mas Yohan Totting. Cukup inspect element. ๐คซ
Berikutnya, setelah selesai saya tinggal hapus saja CDN font-awesome. ๐
Normalize CSS
Fungsinya adalah untuk menormalisasi style CSS bawaan browser agar seragam. Setelah saya amati repositorinya ternyata sudah lebih dari 3 tahun. Alhasil saya mencari dan mendapatkan mordern-normalize milik Sindre Sorhus. Berikutnya, saya tinggal mengeluarkan semua isi dari modern-normalize dan minify CSS nya, taruh sebagai internal style di dalam tag head
dan pastinya lebih cepat dimuat karena tidak memanggil CDN modern-normalize. ๐
Google fonts
Saya memiliki tips agar cukup menggunakan satu font dengan dua ukuran misalnya saya menggunakan font Roboto Mono dengan ukuran 400 dan 700. Kemudian, saya hanya memilih opsi Latin saja pada Roboto Mono ini. Agar font saya lebih cepat diunduh oleh browser maka saya menggunakan atribut preload
dan preconnect
untuk memajukan DNS dan TLS handshake.
|
|
Untuk detailnya silahkan baca tentang Preconnect, Preload Google Fonts dan Preload web fonts to improve loading speed
Coder.min.css
Tidak semua style dalam file coder.min.css dimuat dalam browser. Jadi, saya pikir saya bisa menarik isi-isi yang diperlukan (termasuk media query yang diperlukan) untuk memuat halaman utama website saya. Dengan adanya artikel yang disediakan oleh web.dev tentang Defer non-critical CSS membantu saya melakukan langkah-langkahnya.
Menambahkan preconnect atau dns-prefetch ke third party google analytics
dns-prefetch = DNS dan preconnect = DNS + TCP + TLS. Alhasil, saya memilih opsi preconnect karena sudah dilengkapi dengan DNS, TCP dan TLS. Hanya saja gunakan atribut preconnect
secara bijak seperti yang disampaikan di tautan ini.
Tambahan: defer google analytics
Saya menggunakan Google Analytics di web pribadi untuk memantau jumlah orang yang membuka tautan artikel saya. Hanya saja, saya lebih memprioritaskan website saya dimuat semuanya kemudian barulah Google Analytics atau Google Analytics belakangan saja tidak apa. Akhirnya saya menggunakan atribut defer
untuk Google Analytics seperti skrip di bawah.
|
|
Setelah mengimplementasikan hal-hal di atas, skor performa website saya naik sekitar 96-99 dengan catatan First Contentful Paint
sebesar 1.9 detik, First Meaningful Paint
sebesar 1.9 detik dan Time to Interactive
sebesar 2.0 detik. ๐
Hasilnya bisa diklik pada tautan ini.

Untuk waterfall first view di run 1
halaman web membutuhkan waktu render sekitar 3.5 detik dan saat itu sudah dinyatakan interaktif pada kolom Page is Interactive
. Dari waterfall tersebut hanya memuat dua sumber pihak ketiga yakni Google Fonts dan Google Analytics. Hasilnya bisa diklik pada tautan ini.
