Kita semua pernah mendengar betapa pentingnya performa. Namun, ketika berbicara tentang performa, dan membuat situs web "cepat", apa yang kami maksud?
Faktanya, performa itu relatif:
- Situs mungkin cepat untuk satu pengguna (pada jaringan cepat dengan perangkat canggih), tetapi lambat untuk pengguna lainnya (pada jaringan lambat dengan perangkat kelas bawah).
- Dua situs mungkin selesai dimuat dalam waktu yang sama persis, tetapi salah satunya dapat tampak dimuat lebih cepat jika memuat konten secara bertahap, daripada menunggu hingga selesai untuk menampilkan apa pun.
- Situs mungkin terlihat dimuat dengan cepat, tetapi kemudian merespons interaksi pengguna dengan lambat, atau tidak merespons sama sekali.
Ketika berbicara tentang performa, yang penting harus tepat dan merujuk pada performa dalam hal metrics, yaitu kriteria objektif yang dapat diukur secara kuantitatif. Namun, penting juga untuk memastikan metrik yang Anda ukur berguna.
Metrik
Secara historis, performa web telah diukur dengan peristiwa
load. Namun, meskipun load adalah momen yang didefinisikan dengan baik dalam siklus proses halaman, momen tersebut belum tentu berkaitan dengan apa pun yang menjadi perhatian pengguna.
Misalnya, server dapat merespons dengan halaman minimal yang langsung "dimuat",
tetapi kemudian menunda pengambilan konten atau menampilkan apa pun di halaman
hingga beberapa detik setelah peristiwa load diaktifkan. Halaman tersebut secara teknis memiliki
waktu pemuatan yang cepat, tetapi waktu tersebut tidak sesuai dengan pengalaman
pemuatan halaman yang dialami pengguna.
Selama beberapa tahun terakhir, anggota tim Chrome, yang bekerja sama dengan W3C Web Performance Working Group, telah berupaya menstandarkan serangkaian API dan metrik baru yang lebih akurat mengukur pengalaman pengguna terhadap performa halaman web.
Untuk membantu memastikan metrik tersebut relevan bagi pengguna, kami membingkainya dengan beberapa pertanyaan utama:
| Apakah ada perubahan? | Apakah navigasi berhasil dimulai? Apakah server merespons? |
| Apakah presentasi ini bermanfaat? | Apakah sudah ada cukup konten yang dirender sehingga pengguna dapat berinteraksi dengan konten tersebut? |
| Apakah nama ini dapat digunakan? | Dapatkah pengguna berinteraksi dengan halaman, atau apakah halaman itu sibuk? |
| Apakah menyenangkan? | Apakah interaksinya lancar dan alami, tanpa jeda dan jank? |
Cara metrik diukur
Metrik performa umumnya diukur dengan salah satu dari dua cara berikut:
- Di lab: menggunakan alat untuk menyimulasikan pemuatan halaman di lingkungan yang konsisten dan terkontrol
- Di kolom: pada pengguna sungguhan yang benar-benar memuat dan berinteraksi dengan halaman
Tak satu pun dari opsi ini yang lebih baik atau lebih buruk dari yang lain. Sebenarnya, sebaiknya Anda menggunakan keduanya untuk memastikan performa yang baik.
Di laboratorium
Menguji performa di lab sangat penting saat mengembangkan fitur baru. Sebelum fitur dirilis dalam produksi, karakteristik performanya tidak dapat diukur pada pengguna sungguhan. Jadi, mengujinya di lab sebelum fitur dirilis adalah cara terbaik untuk mencegah regresi performa.
Di lapangan
Di sisi lain, meskipun pengujian di lab adalah proxy yang wajar untuk performa, hal ini tidak selalu mencerminkan pengalaman semua pengguna di situs Anda.
Performa situs dapat sangat bervariasi berdasarkan kemampuan perangkat dan kondisi jaringan pengguna. Hal ini juga dapat bervariasi berdasarkan apakah (atau bagaimana) pengguna berinteraksi dengan halaman.
Pemuatan halaman juga tidak selalu deterministik. Misalnya, situs yang memuat konten atau iklan yang dipersonalisasi dapat mengalami karakteristik performa yang sangat berbeda dari satu pengguna ke pengguna lainnya. Uji lab tidak akan menangkap perbedaan tersebut.
Satu-satunya cara untuk benar-benar mengetahui performa situs bagi pengguna adalah dengan benar-benar mengukur performanya saat pengguna tersebut memuat dan berinteraksi dengan situs. Jenis pengukuran ini biasa disebut Real User Monitoring (RUM).
Jenis metrik
Ada beberapa jenis metrik lain yang relevan dengan persepsi pengguna terhadap performa:
- Kecepatan pemuatan yang dirasakan: seberapa cepat halaman dapat memuat dan merender semua elemen visualnya ke layar.
- Daya respons pemuatan: seberapa cepat halaman dapat memuat dan mengeksekusi kode JavaScript apa pun yang diperlukan agar komponen dapat merespons interaksi pengguna dengan cepat.
- Responsivitas runtime: seberapa cepat halaman dapat merespons interaksi pengguna setelah dimuat.
- Stabilitas visual: apakah elemen pada halaman berubah dengan cara yang tidak diharapkan pengguna, sehingga berpotensi mengganggu interaksi mereka?
- Kehalusan: apakah transisi dan animasi dirender pada kecepatan frame yang konsisten dan mengalir dengan lancar dari satu status ke status berikutnya?
Dengan semua jenis metrik performa ini, diharapkan sudah jelas bahwa tidak ada satu metrik yang cukup untuk menangkap semua karakteristik performa sebuah halaman.
Metrik penting untuk diukur
- First Contentful Paint (FCP)
- Waktu dari saat halaman mulai dimuat hingga saat bagian mana pun dari konten halaman dirender di layar. (lab, kolom)
- Largest Contentful Paint (LCP)
- Waktu sejak halaman mulai dimuat hingga blok teks atau elemen gambar terbesar dirender di layar. (lab, kolom)
- Interaksi ke Next Paint (INP)
- Latensi setiap ketukan, klik, atau interaksi keyboard yang dilakukan dengan halaman. Berdasarkan jumlah interaksi, metrik ini memilih latensi interaksi terburuk (atau hampir terburuk) pada halaman sebagai nilai representatif tunggal untuk menjelaskan responsivitas halaman secara keseluruhan. (lab, kolom)
- Total Waktu Pemblokiran (TBT)
- Jumlah total waktu antara FCP dan Time to Interactive (TTI) saat thread utama diblokir cukup lama untuk mencegah respons input. (lab)
- Pergeseran Tata Letak Kumulatif (CLS)
- Skor kumulatif dari semua pergeseran tata letak tidak terduga yang terjadi antara saat halaman mulai dimuat hingga status siklus proses berubah menjadi tersembunyi. (lab, kolom)
- Time to First Byte (TTFB)
- Waktu yang diperlukan jaringan untuk merespons permintaan pengguna dengan byte pertama resource. (lab, kolom)
Daftar ini mencakup metrik yang mengukur berbagai aspek performa yang relevan bagi pengguna, tetapi tidak mencakup semuanya. Misalnya, respons dan kelancaran runtime tidak dibahas.
Dalam beberapa kasus, metrik baru akan diperkenalkan untuk mencakup area yang tidak ada, tetapi dalam kasus lain, metrik terbaik adalah metrik yang secara khusus disesuaikan dengan situs Anda.
Metrik kustom
Metrik performa yang tercantum di sini berguna untuk mendapatkan pemahaman umum tentang karakteristik performa pada sebagian besar situs di web. Performa Maksimal juga bagus karena memiliki sekumpulan metrik umum bagi situs untuk membandingkan performanya dengan pesaing.
Namun, ada kalanya situs tertentu bersifat unik sehingga memerlukan metrik tambahan untuk memberikan gambaran performa lengkap. Misalnya, metrik LCP dimaksudkan untuk mengukur kapan konten utama halaman telah selesai dimuat, tetapi mungkin ada kasus saat elemen terbesar bukan merupakan bagian dari konten utama halaman sehingga LCP tidak relevan.
Untuk mengatasi kasus tersebut, Web Performance Working Group juga telah menstandarkan API tingkat rendah yang dapat berguna untuk menerapkan metrik kustom Anda sendiri:
- User Timing API
- API Tugas Panjang
- Element Timing API
- Navigation Timing API
- Resource Timing API
- Waktu server
Lihat panduan Metrik Kustom untuk mempelajari cara menggunakan API ini guna mengukur karakteristik performa khusus untuk situs Anda.