Core Web Vitals adalah sekumpulan metrik yang digunakan untuk menilai aspek penting dari pengalaman pengguna di halaman web. Saat ini, metrik utamanya adalah Largest Contentful Paint atau LCP, Interaction to Next Paint atau INP, dan Cumulative Layout Shift atau CLS.
Metrik ini membantu tim melihat pengalaman nyata pengguna dari sisi kecepatan loading utama, respons terhadap interaksi, dan stabilitas visual. Core Web Vitals bukan satu-satunya faktor yang menentukan kualitas halaman, tetapi berguna sebagai indikator teknis yang dapat diukur.
Apa saja metrik Core Web Vitals
Largest Contentful Paint
LCP mengukur waktu yang dibutuhkan hingga elemen konten terbesar yang terlihat di viewport selesai dirender. Elemen tersebut bisa berupa gambar hero, blok teks besar, atau elemen utama lain pada bagian awal halaman.
LCP membantu menilai seberapa cepat pengguna merasa konten utama sudah tersedia. Masalah LCP dapat berasal dari server yang lambat, resource berat, gambar besar, CSS yang menghambat rendering, atau prioritas loading yang kurang tepat.
Interaction to Next Paint
INP menilai responsivitas halaman terhadap interaksi pengguna dengan mengamati latensi interaksi sepanjang kunjungan. Metrik ini membantu mengidentifikasi apakah klik, tap, atau input terasa lambat karena main thread sibuk atau JavaScript melakukan pekerjaan terlalu berat.
Perbaikan INP biasanya membutuhkan analisis terhadap long tasks, event handler, third-party scripts, dan pekerjaan JavaScript yang dapat dipecah atau ditunda.
Cumulative Layout Shift
CLS mengukur pergeseran layout yang tidak terduga. Contoh yang sering terlihat adalah teks atau tombol bergeser karena gambar, iklan, atau elemen lain dimuat tanpa ruang yang sudah disediakan.
CLS yang tinggi dapat membuat pengguna salah klik atau kehilangan posisi baca. Menentukan dimensi gambar dan menghindari penyisipan elemen dinamis di atas konten yang sudah tampil dapat membantu mengurangi masalah ini.
Field data dan lab data
Evaluasi performa sebaiknya membedakan data lapangan dan data laboratorium. Field data menggambarkan pengalaman pengguna nyata dari kondisi perangkat dan jaringan yang beragam. Lab data dihasilkan dalam lingkungan pengujian yang terkontrol dan berguna untuk diagnosis.
PageSpeed Insights dapat menampilkan kedua jenis data ketika tersedia. Tim sebaiknya tidak hanya mengejar skor lab, tetapi juga melihat pola pengalaman pengguna nyata dari waktu ke waktu.
Apakah Core Web Vitals memengaruhi SEO
Google menggunakan berbagai sinyal untuk menilai halaman. Core Web Vitals termasuk bagian dari aspek pengalaman halaman, tetapi konten yang relevan dan membantu tetap sangat penting.
Perbaikan performa sebaiknya tidak dilihat sebagai cara tunggal untuk menaikkan ranking. Nilai utamanya juga datang dari pengalaman pengguna yang lebih nyaman, khususnya pada halaman yang lambat, sulit direspons, atau sering bergeser saat digunakan.
Cara mengaudit Core Web Vitals
- Periksa laporan Core Web Vitals di Google Search Console untuk melihat kelompok URL bermasalah.
- Gunakan PageSpeed Insights pada template dan halaman prioritas.
- Bedakan masalah yang muncul pada mobile dan desktop.
- Cari pola berdasarkan template, bukan hanya satu URL.
- Gunakan alat developer untuk mendiagnosis penyebab teknis.
- Pantau kembali field data setelah perubahan diterapkan.
Prioritas perbaikan yang umum
Untuk LCP
- Optimalkan waktu respons server.
- Kurangi resource yang menghambat rendering.
- Optimalkan gambar utama dan prioritas loading.
- Kurangi ketergantungan pada resource pihak ketiga yang tidak penting.
Untuk INP
- Kurangi long tasks di main thread.
- Optimalkan event handler.
- Pecah pekerjaan JavaScript berat menjadi bagian yang lebih kecil.
- Tinjau script pihak ketiga yang aktif saat interaksi.
Untuk CLS
- Tentukan width dan height untuk media.
- Sediakan ruang untuk elemen dinamis.
- Hindari menyisipkan konten di atas area yang sudah tampil.
- Kelola font agar perubahan layout tidak terlalu besar.
Jangan optimasi angka tanpa memahami pengguna
Skor performa dapat membantu menentukan prioritas, tetapi konteks halaman tetap penting. Halaman checkout, formulir lead, artikel, dan landing page dapat memiliki pola penggunaan yang berbeda. Tim perlu memahami bagian mana yang paling sering dilihat dan digunakan.
Tujuan akhirnya bukan sekadar membuat semua indikator berwarna hijau. Website perlu terasa cepat, responsif, stabil, dan tetap mampu menyampaikan informasi yang dibutuhkan pengguna.
