Core Web Vitals: Pengertian, Metrik, dan Cara Memperbaiki

Oleh Admin Powercode · Kategori: Web Development

Panel SEO (isi di Yoast atau Rank Math, jangan disalin ke isi artikel)

• Kata kunci utama: core web vitals
• Judul SEO: Core Web Vitals: Pengertian, Metrik, dan Cara Memperbaiki
• Slug: core-web-vitals
• Meta description: Core Web Vitals adalah metrik kecepatan dan kenyamanan website dari Google. Pelajari LCP, INP, CLS, dan cara memperbaikinya agar skor naik.
• Alt text gambar utama: Diagram tiga metrik Core Web Vitals: LCP, INP, dan CLS
• Kategori: Web Development
• Tag: core web vitals, kecepatan website, LCP, INP, CLS, SEO teknis

Core Web Vitals adalah tolok ukur Google untuk menilai seberapa cepat dan nyaman sebuah website dipakai. Pernahkah Anda menekan tombol di sebuah website, tetapi tidak ada yang terjadi selama beberapa detik? Atau hampir mengklik satu tautan, lalu halaman tiba-tiba bergeser dan Anda malah menekan iklan? Pengalaman seperti ini membuat pengunjung kesal, dan banyak dari mereka tidak akan kembali.

Bagi pemilik bisnis, pengembang, maupun penulis konten, memahami Core Web Vitals membantu memastikan website tidak hanya tampil bagus, tetapi juga terasa cepat dan nyaman. Selain itu, tulisan ini membahas cara mengecek dan memperbaikinya langkah demi langkah.

Apa Itu Core Web Vitals?

Core Web Vitals adalah kumpulan metrik dari Google yang mengukur kualitas pengalaman pengguna saat mengakses sebuah halaman web. Fokusnya ada pada tiga hal: kecepatan memuat, respons terhadap interaksi, dan kestabilan tampilan. Penjelasan resminya tersedia di web.dev.

Datanya diambil dari pengguna sungguhan yang mengunjungi website Anda melalui browser Chrome, sehingga angkanya mencerminkan pengalaman nyata, bukan sekadar simulasi di laboratorium. Selain itu, penilaian biasanya dilihat pada persentil ke-75, artinya minimal 75% kunjungan harus memenuhi batas “baik” agar sebuah halaman dinyatakan lolos.

Tiga Metrik Utama Core Web Vitals

1. LCP (Largest Contentful Paint)

LCP mengukur berapa lama elemen terbesar di layar, biasanya gambar utama atau judul besar, selesai tampil. Inilah yang paling dekat dengan persepsi pengunjung tentang “halaman ini sudah termuat”.

2. INP (Interaction to Next Paint)

INP mengukur seberapa cepat halaman merespons interaksi pengguna, seperti klik, ketukan, atau penekanan tombol keyboard. Ia melihat seluruh interaksi selama kunjungan dan melaporkan salah satu yang terlambat, bukan hanya interaksi pertama. INP menggantikan metrik lama bernama FID (First Input Delay) pada Maret 2024.

3. CLS (Cumulative Layout Shift)

CLS mengukur seberapa sering tampilan bergeser tanpa diduga saat halaman dimuat. Gambar tanpa ukuran, iklan yang muncul belakangan, atau font yang berganti bentuk adalah penyebab yang paling umum.

Batas Nilai yang Dianggap Baik

Metrik	Baik	Perlu Perbaikan	Buruk
LCP	≤ 2,5 detik	2,5 – 4 detik	> 4 detik
INP	≤ 200 milidetik	200 – 500 milidetik	> 500 milidetik
CLS	≤ 0,1	0,1 – 0,25	> 0,25

Mengapa Core Web Vitals Penting untuk Bisnis?

Pengalaman pengunjung. Halaman yang lambat atau “melompat-lompat” mendorong orang menutup tab sebelum membaca penawaran Anda. Semakin cepat dan stabil sebuah halaman, semakin besar peluang pengunjung bertahan, membaca, lalu mengambil tindakan.

Konversi. Misalnya, pada toko online atau halaman pendaftaran, penundaan beberapa detik saja bisa berarti keranjang belanja yang ditinggalkan. Perbaikan performa sering terasa langsung pada angka penjualan atau jumlah pengisi formulir.

SEO. Google menyebut pengalaman halaman sebagai salah satu sinyal yang dipertimbangkan dalam peringkat pencarian. Perlu dicatat, sinyal ini bukan pengganti konten yang relevan dan bermanfaat. Anggap Core Web Vitals sebagai penentu ketika dua halaman memiliki kualitas konten yang sama-sama baik.

Cara Mengecek Core Web Vitals Website Anda

1. PageSpeed Insights. Masukkan alamat halaman di PageSpeed Insights, lalu lihat bagian data pengguna nyata di bagian atas hasil. Alat ini juga memberi daftar saran perbaikan.
2. Google Search Console. Laporan Core Web Vitals di Google Search Console mengelompokkan halaman Anda menjadi baik, perlu perbaikan, atau buruk. Dengan begitu, Anda tahu kelompok halaman mana yang bermasalah.
3. Lighthouse di Chrome DevTools. Cocok untuk menguji saat pengembangan. Ingat bahwa hasilnya adalah data simulasi (lab data), sehingga bisa berbeda dari pengalaman pengguna sungguhan (field data).

Namun, jika website Anda baru atau trafiknya masih sedikit, data pengguna nyata mungkin belum tersedia. Dalam kondisi itu, gunakan data lab sebagai panduan sementara.

Cara Memperbaiki LCP

• Kompres dan sesuaikan ukuran gambar. Gunakan format modern seperti WebP atau AVIF, dan jangan menayangkan gambar 3000 piksel di area yang hanya selebar 600 piksel.
• Prioritaskan elemen utama. Jangan menerapkan lazy loading pada gambar yang tampil pertama kali di layar. Beri petunjuk prioritas agar browser memuatnya lebih dulu.
• Percepat respons server. Gunakan hosting yang memadai dan aktifkan caching, misalnya dengan Redis cache. Pertimbangkan juga CDN agar konten dikirim dari lokasi terdekat dengan pengunjung.
• Kurangi sumber penghambat render. CSS dan JavaScript yang besar di bagian atas halaman menahan tampilan. Pecah, tunda, atau hapus yang tidak diperlukan.

Cara Memperbaiki INP

• Kurangi JavaScript yang berat. Hapus pustaka dan plugin yang tidak terpakai, lalu muat skrip pihak ketiga seperti widget chat atau pelacak hanya saat dibutuhkan.
• Pecah tugas panjang. Proses yang memblokir browser lebih dari sekitar 50 milidetik membuat halaman terasa macet. Bagi menjadi bagian-bagian kecil agar browser sempat merespons klik pengguna.
• Sederhanakan struktur halaman. Elemen HTML yang sangat banyak membuat setiap pembaruan tampilan lebih lambat.
• Beri umpan balik visual segera. Tampilkan indikator pemuatan atau perubahan tombol secepatnya, walau proses di belakang layar belum selesai.

Cara Memperbaiki CLS

• Tentukan lebar dan tinggi gambar serta video. Dengan begitu browser menyisakan ruang sebelum berkas selesai dimuat.
• Sediakan ruang tetap untuk iklan, banner, dan embed. Jangan biarkan elemen tersebut menyelip di atas konten yang sedang dibaca.
• Atur pemuatan font. Gunakan font cadangan yang ukurannya mirip dan atur perilaku tampilannya agar teks tidak berubah bentuk secara mencolok.
• Hindari menyisipkan konten di atas konten yang sudah tampil, kecuali sebagai respons atas tindakan pengguna.

Kesalahan Umum dalam Optimasi Core Web Vitals

• Hanya mengejar skor 100 di alat uji, padahal yang menjadi acuan adalah data pengguna nyata.
• Menguji hanya halaman beranda, sementara halaman produk atau artikel yang paling banyak dikunjungi justru lebih lambat.
• Memasang banyak plugin demi fitur kecil tanpa menghitung dampaknya pada kecepatan.
• Lupa menguji di ponsel kelas menengah dengan koneksi biasa, padahal inilah kondisi sebagian besar pengunjung di Indonesia.
• Berhenti setelah satu kali perbaikan. Performa perlu dipantau berkala karena setiap penambahan konten atau fitur bisa mengubahnya.

Checklist Singkat

• Cek LCP, INP, dan CLS di PageSpeed Insights dan Search Console
• Kompres gambar dan gunakan format modern
• Aktifkan caching dan pertimbangkan CDN
• Kurangi JavaScript serta plugin yang tidak terpakai
• Tetapkan ukuran gambar, video, dan ruang iklan
• Uji di perangkat seluler dan pantau secara rutin

Pertanyaan Seputar Core Web Vitals (FAQ)

Apakah Core Web Vitals memengaruhi peringkat SEO?

Ya, sebagai salah satu sinyal pengalaman halaman. Namun, relevansi dan kualitas konten tetap menjadi faktor yang lebih utama.

Apa pengganti FID di Core Web Vitals?

Metrik INP menggantikan FID pada Maret 2024. INP menilai seluruh interaksi selama kunjungan, bukan hanya interaksi pertama.

Seberapa sering Core Web Vitals perlu dicek?

Cek setidaknya sekali sebulan. Lakukan juga setiap kali Anda menambah plugin, fitur, atau tampilan baru.

Kesimpulan

Core Web Vitals pada dasarnya adalah cara mengukur hal yang sudah dirasakan pengunjung: apakah halaman cepat tampil, cepat merespons, dan tidak bergeser-geser. Jadi, dengan memahami tiga metrik utama Core Web Vitals, yaitu LCP, INP, dan CLS, Anda bisa menemukan bagian yang paling perlu dibenahi dan memperbaikinya secara bertahap.

Namun, perbaikan performa memang membutuhkan keahlian teknis, mulai dari optimasi gambar, pengaturan server, hingga perapian kode. Jika Anda ingin website bisnis yang cepat, stabil, dan siap bersaing di hasil pencarian, tim Powercode siap membantu membangun serta mengoptimalkannya. Kunjungi powercode.id untuk berkonsultasi.