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.
Ketika dalam mode pengembangan (development) atau localhost kita bisa mengujinya dengan langkah-langkah berikut:
- Chrome browser mode incognito,
- Melakukan tab
audits
dengan masuk ke dalam developer tools. - Di tab
audits
yang harus dilakukan: mencentang opsiDevice
kemobile
, mencentangPerformance
pada opsiAudits
, mencentangSimulated Fast 3G, 4x CPU Slowdown
pada opsiThrottling
agar membuat simulasi berjalan di koneksi fast 3G dan CPU diturunkan sebesar 4x, mencentangClear storage
agar tidak ada yang dicache. - Jalankan
Run Audits
.
Mengapa harus incognito? Karena jika kita melakukan audits di mode normal maka akan mengganggu kinerja Lighthouse akibat adanya chrome extension(s) yang kita gunakan (bila ada). Isu terkait ada di sini.
Ketika sudah dalam mode production atau website sudah bisa diakses lewat internet, kita bisa mengujinya lebih jauh dengan menggunakan webpagetest.org. Webpagetest merupakan situs web yang bisa diandalkan untuk mengetes performa sebuah website lebih mendalam. Fitur-fitur yang menurut saya bisa diunggulkan antara lain:
- Kita bisa mengetes website kita sesuai lokasi di mana user akan mengaksesnya,
- Mengatur koneksi,
- Memilih perangkat yang akan diuji dan perangkat tersebut memang asli yang sudah disediakan oleh webpagetest,
- Waterfall performance,
- Capture video untuk melihat berapa detik web kita dimuat dalam bentuk video,
- Lighthouse report.
Silahkan masuk ke webpagetest.org, klik pada tab Advanced Testing
dan perhatikan pada kedua gambar di bawah.


Saat berada di tab Advanced Testing
hal-hal yang biasanya diisi adalah:
- Mengisi alamat website pada field
Enter a Website URL
. - Memilih opsi lokasi website kita akan di tes pada field
Test Location
. Saya memilih lokasi Jakarta karena hanya itu yang tersedia di Indonesia. - Memilih opsi browser yang akan digunakan pada field
Browser
. Saya menggunakan browser Chrome. - Di dalam tab
Advanced Testing
terdapat tabTest Settings
dan kita akan berfokus pada field yang ada di dalam tab tersebut. - Pilih koneksi ke
3G (1.6 Mbps/768 Kbps 300ms RTT)
pada fieldConnection
. - Memasukkan jumlah tes untuk dijalankan. Saya memasukkan angka
3
pada fieldNumber of Tests to Run
. - Memilih opsi
First View dan Repeat View
pada fieldRepeat View
. - Mencentang opsi pada field
Capture Video
untuk melihat berapa detik web kita dimuat dalam bentuk video. - Masih di dalam tab
Advanced Testing
, kita bergeser ke tabChromium
. - Centang opsi pada field
Capture Lighthouse Report
. Lighthouse akan berjalan dengan koneksi fast 3G terlepas dari opsi yang kita masukkan pada fieldConnection
pada tabTest Settings
. - Pilih opsi
Motorola G (gen 4)
pada fieldEmulate Mobile Browser
. Saya memilih Motorola G (gen 4) karena perangkat ini memiliki spesifikasi CPU yang rendah dan RAM 2GB seperti yang tertera pada situs GSM Arena. - Langkah terakhir tekan tombol
Test
di sebelah kanan dan kita perlu menunggu beberapa menit hingga webpagetest menampilkan seluruh hasilnya.
Hasil yang didapatkan tertera pada tautan ini dan mari kita amati waterfall first view pada run 1
.

Pada gambar di atas, halaman web membutuhkan waktu render sekitar 4.7 detik dan saat itu sudah dinyatakan interaktif pada kolom Page is Interactive
.
Terdapat pihak ketiga yang digunakan untuk memuat halaman ini antara lain:
- Google fonts untuk memuat font Roboto Mono.
- Cloudflare untuk memuat normalize.css.
- Font awesome.
- Google Analytics.
Berikutnya, kita akan mengamati hasil dari laporan Lighthouse untuk mengetahui nilai performa website dan apa-apa saja yang harus diimprovisasi. Silahkan klik tautan laporan di sini.

Skor Performa
Skor yang diperoleh adalah 76 dengan catatan First Contentful Paint
sebesar 3.6 detik, First Meaningful Paint
sebesar 3.7 detik dan Time to Interactive
sebesar 4.4 detik. Pada bagian waktu Time to Interactive
di lighthouse sedikit lebih cepat 0.3 detik dibandingkan waterfall tadi karena Lighthouse menggunakan koneksi 3G fast untuk melakukan testing dari bawaannya.

Peluang
Pada laporan Lighthouse, saya diberikan empat peluang untuk meningkatkan performa website saya:
- Mengeliminasi sumber yang bersifat render-blocking dengan cara menyisipkan JS/CSS yang bersifat kritikal dengan metode inline dan menunda (
defer
) semua JS/CSS yang tidak kritikal. Sumber-sumber tersebut meliputi google font, font-awesome dan normalize.css. - Mengecilkan ukuran (size) avatar di website pribadi dari 329 KB ke 325 KB.
- Menyediakan avatar tersebut dalam format JPEG 2000, JPEG XR dan WebP yang mana memberikan kompresi lebih hemat dibandingkan JPEG atau PNG.
- Menambahkan preconnect atau dns-prefetch ke third party google analytics.
Di artikel berikutnya saya akan mengimprovisasi website saya sesuai dengan peluang yang disampaikan Lighthouse.