Performance web artinya seberapa cepat halamanmu muncul dan seberapa sigap dia merespons waktu dipakai. Bayangin antre di kasir minimarket. Antreannya pendek, kamu bayar lalu pulang. Antreannya mengular, banyak orang menaruh keranjangnya dan keluar, padahal barangnya sudah dipilih. Halaman yang lambat itu antrean panjang: pengunjungnya pergi sebelum sempat melihat isinya.
🧪 Tebakan cepat: halaman yang tadinya muncul dalam 1 detik melambat jadi 3 detik. Menurut riset Google, peluang pengunjung langsung pergi naik berapa: 5%, 32%, atau 300%? Tebak dulu, jawabannya ada di bagian "Lambat sedikit, pergi banyak".
Load time dan bounce
Dua istilah dulu:
- Load time adalah waktu dari pengunjung membuka link sampai halamannya siap dipakai. Biasanya ditulis dalam milidetik (ms): 1.000 ms = 1 detik.
- Bounce artinya pengunjung datang lalu pergi tanpa melakukan apa-apa: gak klik, gak pindah ke halaman lain. Bounce rate adalah persentase kunjungan yang begitu.
Makin lama load time, makin banyak yang bounce. Mereka menutup tab, menekan tombol back, atau pindah ke situs saingan.
Lambat sedikit, pergi banyak
Dua temuan yang paling sering dikutip:
| Siapa | Temuannya |
|---|---|
| Google (riset halaman mobile, 2017) | load time naik dari 1 detik ke 3 detik: peluang bounce naik 32% |
| Amazon (eksperimen internal) | tiap 100 ms tambahan latency: penjualan turun sekitar 1% |
Latency adalah jeda tunggu, di sini waktu tambahan sebelum halaman merespons. 100 ms itu sepersepuluh detik, kedip mata saja hampir segitu. Tapi kalau transaksinya jutaan, 1% penjualan itu uang yang besar.
Itu jawaban tebakannya: dari 1 ke 3 detik, peluang bounce naik 32%. Di riset Google yang sama, dari 1 ke 5 detik naiknya 90%, dan dari 1 ke 10 detik naiknya 123%.
Google juga menilai kecepatan halaman. Google mengukur pengalaman pengguna lewat tiga angka bernama Core Web Vitals (ada pelajarannya sendiri) dan memakainya sebagai salah satu sinyal ranking di hasil pencarian.
Kasih label ke load time
Angka mentah seperti 2.500 ms enak dibaca kalau diberi label. Ini label buatan kita sendiri untuk latihan, bukan standar resmi:
| Load time | Label |
|---|---|
| sampai 1.000 ms | "excellent" |
| di atas 1.000 sampai 3.000 ms | "acceptable" |
| di atas 3.000 sampai 5.000 ms | "poor" |
| di atas 5.000 ms | "critical" |
function calculateLoadImpact(loadTimeMs) {
if (loadTimeMs <= 1000) return "excellent";
if (loadTimeMs <= 3000) return "acceptable";
if (loadTimeMs <= 5000) return "poor";
return "critical"; // sisanya: di atas 5.000 ms
}
console.log(calculateLoadImpact(800)); // "excellent"
console.log(calculateLoadImpact(1000)); // "excellent"
console.log(calculateLoadImpact(2500)); // "acceptable"
console.log(calculateLoadImpact(3001)); // "poor"
console.log(calculateLoadImpact(7000)); // "critical"
- Batasnya dicek dari yang terkecil.
ifpertama yang cocok langsungreturn, jadi baris sesudahnya gak dijalankan lagi. <=artinya "lebih kecil atau sama dengan". 1.000 masih"excellent", karena 1.000 <= 1.000.- 3.001 lolos dari
<= 3000, lalu kena<= 5000, jadi"poor". - Baris terakhir gak butuh
if. Kalau semua batas terlewati, angkanya pasti di atas 5.000.
Cepat di laptopmu belum tentu cepat buat semua
Banyak pengunjung membuka web dari HP murah dengan sinyal yang naik turun. Halaman yang muncul 1 detik di laptop dan WiFi kantor bisa jadi 5 detik di HP mereka. Bikin halaman cepat artinya bikin halaman yang bisa dipakai semua orang, bukan cuma yang HP-nya mahal.
Halaman juga gampang melambat pelan-pelan: tiap fitur baru menambah gambar dan JavaScript. Di pelajaran-pelajaran berikutnya kamu belajar mengukurnya, membaca angkanya, dan memangkas yang bikin lambat.
⚠️ Jebakan yang sering ketemu
- Ngetes cuma di laptop kencang. WiFi kantor dan laptop baru bukan kondisi kebanyakan pengunjung. Chrome DevTools bisa meniru jaringan dan CPU yang lambat (throttling).
- "Nanti aja dioptimasi." Halaman yang sudah berat susah dirampingkan belakangan. Pasang batasnya dari awal, namanya performance budget.
- Ngoprek hal kecil, lupa yang besar. Debat
forlawanforEachgak ada artinya kalau di halaman yang sama ada gambar 5 MB. - Salah batas di latihan. Pakai
<=, bukan<. Dengan<, angka 1.000 jatuh ke"acceptable", padahal harusnya"excellent".
TL;DR: Load time adalah waktu sampai halaman siap dipakai, dan bounce adalah pengunjung yang pergi tanpa melakukan apa-apa. Makin lambat halaman, makin banyak yang bounce: riset Google menemukan dari 1 ke 3 detik peluang bounce naik 32%, dan Amazon menemukan tiap 100 ms tambahan latency menurunkan penjualan sekitar 1%. Google juga memakai Core Web Vitals sebagai sinyal ranking. Di latihan, beri label dengan if dan <= dari batas terkecil: sampai 1.000 "excellent", sampai 3.000 "acceptable", sampai 5.000 "poor", sisanya "critical". Tes juga di HP dan jaringan lambat, bukan cuma di laptopmu.
