Subscribe
SEO

Apa itu Core Web Vitals? Fungsi, Metrik, dan Cara Optimasi

Core Web Vitals adalah soal pengalaman pelanggan nyata. Kisah skor PageSpeed 92 saya yang tetap dicap Poor oleh Google, dan cara memperbaikinya.

Septian Bagus Widyacahya
Septian Bagus Widyacahya
· 7 menit baca
Apa itu Core Web Vitals? Fungsi, Metrik, dan Cara Optimasi

Skor PageSpeed saya 92, tapi Google bilang ratusan halaman saya Poor. Dua-duanya benar.

Lingkaran hijau di laptop kantor menenangkan, sampai Search Console menandai ratusan URL produk karena CLS. Pelanggan di HP murah merasakan tombol "Beli Sekarang" bergeser setiap hari, tanpa pernah saya lihat.

Tujuh tahun lebih mengelola SEO sekaligus toko ritel, kejadian ini terasa sebagai pukulan bisnis. Di sini dibahas kenapa skor lab dan lapangan bertolak belakang, penyebab Poor tersembunyi, dan timeline perbaikannya.

Apa itu Core Web Vitals?

Core Web Vitals adalah tiga metrik Google untuk mengukur kecepatan, responsivitas, dan stabilitas visual halaman. Skor PageSpeed bisa hijau tapi tetap Poor, karena Lighthouse hanya mengukur simulasi.

Search Console memakai data CrUX dari pengunjung Chrome asli selama 28 hari. Kalau HP dan sinyal mereka lemah, hasilnya bisa jauh lebih buruk dari tes lab.

Pengertian core web vitals yang paling jujur menurut saya sederhana. Ini rapor pengalaman pengunjung, bukan rapor server atau kode.

Ketiganya adalah LCP, INP, dan CLS, bagian dari sinyal page experience Google. INP menggantikan FID sejak Maret 2024, jadi materi lama perlu dibaca hati-hati.

Fungsi Core Web Vitals

Fungsi utamanya memberi bahasa yang sama antara pemilik website, developer, dan Google. Tanpa standar ini, "website cepat" cuma klaim yang tergantung siapa yang mengetes.

Bagi pemilik toko, fungsinya lebih praktis lagi. Metrik ini menunjukkan di halaman mana pembeli frustrasi sebelum mereka sempat komplain.

Data ini juga membantu menentukan prioritas kerja tim. Halaman produk berstatus Poor jelas lebih mendesak daripada halaman "Tentang Kami".

Mengapa Core Web Vitals Penting?

Ada lima alasan kenapa metrik ini layak masuk agenda bulanan.

1. Meningkatkan ranking pencarian

Core Web Vitals termasuk sinyal page experience dalam sistem peringkat Google. Bobotnya tidak sebesar relevansi konten, tapi tetap dihitung.

Efeknya terasa saat dua halaman punya kualitas konten setara. Di posisi itu, pengalaman pengguna yang lebih baik bisa jadi pembeda.

2. Meningkatkan pengalaman pengguna

Halaman yang lambat, telat merespons, atau melompat-lompat bikin pengunjung kesal. Rasa kesal itu jarang dilaporkan, tapi tercatat lewat tombol back.

Pengunjung tidak peduli istilah teknis. Yang mereka ingat hanya satu hal, toko ini enak dipakai atau tidak.

3. Meningkatkan konversi

Di toko online, setiap pergeseran tombol berhubungan langsung dengan uang. Tombol yang bergeser saat disentuh membuat pembeli salah klik lalu pergi.

Itu sebabnya optimasi kecepatan sebaiknya dihitung sebagai investasi penjualan. Bukan sekadar pekerjaan rapi-rapi teknis yang bisa ditunda.

4. Pengukuran yang lebih akurat

Dulu kecepatan sering diukur dengan satu angka load time. Angka itu tidak menjelaskan kapan konten utama muncul atau kapan halaman bisa diklik.

Tiga metrik ini memecah pengalaman jadi momen yang spesifik. Hasilnya, tim tahu persis bagian mana yang perlu dibenahi.

5. Keunggulan kompetitif

Banyak toko online lokal masih mengandalkan tema berat dan plugin menumpuk. Kondisi ini membuka celah bagi yang mau serius merapikan pengalaman mobile.

Kompetitor jarang membuka laporan Core Web Vitals mereka sendiri. Kalau toko kamu lebih stabil di HP murah, pembeli yang merasakannya duluan.

Google Menilai dari Pelanggan dengan HP Paling Lambat

Bagian ini menjelaskan kenapa skor 92 di laptop tidak menyelamatkan toko saya.

1. Cara Kerja Persentil ke-75 di Data CrUX

Halaman dinilai Good kalau minimal 75% kunjungan memenuhi batas yang ditetapkan Google. Artinya, seperempat pengunjung yang paling lambat sangat menentukan status halaman.

Mereka biasanya memakai HP entry-level, memori terbatas, dan sinyal 3G atau 4G lemah. Banner yang telat dimuat terasa wajar di laptop, tapi fatal di HP mereka.

Di toko saya yang saya handle, sekitar 70% pengunjung datang dari Android kelas bawah. Mengoptimasi untuk laptop kantor sama saja melayani pelanggan yang tidak ada.

2. Timeline Perbaikan dari Banner Liar ke Status Good

Biang masalahnya ternyata dua elemen yang muncul belakangan, banner promo dan widget chat. Keduanya mendorong tombol "Beli Sekarang" turun tepat saat jari pembeli hendak menekan.

Urutan perbaikannya seperti ini.

  • Audit elemen penyebab pergeseran lewat panel Performance di Chrome DevTools dan laporan Search Console.
  • Beri dimensi tetap pada banner promo, berupa width dan height atau ruang cadangan.
  • Pindahkan widget chat ke pojok bawah dan tunda pemuatannya sampai interaksi pertama.
  • Klik tombol Validate Fix di laporan Core Web Vitals Search Console.

Validasi tidak memberi hasil instan karena CrUX memakai jendela data 28 hari. Status berubah dari Poor ke Good sekitar lima minggu setelah perbaikan dirilis.

CLS halaman produk turun dari 0,31 ke 0,04. Bounce rate ikut turun dari 68% ke 55% (proyeksi).

Konversi halaman produk naik dari 1,1% ke 1,5% di periode yang sama. Harga dan budget iklan tidak diubah, jadi stabilitas layout jadi penjelasan paling masuk akal.

Metrik Utama Core Web Vitals

Setiap metrik mewakili satu momen berbeda dalam pengalaman pengunjung.

1. Largest Contentful Paint (LCP)

Largest contentful paint mengukur kapan elemen terbesar di layar selesai tampil. Biasanya itu foto produk utama atau banner hero.

Batas Good adalah 2,5 detik atau kurang, sedangkan di atas 4 detik dianggap Poor. Penyebab umumnya gambar besar, server lambat, dan CSS yang memblokir render.

2. Interaction to Next Paint (INP)

Interaction to next paint mengukur jeda antara interaksi pengguna dan respons visual halaman. Contohnya, waktu dari tap varian warna sampai pilihan terlihat berubah.

Batas Good adalah 200 milidetik, dan di atas 500 milidetik dianggap Poor. Biang keroknya sering JavaScript berat dari plugin, tracking, dan widget pihak ketiga.

3. Cumulative Layout Shift (CLS)

Cumulative layout shift mengukur seberapa banyak elemen bergeser tanpa diminta pengguna. Inilah metrik yang menjatuhkan ratusan URL produk saya.

Skor 0,1 ke bawah dianggap Good, sementara di atas 0,25 masuk Poor. Pelakunya biasanya gambar tanpa dimensi, iklan, font telat dimuat, dan konten sisipan.

Cara Cek Skor Web Vitals

Ada tiga tool utama, dan masing-masing menjawab pertanyaan yang berbeda.

1. Google Search Console (GSC)

Laporan core web vitals Search Console berisi data lapangan dari pengguna Chrome asli. Inilah sumber yang paling dekat dengan cara Google menilai situs kamu.

  • Buka Search Console dan pilih properti website.
  • Masuk ke menu Core Web Vitals di bagian Experience.
  • Pilih laporan Mobile, lalu klik status Poor atau Needs Improvement.
  • Buka grup URL untuk melihat metrik penyebab dan contoh halamannya.

Data hanya muncul kalau situs punya traffic yang cukup di CrUX. Website kecil kadang belum punya laporan sama sekali.

2. PageSpeed Insights

PageSpeed Insights menampilkan dua jenis data dalam satu halaman. Bagian atas berisi data lapangan CrUX, bagian bawah berisi skor lab Lighthouse.

Di sinilah perbandingan PageSpeed Insights vs CrUX paling mudah dilihat. Kesalahan umum adalah hanya melirik skor bulat dan melewatkan data lapangan di atasnya.

3. Lighthouse

Lighthouse tersedia di Chrome DevTools dan mengetes halaman dalam kondisi simulasi. Tool ini cocok untuk debugging cepat sebelum perubahan dirilis.

Keterbatasannya, Lighthouse tidak bisa mengukur INP karena tidak ada interaksi nyata. Pakai Total Blocking Time sebagai pendekatan, lalu konfirmasi lewat data lapangan.

Cara Optimasi Core Web Vitals

Cara Optimasi Core Web Vitals

Mulailah dari halaman yang paling menghasilkan uang, biasanya halaman produk dan kategori. Perbaiki template-nya, karena satu template bisa mewakili ratusan URL.

Untuk LCP, kompres gambar ke WebP dan beri preload pada gambar utama. Jangan lazy load gambar yang langsung terlihat di layar pertama.

Untuk INP, kurangi JavaScript pihak ketiga yang tidak benar-benar dipakai. Pecah script berat agar browser tidak tersumbat saat pengguna mengetuk tombol.

Untuk CLS, beri width dan height pada semua gambar, banner, dan iframe. Siapkan ruang kosong untuk elemen yang dimuat belakangan, termasuk notifikasi promo.

Checklist singkat sebelum merilis perubahan.

  • Tes di HP Android kelas bawah, bukan hanya laptop.
  • Aktifkan throttling jaringan 4G lambat di DevTools.
  • Cek apakah tombol utama bergeser saat halaman dimuat.
  • Catat tanggal rilis untuk membaca data CrUX 28 hari kemudian.

Cara meningkatkan kecepatan website yang paling efektif justru sering membosankan. Hapus yang tidak perlu dulu, baru optimasi yang tersisa.

Ukuran Keberhasilan Harus Datang dari Sisi Pelanggan

Pelajaran terbesarnya jelas. Core Web Vitals adalah soal pengalaman pengguna nyata, bukan angka di tool.

Skor 92 tidak salah, hanya mengukur kondisi yang tidak dialami pelanggan. Yang dinilai Google adalah pembeli dengan HP dan sinyal terlemah.

Laporan penuh status Poor dan penyebabnya sulit dilacak? Diskusi dengan konsultan SEO Indonesia bisa mempercepat diagnosis.

FAQ Seputar Core Web Vitals

1. Apa itu Core Web Vitals?

Core Web Vitals adalah sekumpulan metrik dari Google untuk mengukur pengalaman pengguna saat membuka sebuah halaman web. Ada tiga aspek yang dinilai: kecepatan memuat konten utama, kecepatan respons saat pengguna berinteraksi, dan kestabilan tampilan halaman. Ketiganya diukur dari data pengguna nyata, bukan sekadar hasil simulasi.

2. Apa bedanya data lab dan data lapangan (field data)?

  • Data lab: hasil simulasi di lingkungan terkontrol, misalnya lewat Lighthouse. Berguna untuk debugging, tetapi belum tentu mencerminkan pengalaman pengguna nyata
  • Data lapangan: dikumpulkan dari pengguna Chrome sungguhan lewat Chrome User Experience Report (CrUX). Data inilah yang dipakai Google untuk menilai Core Web Vitals

Karena itu, skor Lighthouse yang tinggi tidak otomatis berarti halaman lolos penilaian Core Web Vitals.

3. Bagaimana cara mengecek Core Web Vitals?

  • Google Search Console: laporan Core Web Vitals menampilkan status grup URL di mobile dan desktop
  • PageSpeed Insights: menampilkan data lapangan (jika tersedia) dan data lab untuk satu URL
  • Chrome DevTools dan Lighthouse: untuk analisis teknis dan debugging
  • CrUX Dashboard atau CrUX API: untuk melihat tren data lapangan dari waktu ke waktu
  • Library web-vitals: untuk mengirim data Core Web Vitals pengguna nyata ke GA4 atau tools analitik lain

4. Apa penyebab umum INP dan CLS buruk?

INP buruk biasanya disebabkan oleh JavaScript yang berat, terlalu banyak skrip pihak ketiga (chat widget, tracker, pop-up), dan tugas panjang yang memblokir main thread. Solusinya adalah memecah tugas JavaScript yang panjang, menunda skrip yang tidak penting, dan mengurangi plugin berlebihan.

CLS buruk biasanya muncul karena gambar atau iklan tanpa ukuran yang ditentukan, banner yang muncul tiba-tiba, dan font yang berganti saat dimuat. Solusinya adalah menetapkan atribut width dan height pada gambar dan video, menyediakan ruang tetap untuk iklan atau embed, serta mengatur pemuatan font dengan baik.

5. Berapa lama perbaikan Core Web Vitals terlihat di Search Console?

Data lapangan di Search Console dihitung dari periode 28 hari terakhir. Jadi, setelah perbaikan diterapkan, butuh sekitar empat minggu sampai hasilnya terlihat penuh. Setelah perbaikan selesai, klik tombol Validate fix di laporan Core Web Vitals agar Google mulai memantau ulang URL yang bermasalah.

Referensi:

Artikel Terkait