Apa itu Core Web Vitals? Penjelasan LCP, CLS, dan INP

Diperbarui 16 Oktober 2026 · ±6 menit baca

Core Web Vitals adalah sekumpulan metrik dari Google untuk mengukur pengalaman pengguna saat membuka halaman web. Saat ini ada tiga metrik inti: LCP untuk kecepatan memuat, INP untuk responsivitas, dan CLS untuk stabilitas tampilan. Google menggunakannya sebagai bagian dari sinyal pengalaman halaman dalam pencarian, tetapi alasan terpenting untuk memperbaikinya adalah pengunjung: halaman yang cepat dan stabil lebih nyaman dipakai.

LCP – Largest Contentful Paint

LCP mengukur waktu sampai elemen konten terbesar di area layar pertama selesai ditampilkan. Elemen ini biasanya gambar banner, foto produk, video poster, atau blok judul besar.

Baik: 2,5 detik atau kurang
Perlu perbaikan: 2,5–4 detik
Buruk: lebih dari 4 detik

Penyebab umum LCP lambat:

Server lambat merespons (TTFB tinggi), sehingga semua hal lain ikut tertunda.
Gambar utama berukuran besar atau formatnya belum modern.
Gambar utama baru dimuat setelah JavaScript berjalan, misalnya pada slider.
CSS dan font yang menghambat render.
Gambar utama diberi loading="lazy", padahal ia terlihat langsung di layar.

Cara memperbaiki: kompres dan ubah gambar utama ke WebP atau AVIF, berikan ukuran yang sesuai layar, jangan pakai lazy load pada gambar di layar pertama, tambahkan fetchpriority="high" pada gambar LCP, dan percepat server dengan caching. Detailnya ada di Optimasi Gambar dan Mengurangi TTFB.

INP – Interaction to Next Paint

INP menggantikan FID (First Input Delay) sebagai Core Web Vital sejak Maret 2024. INP mengukur seberapa cepat halaman menampilkan respons visual setelah pengguna berinteraksi, misalnya mengklik tombol, mengetuk menu, atau mengetik di kolom. Berbeda dengan FID yang hanya melihat interaksi pertama, INP memperhatikan interaksi sepanjang kunjungan dan melaporkan salah satu yang paling lambat.

Baik: 200 milidetik atau kurang
Perlu perbaikan: 200–500 milidetik
Buruk: lebih dari 500 milidetik

INP hanya bisa diukur dari interaksi pengguna sungguhan, sehingga tidak muncul langsung dalam tes lab. Di Lighthouse, metrik yang paling dekat adalah Total Blocking Time (TBT). Jika TBT Anda tinggi, kemungkinan besar INP di lapangan juga buruk.

Penyebab umum INP buruk:

JavaScript berukuran besar yang dijalankan sekaligus (tugas panjang lebih dari 50 ms).
Terlalu banyak skrip pihak ketiga: chat widget, pelacak, iklan.
Penanganan klik yang melakukan pekerjaan berat sebelum memperbarui tampilan.
Halaman dengan jumlah elemen DOM yang sangat banyak.

Cara memperbaiki: kurangi dan tunda JavaScript yang tidak diperlukan, pecah pekerjaan panjang menjadi bagian kecil, hapus plugin yang tidak dipakai, dan muat widget pihak ketiga hanya saat dibutuhkan. Lihat Skrip Pihak Ketiga dan Mengurangi CSS/JS.

CLS – Cumulative Layout Shift

CLS mengukur seberapa banyak elemen di halaman bergeser secara tidak terduga. Anda pasti pernah mengalaminya: hendak mengetuk tautan, lalu tiba-tiba muncul banner sehingga yang terketuk justru iklan. Itulah pergeseran tata letak.

Baik: 0,1 atau kurang
Perlu perbaikan: 0,1–0,25
Buruk: lebih dari 0,25

Penyebab umum CLS tinggi:

Gambar dan video tanpa atribut width dan height, sehingga browser tidak tahu berapa ruang yang perlu disediakan.
Iklan, embed, atau iframe yang muncul tanpa ruang yang disiapkan.
Banner cookie atau notifikasi yang mendorong konten ke bawah.
Font web yang menggantikan font cadangan dengan ukuran berbeda.
Konten yang disisipkan JavaScript di atas konten yang sudah ada.

Cara memperbaiki: selalu tulis width dan height pada <img> (atau gunakan CSS aspect-ratio), siapkan kotak berukuran tetap untuk iklan, tampilkan banner sebagai lapisan yang mengambang alih-alih mendorong konten, dan atur font dengan baik seperti dijelaskan di Font Web Cepat.

<img src="/produk.webp" width="800" height="600" alt="Sepatu lari hitam">

Metrik pendukung

Selain tiga metrik inti, ada metrik pendukung yang membantu mendiagnosis masalah:

TTFB (Time to First Byte) – waktu respons server. Nilai yang umumnya disarankan adalah 0,8 detik atau kurang.
FCP (First Contentful Paint) – kapan konten pertama muncul; target yang disarankan 1,8 detik atau kurang.
TBT (Total Blocking Time) – pengganti INP di tes lab.

Data lab dan data lapangan

Google menilai Core Web Vitals berdasarkan data pengguna Chrome sungguhan selama 28 hari terakhir, pada persentil ke-75. Artinya, halaman dinilai "baik" jika setidaknya 75% kunjungan mendapatkan pengalaman yang baik. Tes di webmaster.my.id adalah data lab yang memberi gambaran cepat dan membantu menemukan penyebab. Untuk data lapangan, gunakan laporan Core Web Vitals di Google Search Console.

Karena data lapangan dihitung dari 28 hari, perbaikan yang Anda lakukan hari ini baru terlihat penuh di laporan Search Console beberapa minggu kemudian. Sementara itu, gunakan tes lab untuk memastikan perbaikannya benar-benar bekerja.

Urutan perbaikan yang disarankan

Pastikan server cepat (TTFB rendah) dengan caching dan hosting yang memadai.
Optimalkan gambar utama untuk memperbaiki LCP.
Tambahkan ukuran pada semua gambar dan embed untuk memperbaiki CLS.
Kurangi JavaScript untuk memperbaiki TBT dan INP.
Uji ulang setelah setiap perubahan dan pantau hasilnya.

Core Web Vitals bukan sekadar angka untuk Google. Ketiganya mewakili hal yang dirasakan setiap pengunjung: apakah halaman cepat muncul, cepat merespons, dan tidak membuat mereka salah klik.

Contoh perbaikan untuk setiap metrik

LCP lambat pada halaman produk. Elemen LCP-nya adalah foto produk berukuran 2.000 piksel dalam format JPEG yang dimuat dengan loading="lazy". Perbaikannya: hapus lazy load dari gambar itu, tambahkan fetchpriority="high", sediakan versi WebP berukuran sesuai layar dengan srcset, dan pastikan server merespons cepat dengan cache halaman.

CLS tinggi pada blog. Iklan di bawah judul muncul belakangan dan mendorong teks ke bawah. Perbaikannya: siapkan ruang tetap dengan min-height pada wadah iklan, serta tambahkan width dan height pada semua gambar.

INP buruk pada formulir. Setiap ketikan memicu validasi berat dan pemanggilan skrip analitik. Perbaikannya: tunda validasi sampai pengguna berhenti mengetik, pecah tugas panjang, dan muat skrip analitik secara asinkron.

Checklist Core Web Vitals

Ketahui elemen LCP setiap template halaman. Lighthouse menampilkannya di bagian diagnostik.
Jangan pernah memberi lazy load pada gambar LCP.
Pastikan semua gambar, video, dan iframe punya dimensi atau aspect-ratio.
Sediakan ruang untuk iklan, banner cookie, dan widget yang dimuat belakangan.
Gunakan font-display: swap dan font cadangan yang ukurannya mirip.
Kurangi JavaScript yang berjalan saat halaman dimuat dan saat pengguna berinteraksi.
Pantau data lapangan di laporan Core Web Vitals Google Search Console.

Kesalahan umum

Mengira TBT sama dengan INP. TBT diukur di lab saat halaman dimuat, sedangkan INP diukur dari interaksi pengguna nyata sepanjang kunjungan. TBT yang rendah membantu, tetapi tidak menjamin INP baik.
Hanya memperbaiki beranda. Core Web Vitals di Search Console dikelompokkan per jenis halaman, jadi template artikel dan produk juga penting.
Mengharapkan Search Console langsung berubah. Data lapangan dikumpulkan dalam rentang 28 hari, sehingga perbaikan baru terlihat bertahap.
Menambahkan animasi yang menggeser tata letak. Gunakan transform dan opacity untuk animasi karena keduanya tidak memicu pergeseran tata letak.

Pertanyaan yang sering diajukan

Berapa batas nilai baik untuk Core Web Vitals?

Menurut Google, LCP dianggap baik jika 2,5 detik atau kurang, INP baik jika 200 milidetik atau kurang, dan CLS baik jika 0,1 atau kurang. Nilai dihitung pada persentil ke-75 kunjungan.

Apakah FID masih dipakai?

Tidak. Sejak Maret 2024 Google mengganti FID dengan INP sebagai metrik responsivitas dalam Core Web Vitals.

Kenapa Lighthouse tidak menampilkan INP?

INP membutuhkan interaksi pengguna nyata, sedangkan Lighthouse memuat halaman tanpa berinteraksi. Sebagai gantinya, Lighthouse menampilkan TBT yang berkaitan erat dengan responsivitas.

Situs saya kecil dan belum punya data lapangan. Apa yang harus diukur?

Gunakan data lab dari webmaster.my.id sebagai panduan. Jika LCP, TBT, dan CLS di tes lab sudah hijau, kemungkinan besar pengalaman pengunjung nyata juga baik.

Apakah Core Web Vitals hanya penting untuk SEO?

Tidak. Ketiga metrik ini mengukur hal yang langsung dirasakan pengunjung: seberapa cepat konten utama tampil, seberapa stabil tata letaknya, dan seberapa cepat halaman merespons sentuhan. Halaman yang terasa lambat atau melompat-lompat cenderung ditinggalkan.