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:

  1. Chrome browser mode incognito,
  2. Melakukan tab audits dengan masuk ke dalam developer tools.
  3. Di tab audits yang harus dilakukan: mencentang opsi Device ke mobile, mencentang Performance pada opsi Audits, mencentang Simulated Fast 3G, 4x CPU Slowdown pada opsi Throttling agar membuat simulasi berjalan di koneksi fast 3G dan CPU diturunkan sebesar 4x, mencentang Clear storage agar tidak ada yang dicache.
  4. 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:

  1. Kita bisa mengetes website kita sesuai lokasi di mana user akan mengaksesnya,
  2. Mengatur koneksi,
  3. Memilih perangkat yang akan diuji dan perangkat tersebut memang asli yang sudah disediakan oleh webpagetest,
  4. Waterfall performance,
  5. Capture video untuk melihat berapa detik web kita dimuat dalam bentuk video,
  6. Lighthouse report.

Silahkan masuk ke webpagetest.org, klik pada tab Advanced Testing dan perhatikan pada kedua gambar di bawah.

Image of Web Page Test - Advanced Testing Part 1 Image of Web Page Test - Advanced Testing Part 2

Saat berada di tab Advanced Testing hal-hal yang biasanya diisi adalah:

  1. Mengisi alamat website pada field Enter a Website URL.
  2. Memilih opsi lokasi website kita akan di tes pada field Test Location. Saya memilih lokasi Jakarta karena hanya itu yang tersedia di Indonesia.
  3. Memilih opsi browser yang akan digunakan pada field Browser. Saya menggunakan browser Chrome.
  4. Di dalam tab Advanced Testing terdapat tab Test Settings dan kita akan berfokus pada field yang ada di dalam tab tersebut.
  5. Pilih koneksi ke 3G (1.6 Mbps/768 Kbps 300ms RTT) pada field Connection.
  6. Memasukkan jumlah tes untuk dijalankan. Saya memasukkan angka 3 pada field Number of Tests to Run.
  7. Memilih opsi First View dan Repeat View pada field Repeat View.
  8. Mencentang opsi pada field Capture Video untuk melihat berapa detik web kita dimuat dalam bentuk video.
  9. Masih di dalam tab Advanced Testing, kita bergeser ke tab Chromium.
  10. Centang opsi pada field Capture Lighthouse Report. Lighthouse akan berjalan dengan koneksi fast 3G terlepas dari opsi yang kita masukkan pada field Connection pada tab Test Settings.
  11. Pilih opsi Motorola G (gen 4) pada field Emulate 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.
  12. 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.

Image of Waterfall view run 1 - web page test

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:

  1. Google fonts untuk memuat font Roboto Mono.
  2. Cloudflare untuk memuat normalize.css.
  3. Font awesome.
  4. 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.

Image of link to go to lighthouse report

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.

Image of summary web performace my personal website

Peluang

Pada laporan Lighthouse, saya diberikan empat peluang untuk meningkatkan performa website saya:

  1. 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.
  2. Mengecilkan ukuran (size) avatar di website pribadi dari 329 KB ke 325 KB.
  3. Menyediakan avatar tersebut dalam format JPEG 2000, JPEG XR dan WebP yang mana memberikan kompresi lebih hemat dibandingkan JPEG atau PNG.
  4. Menambahkan preconnect atau dns-prefetch ke third party google analytics.

Di artikel berikutnya saya akan mengimprovisasi website saya sesuai dengan peluang yang disampaikan Lighthouse.