Core Web Vitals — Performance

Core Web Vitals Core Web Vitals adalah serangkaian metrik yang digunakan Google untuk mengukur pengalaman pengguna di web. Ada 3 metrik utama: 1. LCP —…

Core Web Vitals adalah tiga angka dari Google untuk menilai pengalaman orang memakai halamanmu: seberapa cepat isi utamanya muncul (LCP), seberapa sigap halaman merespons klik (INP), dan seberapa diam tampilannya waktu dimuat (CLS). Bayangin rapor dengan tiga mata pelajaran wajib. Tiap pelajaran punya nilai batas, dan satu nilai merah sudah cukup bikin rapornya gak lulus.

🧪 Tebakan cepat: LCP 2,5 detik, INP 200 ms, CLS 0,1, semuanya tepat di batas good. Lulus atau gak? Jawabannya ada di bagian "Batasnya: good, needs improvement, poor".

Tiga metriknya

LCP (Largest Contentful Paint): waktu dari halaman mulai dibuka sampai elemen terbesar di layar pertama selesai tampil. Biasanya gambar hero, atau judul dan paragraf besar. Artinya: kapan isi utamanya kelihatan.
INP (Interaction to Next Paint): waktu dari user klik, tap, atau menekan tombol keyboard sampai layar menampilkan hasilnya di frame berikutnya. INP memantau semua interaksi selama halaman dibuka, dan yang dilaporkan adalah yang paling lambat (kalau interaksinya banyak sekali, beberapa yang paling ekstrem diabaikan).
CLS (Cumulative Layout Shift): seberapa banyak isi halaman bergeser tanpa diminta, misalnya teks yang melompat ke bawah karena iklan muncul di atasnya. Satuannya bukan detik, tapi skor tanpa satuan. Pergeseran dalam 0,5 detik setelah user klik atau mengetik gak dihitung, karena memang diminta.

INP menggantikan FID (First Input Delay) sejak Maret 2024. FID cuma mengukur jeda sebelum interaksi pertama mulai diproses. INP mengukur semua interaksi, sampai layarnya benar-benar berubah.

Batasnya: good, needs improvement, poor

Metrik	Good	Needs improvement	Poor
LCP	maksimal 2,5 detik	di atas 2,5 sampai 4 detik	di atas 4 detik
INP	maksimal 200 ms	di atas 200 sampai 500 ms	di atas 500 ms
CLS	maksimal 0,1	di atas 0,1 sampai 0,25	di atas 0,25

"Maksimal" artinya angka yang tepat di batas masih good. Jadi LCP 2,5 detik, INP 200 ms, dan CLS 0,1 semuanya good. Itu jawaban tebakannya: lulus.

Google gak menilai dari satu kunjungan, tapi dari kunjungan nyata di persentil ke-75 (p75): urutkan semua kunjungan dari yang tercepat, lalu ambil nilai di posisi 75%. Artinya minimal 75% kunjungan harus good supaya halaman dianggap good. Hasil ini dipakai Google sebagai salah satu sinyal ranking di pencarian.

Menilai ketiganya sekaligus

Di latihan, LCP dan INP ditulis dalam milidetik (2,5 detik jadi 2500), dan CLS sebagai angka desimal. Di JavaScript, koma desimal ditulis pakai titik: 0.1.

function gradeMetric(value, goodMax, needsMax) {
  if (value <= goodMax) return "good";
  if (value <= needsMax) return "needs-improvement";
  return "poor";
}

function gradeWebVitals(lcp, inp, cls) {
  const grades = [
    gradeMetric(lcp, 2500, 4000), // LCP dalam ms
    gradeMetric(inp, 200, 500),   // INP dalam ms
    gradeMetric(cls, 0.1, 0.25),  // CLS tanpa satuan
  ];

  if (grades.includes("poor")) return "failed";
  if (grades.every((grade) => grade === "good")) return "passed";
  return "needs-improvement";
}

console.log(gradeWebVitals(3000, 150, 0.05)); // "needs-improvement"

Panggilan	LCP	INP	CLS	Hasil
`gradeWebVitals(2000, 150, 0.05)`	good	good	good	`"passed"`
`gradeWebVitals(3000, 150, 0.05)`	needs-improvement	good	good	`"needs-improvement"`
`gradeWebVitals(5000, 100, 0.05)`	poor	good	good	`"failed"`
`gradeWebVitals(2500, 200, 0.1)`	good	good	good	`"passed"`

gradeMetric dipakai tiga kali dengan batas yang beda, jadi aturan good, needs-improvement, poor cukup ditulis sekali.
<= bikin angka yang tepat di batas ikut ke nilai yang lebih baik.
grades.includes("poor") dicek duluan: satu nilai merah sudah cukup untuk "failed".
grades.every(...) bernilai true kalau ketiganya "good". Selain dua kasus itu, hasilnya "needs-improvement".

Penyebab yang paling sering

LCP lambat: gambar hero yang besar, CSS dan script yang menahan render, atau server yang lama menjawab.
INP lambat: JavaScript berat yang jalan di event handler, jadi browser gak sempat menggambar ulang.
CLS tinggi: gambar tanpa width dan height, banner atau iklan yang disisipkan setelah halaman tampil, atau font yang ukurannya beda dengan font cadangannya.

Tiap penyebab punya pelajarannya sendiri di jalur ini. Di sini cukup tahu metrik mana yang terkena.

⚠️ Jebakan yang sering ketemu

Pakai < di batas good. Dengan lcp < 2500, LCP 2.500 jadi needs-improvement, padahal harusnya good. Pakai <=.
Cuma mengecek LCP. INP 600 ms atau CLS 0,3 juga bikin "failed", walaupun LCP-nya bagus.
Satuan campur. Batas LCP di latihan 2500 (milidetik), bukan 2.5 (detik).
Masih menyebut FID. FID sudah pensiun sejak Maret 2024. Metrik responsivitas sekarang INP.

TL;DR: Core Web Vitals ada tiga: LCP (kapan isi terbesar tampil, good maksimal 2,5 detik, poor di atas 4 detik), INP (seberapa cepat layar berubah setelah interaksi, good maksimal 200 ms, poor di atas 500 ms), dan CLS (seberapa banyak tampilan bergeser, good maksimal 0,1, poor di atas 0,25). INP menggantikan FID sejak Maret 2024. Google menilai di p75 kunjungan nyata. Untuk menilai ketiganya: satu saja poor berarti "failed", semua good berarti "passed", selain itu "needs-improvement", dan angka tepat di batas masih good.