Core Web Vitals dengan bahasa sederhana: 3 angka yang menentukan secepat apa situsmu terasa
LCP, INP, dan CLS dijelaskan tanpa istilah rumit, lengkap dengan batas nilai yang dianggap baik oleh Google dan perbaikan praktis yang bisa kamu kerjakan minggu ini.
Sebuah situs bisa lolos semua tes kecepatan, tetapi tetap terasa lambat. Core Web Vitals dibuat untuk mengukur hal yang benar-benar dirasakan pengunjung: seberapa cepat konten utama muncul, seberapa cepat halaman merespons, dan apakah elemen bergeser-geser saat halaman dimuat. Google memakainya sebagai bagian dari sinyal pengalaman halaman, jadi metrik ini penting untuk pengguna sekaligus untuk visibilitas di pencarian.
Tiga angka yang perlu kamu tahu
LCP: Largest Contentful Paint
LCP adalah waktu yang dibutuhkan elemen terbesar yang terlihat, biasanya gambar utama atau judul, untuk tampil. Nilai yang baik adalah 2,5 detik atau kurang.
INP: Interaction to Next Paint
INP mengukur seberapa cepat halaman merespons setelah ketukan, klik, atau tombol ditekan. Nilai yang baik adalah 200 milidetik atau kurang. INP menggantikan metrik lama FID pada Maret 2024 karena menilai seluruh interaksi selama kunjungan, bukan hanya yang pertama.
CLS: Cumulative Layout Shift
CLS menjumlahkan pergeseran konten yang tidak terduga, misalnya tombol yang tiba-tiba bergeser tepat saat kamu menekannya. Nilai yang baik adalah 0,1 atau kurang.
Google menilainya pada persentil ke-75 dari kunjungan nyata, artinya tiga dari empat pengunjung harus mendapat pengalaman yang baik, bukan hanya pengunjung rata-rata.
Perbaikan cepat untuk tiap metrik
Memperbaiki LCP
Kompres gambar utama dan sajikan dalam format modern seperti WebP atau AVIF.
Jangan menerapkan lazy-load pada gambar yang muncul di bagian atas halaman; lakukan preload.
Percepat respons server dengan caching atau CDN.
Memperbaiki INP
Pecah tugas JavaScript yang panjang menjadi bagian kecil agar browser sempat merespons di sela-selanya.
Tunda skrip pihak ketiga seperti widget chat dan pelacak sampai benar-benar dibutuhkan.
Jaga event handler tetap ringan; kerjakan proses berat setelah tampilan diperbarui.
Memperbaiki CLS
Selalu tentukan width dan height (atau aspect ratio) pada gambar dan video.
Sisakan ruang untuk iklan, banner, dan embed sebelum dimuat.
Gunakan
font-display: swapbersama font cadangan yang mirip agar teks tidak melompat.
Cara mengukurnya
Gunakan PageSpeed Insights atau Chrome UX Report untuk melihat data lapangan dari pengguna nyata, dan Lighthouse di Chrome DevTools untuk debugging di lab. Data lapangan menunjukkan apa yang dialami pengguna; data lab menjelaskan penyebabnya.
Perbaiki satu metrik dalam satu waktu, ukur ulang, dan pertahankan perubahan yang benar-benar menggerakkan angkanya.
Perbaikan kecil yang terukur lebih baik daripada menulis ulang besar-besaran. Mulailah dari halaman terpenting yang paling lambat, lalu biarkan data menuntun langkah berikutnya.