Web Performance
Web performance adalah kualitas kecepatan dan efisiensi pengalaman website atau aplikasi web. Cakupannya meliputi pengiriman resource, kemunculan content, responsiveness terhadap input, visual stability, serta konsumsi CPU, memory, network, dan server.
Performance bukan satu waktu loading. Core Web Vitals memisahkan tiga outcome pengguna: loading melalui LCP, responsiveness melalui INP, dan visual stability melalui CLS.
Loading
Loading dimulai sebelum browser menerima HTML. DNS, connection setup, TLS, server processing, redirects, cache policy, dan network latency memengaruhi waktu pengiriman. Setelah itu browser menemukan, mengunduh, mem-parsing, dan merender resources.
MDN menjelaskan bahwa latency dan beban main thread merupakan dua masalah utama. Request chain panjang, render-blocking CSS, JavaScript besar, images, fonts, dan third-party scripts dapat menunda content.
LCP mengukur kapan elemen content terbesar yang terlihat selesai dirender. Panduan LCP menetapkan target 2,5 detik atau kurang pada persentil ke-75, dipisahkan antara mobile dan desktop.
LCP bukan ukuran seluruh kesiapan halaman. Content dapat terlihat sebelum event handler siap, sedangkan halaman interaktif dapat memiliki elemen terbesar yang lambat karena image tertentu.
Responsiveness
Responsiveness menggambarkan seberapa cepat interface memberi frame berikutnya setelah click, tap, atau keyboard input. JavaScript task panjang, rendering mahal, synchronous layout, dan event handler berat dapat menunda feedback.
INP menilai interaction latency sepanjang kunjungan. Nilai 200 milidetik atau kurang dipandang baik pada persentil ke-75. Metric ini biasanya melaporkan interaksi terburuk dengan perlakuan outlier untuk halaman yang memiliki banyak interaksi.
INP tidak mengukur seluruh interaction quality. Scrolling, animation smoothness, correctness, dan task completion membutuhkan metric atau pengujian tambahan.
Visual stability
Layout shift yang tidak diharapkan dapat membuat pengguna kehilangan posisi membaca atau menekan kontrol yang salah. Penyebab umum mencakup media tanpa dimensi, advertisement, content injection, dan pergantian font.
CLS menilai pergeseran melalui proporsi viewport yang terdampak dan jarak perpindahan. Target yang direkomendasikan adalah 0,1 atau kurang pada persentil ke-75.
CLS rendah tidak menjamin layout mudah dipahami atau accessible. Ia mengukur unexpected movement, bukan seluruh mutu visual dan interaction design.
Lab dan field
Lab data berasal dari device dan network preset yang dikendalikan. Data ini reproducible dan cocok untuk debugging, eksperimen, serta regression testing sebelum rilis.
Field data berasal dari kunjungan nyata. Ia mencakup keragaman device, network, geography, cache state, route, interaction, dan user behavior, tetapi aggregation dapat menyembunyikan cohort lambat.
Perbedaan lab dan field bukan kontradiksi otomatis. Field data menilai outcome produksi, sedangkan lab traces membantu menemukan penyebab yang dapat ditindaklanjuti.
Strategi optimasi
Mulai dari bottleneck yang terukur. Perbaikan dapat mencakup caching, compression, image sizing, font loading, resource prioritization, code splitting, pengurangan third-party code, server tuning, serta pembagian long task.
Performance budget dan automated checks mencegah regresi, tetapi threshold lokal harus mengikuti route dan populasi pengguna. Lighthouse menyediakan lab audit, sedangkan Chrome DevTools mendukung trace, network inspection, dan profiling.
Pengukuran produksi perlu dipisahkan menurut mobile, desktop, route, geography, dan release. Nilai persentil lebih berguna daripada average karena memperlihatkan pengalaman pengguna yang lebih lambat.
Dampak dan batas
Performance dapat memengaruhi engagement, conversion, dan satisfaction, tetapi dampaknya kontekstual. Kumpulan studi kasus web.dev menunjukkan asosiasi positif pada beberapa organisasi, bukan uplift universal.
Core Web Vitals tidak menggantikan accessibility, reliability, security, correctness, atau task success. Sebuah produk dapat lulus threshold dan tetap gagal memenuhi kebutuhan pengguna.
Web Performance berhubungan dengan Web Browser, HTTP, Cache-Control, Service Workers, Server-Side Rendering, Static Site Generators, dan Testing Your Apps.