LCP, CLS, dan INP terdengar seperti kode rahasia, padahal ketiganya cuma cara Google mengukur tiga hal yang sudah kamu rasakan sendiri sebagai pengguna internet sehari-hari: seberapa cepat halaman terasa "siap dibaca", seberapa stabil tampilannya, dan seberapa cepat merespons saat diklik.
Artikel ini membedah ketiganya satu per satu dengan bahasa sederhana, plus cara mengeceknya di websitemu sendiri.
Yang akan kamu pahami setelah membaca ini
- Apa itu Core Web Vitals secara umum
- Arti LCP, CLS, dan INP satu per satu
- Cara mengecek skor Core Web Vitals websitemu
01Apa Itu Core Web Vitals
Core Web Vitals adalah tiga metrik yang dipakai Google untuk mengukur pengalaman pengguna nyata di sebuah halaman website. Ketiganya jadi bagian dari laporan yang sama dengan yang dibahas di artikel PageSpeed Insights — bedanya, di sini kita membahas satu per satu apa arti tiap metrik.
02LCP — Kecepatan Muat Konten Utama
Largest Contentful Paint (LCP) mengukur seberapa cepat elemen terbesar di halaman (biasanya gambar utama atau judul besar) selesai dimuat dan terlihat pengguna. LCP yang baik berarti pengunjung tidak menunggu lama untuk melihat konten utama halaman.
LCP di bawah 2,5 detik dianggap baik oleh Google. Optimasi gambar dan caching (dibahas di artikel "Website Lemot?") adalah cara paling efektif memperbaiki metrik ini.
03CLS — Kestabilan Tampilan
Cumulative Layout Shift (CLS) mengukur seberapa sering elemen di halaman "melompat" tiba-tiba saat dimuat — misalnya tombol yang bergeser posisi karena gambar di atasnya baru selesai dimuat, membuat pengunjung tidak sengaja mengklik hal yang salah.
Penyebab paling umum CLS buruk adalah gambar tanpa ukuran (dimensi) yang ditentukan sejak awal, sehingga browser tidak tahu berapa ruang yang perlu disiapkan sebelum gambar selesai dimuat.
04INP — Responsivitas Interaksi
Interaction to Next Paint (INP) mengukur seberapa cepat halaman merespons setelah pengunjung melakukan interaksi pertama, seperti klik tombol atau mengetik di kolom pencarian. INP yang buruk membuat website terasa "lambat merespons" meski halamannya sudah selesai dimuat.
05Cara Mengecek Skor Core Web Vitals
Cara termudah: buka PageSpeed Insights, masukkan alamat website, dan scroll ke bagian "Core Web Vitals Assessment". Warna hijau berarti baik, kuning perlu perbaikan, merah bermasalah — pola warna yang sama seperti dibahas di artikel PageSpeed Insights sebelumnya.
06Kesalahan Umum Pemula
- Mengabaikan CLS karena dianggap kurang penting dibanding kecepatan muat, padahal tampilan yang "melompat" sama mengganggunya bagi pengunjung.
- Tidak menentukan ukuran gambar secara eksplisit di kode, penyebab paling umum CLS buruk.
- Mengejar skor sempurna di ketiga metrik sekaligus di awal, padahal fokus ke satu per satu berdasarkan mana yang paling merah biasanya lebih efektif.
FAQPertanyaan Umum
Ya, ini bagian dari sinyal "page experience" yang dipertimbangkan Google, meski bobotnya lebih kecil dibanding relevansi konten.
Cek dulu mana yang berwarna merah di laporanmu — prioritaskan itu, karena dampaknya terhadap skor keseluruhan biasanya paling besar.
Tidak selalu. Banyak perbaikan bisa dilakukan lewat plugin optimasi gambar dan caching yang sudah dibahas di artikel-artikel sebelumnya, tanpa perlu menulis kode.
Lanjutkan ke Memilih Hosting yang Tepat
Metrik teknis sudah dipahami. Lanjut ke topik terakhir kategori ini — cara memilih hosting berdasarkan kebutuhan website.