Apa Itu Core Web Vitals? Metrik dan Cara Membacanya

Core Web Vitals adalah sekumpulan metrik yang mengukur pengalaman pengguna di website, khususnya performa loading, responsivitas, dan stabilitas visual halaman. Metrik ini membantu tim website melihat pengalaman nyata yang dialami pengguna, bukan hanya menilai halaman dari tampilan di komputer pengembang.

Core Web Vitals bukan skor SEO tunggal dan bukan jaminan ranking. Nilainya perlu dibaca bersama kualitas konten, relevansi, aksesibilitas, keamanan, dan faktor pengalaman lain.

Tiga metrik Core Web Vitals

1. Largest Contentful Paint (LCP)

LCP mengukur waktu sampai elemen konten terbesar yang terlihat di area awal halaman selesai dimuat. Elemen tersebut bisa berupa gambar utama, heading besar, atau blok teks.

Patokan “baik” yang digunakan Google adalah LCP sampai 2,5 detik pada persentil ke-75. Nilai yang lebih lama menunjukkan area utama halaman membutuhkan waktu lebih panjang untuk siap dilihat.

Penyebab LCP buruk dapat berasal dari server lambat, gambar hero terlalu besar, CSS yang menghambat render, atau JavaScript yang menunda tampilan konten utama.

2. Interaction to Next Paint (INP)

INP mengukur respons halaman terhadap interaksi pengguna, seperti klik, ketukan, atau input keyboard. Metrik ini membantu melihat apakah halaman memberi respons visual dengan cepat setelah menerima tindakan.

Patokan “baik” adalah kurang dari 200 milidetik pada persentil ke-75. JavaScript yang berat, tugas utama yang terlalu lama, dan event handler yang tidak efisien dapat membuat INP memburuk.

3. Cumulative Layout Shift (CLS)

CLS mengukur kestabilan visual halaman. Layout shift terjadi ketika elemen yang sudah terlihat tiba-tiba bergeser, misalnya karena gambar belum memiliki dimensi atau iklan menyisipkan ruang setelah konten tampil.

Patokan “baik” adalah kurang dari 0,1 pada persentil ke-75. Halaman yang stabil membuat pengguna tidak salah menekan tombol atau kehilangan posisi baca.

Data field dan data lab

Data field berasal dari pengalaman pengguna nyata yang memenuhi syarat pengumpulan data. Data lab berasal dari simulasi pada kondisi perangkat, jaringan, dan konfigurasi tertentu.

Keduanya berguna, tetapi menjawab pertanyaan berbeda. Data lab membantu debugging yang dapat diulang. Data field membantu melihat kondisi pengguna yang beragam.

Perbedaan hasil bukan otomatis berarti salah satu alat rusak. Kondisi pengujian memang dapat berbeda. Gunakan data secara konsisten dan lihat pola, bukan satu hasil pengujian tunggal.

Cara memeriksa Core Web Vitals

Beberapa alat yang dapat digunakan:

Laporan Core Web Vitals di Google Search Console.
PageSpeed Insights.
Lighthouse.
Chrome DevTools.
Data performa yang dikumpulkan sendiri jika tersedia.

Search Console mengelompokkan URL berdasarkan pengalaman yang dilaporkan. PageSpeed Insights dapat menampilkan data pengguna nyata jika tersedia dan hasil simulasi lab. Lighthouse berguna untuk mencari peluang teknis dalam satu sesi pengujian.

Cara memperbaiki LCP

Mulai dengan mencari elemen LCP pada halaman yang bermasalah. Setelah elemen diketahui, periksa sumber keterlambatannya.

Langkah yang umum:

Kurangi waktu respons server.
Kompres gambar utama dan gunakan ukuran yang sesuai.
Jangan menunda gambar yang tampil di area awal.
Kurangi CSS dan JavaScript yang menghambat render.
Gunakan cache dan jaringan distribusi jika memang diperlukan.
Pastikan font penting tidak menahan tampilan terlalu lama.

Jangan menerapkan lazy loading pada gambar utama yang menjadi elemen LCP tanpa memahami dampaknya. Lazy loading lebih cocok untuk gambar yang berada jauh di bawah area awal.

Cara memperbaiki INP

Gunakan DevTools atau profiling JavaScript untuk menemukan tugas yang memakan waktu. Perhatikan script pihak ketiga, event handler, dan proses yang dijalankan setiap kali pengguna berinteraksi.

Perbaikan dapat mencakup:

Memecah tugas JavaScript yang terlalu panjang.
Menunda script yang tidak penting.
Mengurangi pekerjaan saat event klik diproses.
Menghindari render ulang komponen yang tidak perlu.
Menghapus library atau fitur yang tidak digunakan.

Jangan menghapus fungsi penting hanya untuk mengejar angka. Prioritaskan interaksi yang sering digunakan dan paling mengganggu pengguna.

Cara memperbaiki CLS

Tetapkan atribut width dan height pada gambar atau sediakan ruang dengan CSS. Hindari menyisipkan konten di atas konten yang sudah terlihat, kecuali sebagai respons langsung terhadap tindakan pengguna.

Periksa font, banner, iklan, embed, dan komponen yang ukurannya baru diketahui setelah dimuat. Uji halaman pada koneksi dan perangkat yang berbeda karena layout shift dapat terlihat berbeda.

Nilai Core Web Vitals dan ranking

Core Web Vitals adalah bagian dari sinyal pengalaman halaman, tetapi mencapai status baik tidak otomatis membuat sebuah halaman mengungguli halaman lain. Relevansi dan kualitas jawaban tetap penting.

Jika dua halaman sama-sama relevan, pengalaman pengguna yang lebih baik dapat mendukung keputusan kualitas secara keseluruhan. Namun, memperbaiki skor teknis tidak menggantikan kebutuhan untuk membuat konten yang berguna.

Kesalahan umum

Mengejar skor 100

Skor alat dapat berubah berdasarkan kondisi pengujian dan bukan tujuan SEO yang berdiri sendiri. Fokus pada masalah yang benar-benar memengaruhi pengguna.

Hanya menguji desktop

Banyak pengguna mengakses website melalui perangkat mobile dan jaringan yang berbeda. Uji kondisi mobile ketika masalahnya terkait pengalaman pengguna mobile.

Mengandalkan satu halaman

Laporan field biasanya mengelompokkan URL. Cari pola pada template atau komponen yang digunakan banyak halaman.

Mengubah banyak hal sekaligus

Perubahan besar tanpa catatan membuat hasil sulit ditelusuri. Uji perbaikan yang jelas dan dokumentasikan sebelum membandingkan data berikutnya.

Pertanyaan umum

Apakah Core Web Vitals wajib mencapai status baik?

Status baik adalah target pengalaman yang disarankan, bukan jaminan ranking. Prioritaskan perbaikan yang berdampak pada penggunaan nyata.

Apakah Core Web Vitals sama dengan PageSpeed score?

Tidak. PageSpeed score adalah skor dari audit tertentu, sedangkan Core Web Vitals adalah metrik pengalaman dengan sumber data dan cara baca yang berbeda.

Apakah gambar selalu menjadi penyebab LCP buruk?

Tidak. Server, CSS, JavaScript, font, dan elemen teks juga dapat menjadi penyebab. Identifikasi elemen LCP sebelum memilih perbaikan.

Berapa lama hasil perbaikan terlihat di Search Console?

Data field membutuhkan pengumpulan data pengguna dan pemrosesan laporan. Jangan mengharapkan perubahan laporan dalam hitungan menit setelah deploy.

Kesimpulan

Core Web Vitals mengukur loading melalui LCP, responsivitas melalui INP, dan stabilitas visual melalui CLS. Gunakan Search Console untuk melihat pola pengalaman pengguna dan alat lab untuk membantu menemukan penyebab teknis.

Perbaiki hambatan yang nyata bagi pengguna, lalu ukur kembali dengan metode yang konsisten. Skor adalah alat diagnosis, bukan satu-satunya tujuan website.

Core Web Vitals sebaiknya dipantau sebagai bagian dari technical SEO, bersama akses crawler, indexing, dan struktur URL.

Untuk aspek lain dari pengalaman halaman pada layar kecil, periksa mobile SEO.