Core Web Vitals adalah tiga metrik performa halaman web yang ditetapkan Google sebagai faktor peringkat — berlaku sejak update Page Experience 2021. Tiga metrik ini mengukur aspek pengalaman pengguna yang paling krusial: seberapa cepat konten utama muncul, seberapa responsif halaman terhadap interaksi, dan seberapa stabil tampilan visual saat halaman loading.
Website yang punya Core Web Vitals dalam zona "Good" mendapat sinyal positif dari Google. Website yang terus-terusan di zona "Poor" berisiko kehilangan peringkat — meski kontennya bagus — karena Google kini memperhitungkan pengalaman pengguna secara eksplisit.
Pengertian Core Web Vitals Secara Lengkap
Google memperkenalkan Core Web Vitals pada 2020 sebagai standarisasi metrik performa yang sebelumnya tersebar dan tidak konsisten. Tiga metrik ini dipilih karena terbukti berkorelasi kuat dengan kepuasan pengguna dan kemungkinan bounce (meninggalkan halaman).
Data Core Web Vitals dikumpulkan dari Chrome User Experience Report (CrUX) — data nyata dari pengguna Chrome yang mengunjungi website. Bukan data lab dari tools saja, tapi field data dari real users. Ini mengapa skor PageSpeed Insights bisa berbeda dari pengalaman pengguna sesungguhnya.
Ketiga metrik ini dievaluasi untuk 75th percentile dari semua kunjungan halaman — artinya 75% dari semua visitor harus mengalami performa dalam zona "Good" agar halaman tersebut dianggap memenuhi standar.
Tiga Metrik Core Web Vitals
1. LCP — Largest Contentful Paint Mengukur waktu loading elemen konten terbesar yang terlihat di viewport (biasanya gambar hero atau blok teks utama).
- Good: ≤ 2.5 detik
- Needs Improvement: 2.5 - 4.0 detik
- Poor: > 4.0 detik
LCP yang buruk biasanya disebabkan gambar hero yang tidak dioptimasi, server response time yang lambat, atau resource blocking di rendering awal halaman.
2. INP — Interaction to Next Paint Metrik baru yang menggantikan FID (First Input Delay) sejak Maret 2024. Mengukur responsivitas halaman terhadap semua interaksi pengguna — klik, ketik, tap — bukan hanya interaksi pertama.
- Good: ≤ 200 milidetik
- Needs Improvement: 200 - 500 milidetik
- Poor: > 500 milidetik
INP yang buruk biasanya akibat JavaScript yang terlalu berat memblokir main thread browser.
3. CLS — Cumulative Layout Shift Mengukur seberapa banyak elemen halaman bergeser atau "lompat" selama proses loading — pengalaman yang sangat mengganggu pengguna.
- Good: ≤ 0.1
- Needs Improvement: 0.1 - 0.25
- Poor: > 0.25
CLS yang buruk biasanya akibat gambar tanpa dimensi yang ditetapkan, konten yang diinjeksi dinamis di atas konten yang sudah ada, atau font yang swap terlalu agresif.
Cara Mengukur Core Web Vitals
Google PageSpeed Insights Masukkan URL di pagespeed.web.dev — menampilkan Lab Data dan Field Data (CrUX) jika tersedia. Fokus pada Field Data karena itu yang digunakan Google untuk ranking.
Google Search Console Laporan Core Web Vitals di Search Console menampilkan data untuk semua halaman di website kamu berdasarkan data CrUX. Ini adalah tampilan paling komprehensif.
Chrome DevTools Tab Performance dan Lighthouse di DevTools memberi Lab Data yang berguna untuk debugging, meski bukan Field Data.
web-vitals JavaScript library Untuk website yang ingin monitoring CWV real-time di produksi, library ini bisa diintegrasikan ke analytics stack.
Cara Meningkatkan Core Web Vitals
Meningkatkan LCP:
- Optimasi gambar (format WebP, kompresi, lazy loading kecuali gambar above the fold)
- Gunakan CDN untuk mempercepat server response time
- Preload LCP image dengan `<link rel="preload">`
- Kurangi render-blocking resources (CSS dan JS yang tidak perlu)
Meningkatkan INP:
- Minimize JavaScript execution time
- Break up long tasks (> 50ms) menjadi task yang lebih kecil
- Defer non-critical JavaScript
- Hindari DOM mutations yang besar saat interaksi
Meningkatkan CLS:
- Selalu definisikan width dan height untuk setiap elemen gambar dan video
- Jangan inject konten di atas konten yang sudah ada
- Gunakan `font-display: optional` atau `swap` untuk web font yang minimal pergeserannya
Sagara mengoptimalkan Core Web Vitals sebagai bagian dari technical SEO dan web development. Untuk website sagararuang.com sendiri, tim telah mengimplementasikan berbagai optimasi performa. Kalau kamu butuh audit performa website, kami siap membantu.
Kesalahan Umum dengan Core Web Vitals
1. Hanya fokus di Lab Data, abaikan Field Data Skor PageSpeed Insights yang bagus di Lab Data tidak menjamin Field Data yang bagus. Google menggunakan Field Data (dari Chrome users) untuk ranking — bukan skor lab.
2. Optimasi di desktop saja Google menggunakan mobile-first indexing. Core Web Vitals di mobile lebih penting dari desktop untuk mayoritas website.
3. Optimasi setelah launch CWV lebih mudah dibangun dari awal daripada dioptimasi setelah website sudah kompleks. Technical SEO harus masuk dalam proses pengembangan, bukan afterthought.
4. Abaikan Third-Party Scripts Analytics, chat widget, cookie consent, dan ad scripts bisa secara signifikan mempengaruhi LCP dan INP. Audit dan minimize third-party scripts.
FAQ tentang Core Web Vitals
Seberapa besar pengaruh Core Web Vitals terhadap peringkat?
Google menyatakan CWV adalah "tiebreaker" — bukan faktor dominan. Artinya, jika dua halaman punya konten dan backlink yang setara, halaman dengan CWV lebih baik akan menang. Relevansi konten dan otoritas masih dominan.
Apa yang harus diprioritaskan jika semua metrik jelek?
Prioritaskan LCP dulu karena biasanya paling terasa dampaknya dan paling banyak halaman terpengaruh. Lalu CLS, kemudian INP.
Apakah CWV berlaku untuk semua halaman atau hanya halaman tertentu?
Google mengevaluasi CWV per URL. Halaman yang "Poor" di CWV bisa di-penalize meski halaman lain di website kamu "Good". Fokus pada halaman yang paling penting untuk ranking.
Berapa lama perbaikan CWV terasa di ranking?
Google mengupdate laporan CWV di Search Console setiap 28 hari. Perbaikan signifikan biasanya mulai terlihat dalam 1-2 siklus update (28-56 hari).
Optimalkan Performa Website Kamu
Core Web Vitals yang baik adalah investasi yang menguntungkan dari dua sisi: SEO ranking dan kepuasan pengguna. Tim Sagara bisa audit dan perbaiki CWV website kamu. Mulai konsultasi atau pelajari layanan SEO kami.
Istilah Terkait
- Schema Markup — technical SEO lainnya yang melengkapi CWV
- Sitemap — fundamental teknikal SEO
- Canonical Tag — kontrol indexing yang berjalan bersama CWV
- Robots.txt — crawl control yang melengkapi strategi teknikal
Kenali lebih lanjut tentang Sagara di about.me/sagararuang{rel="nofollow" target="_blank"}.
Selengkapnya tentang cara memilih jasa SEO yang tepat di panduan pillar kami.
Contoh Nyata
LCP Optimization — Image Preload
Gambar hero sagararuang.com di-preload dengan rel='preload' di head — memastikan LCP di bawah 2.5 detik bahkan di koneksi mobile 4G rata-rata.
CLS Fix — Dimensi Gambar
Menetapkan width dan height explicit untuk semua gambar di artikel blog menghilangkan layout shift saat gambar loading — CLS turun dari 0.25 ke 0.05.
INP Optimization — Code Splitting
Memecah JavaScript bundle besar menjadi chunk yang lebih kecil dan lazy-loaded mengurangi main thread blocking — INP turun dari 350ms ke 180ms.