Halaman bisa terlihat rapi tetapi tetap terasa lambat atau tidak stabil saat dibuka melalui ponsel, jaringan, atau browser tertentu. Core Web Vitals menyediakan cara praktis untuk mengukur tiga bagian pengalaman itu: seberapa cepat konten utama tampil, seberapa cepat halaman merespons masukan pengguna, dan apakah konten bergeser tanpa diduga ketika halaman digunakan.
Metrik ini tidak menggantikan riset usability atau ukuran bisnis, tetapi membantu tim menemukan masalah pengalaman yang perlu ditangani. Set Core Web Vitals saat ini terdiri dari LCP, INP, dan CLS.
Poin utama
Gagasan yang paling penting untuk dibawa setelah membaca.
- LCP mengukur loading, INP mengukur responsivitas, dan CLS mengukur pergeseran layout yang tidak diharapkan.
- Ambang kategori baik adalah LCP maksimal 2,5 detik, INP maksimal 200 milidetik, dan CLS maksimal 0,1.
- Nilai persentil ke-75 dari kunjungan nyata, bukan satu pengujian laboratorium saja.
- Perbaiki sumber hambatan metrik, bukan menerapkan trik kecepatan secara umum.
- Uji ulang perangkat mobile, template halaman, dan interaksi nyata setelah perubahan berarti.
Core Web Vitals secara ringkas
Geser untuk membandingkan
4 kolom| Metrik | Yang diukur | Ambang baik | Ambang buruk |
|---|---|---|---|
| LCP | Waktu hingga elemen konten terbesar yang terlihat selesai dirender | ≤ 2,5 detik | > 4,0 detik |
| INP | Responsivitas berbagai interaksi pengguna | ≤ 200 ms | > 500 ms |
| CLS | Pergeseran layout yang tidak diharapkan | ≤ 0,1 | > 0,25 |
Ambang tersebut dijelaskan dalam panduan Core Web Vitals web.dev. Jika tersedia, gunakan data pengguna nyata karena perangkat, jaringan, pola interaksi, dan jenis halaman dapat mengubah hasil.
LCP: tampilkan konten utama lebih cepat
Largest Contentful Paint memperkirakan waktu ketika konten utama yang terlihat sudah tampil. Elemen ini bisa berupa gambar hero, blok judul besar, atau gambar konten utama. Mengecilkan aset yang tidak terkait belum tentu membantu jika elemen LCP tertunda karena penemuan resource, respons server, atau proses render.
Penyebab LCP lambat
- Respons server lambat atau rendering awal yang berat.
- Gambar hero baru ditemukan terlambat atau mendapat prioritas pemuatan rendah.
- Gambar berukuran terlalu besar sehingga lama diunduh dan didekode.
- CSS atau JavaScript menghambat rendering sebelum konten utama siap.
- Skrip pihak ketiga berebut bandwidth dan waktu main thread.
Cara menyelidiki LCP
Identifikasi elemen LCP lewat alat performance browser dan pisahkan waktu respons server, jeda pemuatan resource, durasi unduhan, serta jeda render. Prioritaskan aset LCP yang sebenarnya, sediakan ruang dimensinya, dan pastikan browser bisa menemukannya lebih awal. Uji hasil di kondisi mobile yang realistis.
INP: jaga interaksi tetap responsif
Interaction to Next Paint mengukur seberapa cepat halaman memberi respons visual setelah interaksi, misalnya membuka menu, menerapkan filter, mengirim formulir, atau berpindah tab. INP mengamati beberapa interaksi, bukan hanya satu klik terpisah.
Penyebab INP buruk
- Tugas JavaScript panjang yang memblokir main thread.
- Event handler berat atau perhitungan sinkron berulang.
- Terlalu banyak konten dirender setelah satu tindakan.
- Skrip pihak ketiga yang bersaing dengan antarmuka.
- Desain interaksi yang menunggu seluruh request selesai sebelum memberi respons.
Pastikan status berikutnya terlihat jelas
Pecah tugas panjang, kurangi render ulang yang tidak perlu, tunda pekerjaan non-kritis, dan buat event handler tetap ringan. Untuk tindakan yang menunggu jaringan, tampilkan status proses yang jelas lalu perbarui bagian terkait ketika respons tiba. Umpan balik tidak menggantikan optimasi performa, tetapi membantu pengguna memahami bahwa tindakan mereka sudah diterima.
CLS: cegah pergeseran layout
Cumulative Layout Shift mengukur pergeseran konten yang terlihat dan tidak diharapkan. Tombol yang berpindah saat pengguna akan menekannya bukan sekadar masalah kosmetik; hal ini dapat menyebabkan salah klik dan membuat halaman terasa tidak dapat diandalkan.
Penyebab layout shift
- Gambar atau video tanpa dimensi atau rasio aspek yang disediakan.
- Iklan, embed, dan banner yang disisipkan di atas konten yang sudah tampil.
- Font yang mengubah ukuran teks setelah render pertama.
- Komponen yang membesar tanpa ruang yang disediakan saat data muncul.
- Animasi yang mengubah properti layout alih-alih transform atau opacity.
Stabilkan layout sebelum konten tersedia
Sediakan dimensi media, gunakan container aspect-ratio, hindari menyisipkan konten di atas posisi baca pengguna, dan kelola pemuatan font dengan sengaja. Uji halaman ketika konten, font, serta embed sedang dimuat, bukan hanya pada tampilan akhirnya.
Gunakan data lapangan dan lab testing bersama
Data lapangan menunjukkan pengalaman pengunjung di perangkat dan jaringan nyata. Pengujian laboratorium membantu mengulang dan mendiagnosis penyebab dalam kondisi terkontrol. Gunakan tren lapangan untuk memilih prioritas, lalu gunakan trace dan alat browser untuk mencari alasan metrik buruk.
Alur optimasi yang praktis
Checklist performa
- Identifikasi template, perangkat, dan perjalanan pengguna yang terdampak.
- Periksa data lapangan dan kelompokkan berdasarkan jenis halaman bila tersedia.
- Temukan elemen LCP yang sebenarnya dan periksa jeda request serta render.
- Catat long task dan event handler berat yang memengaruhi interaksi utama.
- Sediakan dimensi media dan komponen terlambat untuk mengurangi CLS.
- Uji ulang dalam kondisi CPU dan jaringan mobile yang realistis.
- Pantau setelah rilis untuk memastikan pengalaman lapangan membaik.
Prioritaskan berdasarkan dampak kepada pengguna
Mulai dari masalah yang memengaruhi halaman masuk penting atau perjalanan konversi yang sering digunakan. Peningkatan skor laboratorium yang besar tidak otomatis menjadi prioritas bisnis tertinggi jika template tersebut jarang diakses. Gabungkan metrik performa dengan penyelesaian formulir, eksplorasi produk, dan laporan dukungan agar perbaikannya relevan bagi pengguna.
Kesimpulan: optimalkan pengalaman, bukan hanya skor
Core Web Vitals paling bermanfaat sebagai praktik engineering yang berulang. Ukur pengalaman nyata, temukan hambatannya, perbaiki penyebab, lalu validasi hasil. LCP, INP, dan CLS saling melengkapi: halaman harus tampil cepat, merespons ketika digunakan, dan tetap stabil selama interaksi.