Core Web Vitals: Pengertian, Metrik, dan Cara Membacanya

Core Web Vitals adalah tiga metrik pengalaman pengguna yang mengukur kecepatan website, respons interaksi, dan kestabilan tampilan sebuah halaman.

Tiga metrik tersebut adalah Largest Contentful Paint atau LCP, Interaction to Next Paint atau INP, serta Cumulative Layout Shift atau CLS. Ketiganya tidak menggantikan audit SEO secara keseluruhan, tetapi memberi cara yang lebih konkret untuk melihat apakah halaman benar-benar nyaman dipakai pengunjung.

Tiga metrik dalam Core Web Vitals

Setiap metrik menjawab masalah pengalaman yang berbeda. Karena itu, solusi untuk LCP belum tentu menyelesaikan INP atau CLS.

LCP: mengukur kapan elemen konten terbesar yang terlihat pengguna selesai dimuat. Target pengalaman yang baik adalah LCP dalam 2,5 detik pertama.
INP: mengukur seberapa cepat halaman memberi respons visual setelah klik, tap, atau input keyboard. Target yang baik adalah di bawah 200 milidetik.
CLS: mengukur seberapa besar pergeseran tampilan yang tidak diharapkan selama halaman digunakan. Target yang baik adalah skor 0,1 atau kurang.

Nilai tersebut sebaiknya dibaca dari data pengguna nyata, bukan hanya hasil tes sekali jalan. Google menggunakan penilaian pada persentil ke-75 dari kunjungan, sehingga pengalaman mayoritas pengguna lebih penting daripada perangkat developer yang kebetulan sangat cepat.

Cara memahami LCP

LCP biasanya dipengaruhi oleh gambar hero, blok teks utama, poster video, atau elemen besar pertama yang terlihat pada layar. Jika LCP buruk, masalahnya bisa berasal dari respons server yang lambat, gambar utama terlalu berat, atau resource penting terlambat dimuat.

Jangan langsung mengecilkan semua gambar. Cari dahulu elemen apa yang benar-benar menjadi LCP pada halaman tersebut. Pada halaman artikel, bisa jadi judul dan teks; pada landing page, sering kali gambar hero. Perbaikan harus mengikuti elemen yang nyata, bukan asumsi desain.

Cara memahami INP

INP berkaitan dengan rasa responsif saat pengguna berinteraksi. Tombol yang terlihat cepat saat halaman terbuka masih dapat terasa lambat jika setelah diklik browser sibuk menjalankan JavaScript panjang.

Penyebab umum INP buruk meliputi skrip terlalu banyak, pekerjaan berat di main thread, event handler yang tidak efisien, serta komponen interaktif yang membawa library besar. Auditnya perlu melihat aktivitas setelah interaksi, bukan hanya proses saat halaman pertama kali dimuat.

Untuk pengujian laboratorium, Lighthouse tidak mengukur INP seperti pengguna nyata karena tidak ada interaksi manusia. Total Blocking Time dapat dipakai sebagai petunjuk awal, lalu hasilnya dikonfirmasi dengan data lapangan.

Cara memahami CLS

CLS buruk terlihat ketika tombol atau teks tiba-tiba bergeser saat pengguna hendak membaca atau mengeklik. Ini sering terjadi pada gambar, iklan, embed, banner, atau font yang tidak memiliki ruang tampilan yang sudah disiapkan.

Solusi yang umum adalah memberi dimensi atau ruang yang jelas pada gambar dan embed, tidak menyisipkan konten baru di atas konten yang sudah terlihat, serta mengatur pemuatan font dengan benar. Perubahan kecil pada layout dapat mengganggu pengguna lebih besar daripada yang terlihat di monitor developer.

Data lapangan dan data laboratorium

Keduanya dibutuhkan, tetapi punya peran berbeda.

Data lapangan: menunjukkan pengalaman pengguna nyata dalam beragam perangkat, jaringan, dan kondisi kunjungan.
Data laboratorium: membantu developer mereproduksi masalah, menguji perubahan, dan mencegah regresi sebelum rilis.

Jika hasil keduanya berbeda, jangan langsung menganggap salah satunya keliru. Data laboratorium memakai kondisi simulasi, sedangkan pengguna nyata datang dengan jaringan dan perangkat yang jauh lebih beragam.

Cara memulai perbaikan Core Web Vitals

Pilih kelompok halaman penting: mulai dari halaman dengan trafik atau nilai bisnis terbesar, bukan seluruh URL sekaligus.
Tentukan metrik yang gagal: lihat apakah masalah utamanya LCP, INP, atau CLS agar solusi tidak salah sasaran.
Cari penyebab di template: jika banyak halaman gagal dengan pola sama, perbaiki komponen bersama seperti header, hero, font, atau script global.
Uji perubahan secara terbatas: pantau fungsi formulir, tracking, dan tampilan mobile sebelum menerapkannya ke seluruh situs.
Tunggu data pengguna terkumpul: perbaikan performa perlu waktu untuk terlihat pada data lapangan.

Core Web Vitals paling berguna ketika dipakai untuk merapikan pengalaman pengguna, bukan sebagai angka yang dikejar tanpa mempertimbangkan kebutuhan konten dan bisnis.