Catatan Kecil WebPageTest

Webpagetest adalah salah satu alat gratis untuk mengukur performa halaman website. Webpagetest memungkinkan kita untuk menjalankan tes performa website di sejumlah lokasi berbeda di seluruh dunia dan di sejumlah browser berbeda pula. Median run table: tabel yang menampilkan rata-rata dari berapa kali tes yang dijalankan. First view: Kunjungan pertama pengguna ke website. Repeat view: Kunjungan berikutnya setelah kunjungan pertama pengguna ke website. Pada kunjungan ini, website lebih cepat dimuat karena ada beberapa aset yang sudah di cache oleh browser pada fase First view....

April 27, 2020 · 3 min · Satya Kresna

Improvisasi Performa Web Pribadi Bagian 3

Pada tulisan ini, saya ingin mencari tahu bagimana cara agar gambar yang ada di dalam suatu artikel tidak dimuat semuanya dan hanya dimuat bila mereka muncul tepat di hadapan layar ponsel saya. Apa keuntungannya? Salah satunya menghemat biaya unduh gambar di dalam suatu artikel. Istilah ini sering disebut dengan lazy-load. IntersectionObserver merupakan kunci untuk menanggulangi hal ini. Caranya cukup mudah, Anda bisa melihat contohnya di CodePen, membaca artikel detailnya di Smashing Magazine, melihat commit yang saya buat di Gitlab....

June 4, 2019 · 1 min · Satya Kresna

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

June 1, 2019 · 2 min · Satya Kresna

Improvisasi Performa Web Pribadi

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. 1 convert avatar.jpg -resize 75% avatar_small....

June 1, 2019 · 5 min · Satya Kresna

Analisa Performa Web Pribadi

Saat tulisan ini dibuat, koneksi internet 3G berada di urutan kedua setelah 4G di Indonesia. Hal ini menyebabkan website yang diakses pastinya lebih lambat dibandingkan dengan 4G jika performa sebuah website tidak dipelihara dengan baik. Karena penasaran, saya menguji seberapa cepat website ini ditampilkan dengan koneksi 3G. Web ini menggunakan Hugo sebagai static generator yang mana hasil dari build-nya akan menghasilkan halaman-halaman statis beserta asetnya dan kemudian hosting di Netlify serta melakukan custom domain....

June 1, 2019 · 4 min · Satya Kresna