Home / Blog / Tips & Tutorial / SEO / Apa Itu Core Web Vitals? Panduan & Metricsnya

Apa Itu Core Web Vitals? Panduan & Metricsnya

Core Web Vitals bukan lagi sekadar metrik teknikal yang hanya harus dipahami developer tapi juga kamu sebagai SEO Specialist.

Ini adalah sinyal langsung yang digunakan Google untuk menilai kualitas pengalaman pengguna di website kamu.

Situs yang gagal memenuhi threshold Core Web Vitals kehilangan antara 8% hingga 35% traffic, konversi, dan pendapatan dibanding situs yang lolos (aTeam Soft Solutions, 2025).

Di artikel ini, kamu akan memahami apa itu Core Web Vitals, bagaimana cara kerjanya, bagaimana cara mengecek kondisi website kamu sekarang, dan langkah-langkah optimasi konkret yang bisa langsung diterapkan bahkan tanpa keahlian coding mendalam.

Apa itu Core Web Vitals?

Core Web Vitals adalah metrik spesifik yang digunakan Google untuk mengukur kualitas pengalaman pengguna di sebuah halaman web.

Metrics mengukur tiga dimensi berbeda dari dari Core Web Vitals diantaranya:

LCP (Largest Contentful Paint) : seberapa cepat konten utama halaman dimuat
INP (Interaction to Next Paint) : seberapa responsif halaman terhadap interaksi pengguna
CLS (Cumulative Layout Shift) : seberapa stabil tampilan halaman saat dimuat

Yang membuat metrik ini, Core Web Vitals diukur dari data pengguna nyata (real user data) melalui Chrome User Experience Report (CrUX) bukan dari simulasi lab.

Artinya, yang dinilai Google adalah pengalaman yang benar-benar dirasakan oleh pengunjung websitemu, bukan skor ideal di lingkungan testing yang sempurna.

Menurut Google Search Central, threshold “Good” untuk ketiga metrik adalah:

Metrik	Good	Needs Improvement	Poor
LCP	≤ 2,5 detik	2,6 – 4,0 detik	> 4,0 detik
INP	≤ 200 ms	201 – 500 ms	> 500 ms
CLS	≤ 0,1	0,1 – 0,25	> 0,25

Seberapa Besar Dampak Core Web Vitals terhadap SEO dan Bisnis?

Sebelum masuk ke teknis, penting untuk memahami konteks bisnis di balik angka-angka ini.

Menurut data dari Web Almanac 2025, hanya 48% halaman mobile dan 56% halaman desktop yang lulus ketiga Core Web Vitals sekaligus.

Artinya lebih dari separuh website di internet termasuk kemungkinan besar website kompetitormu masih gagal di sini.

Dampak terhadap performa bisnis pun terukur:

Setiap tambahan 1 detik LCP di atas 2,5 detik meningkatkan bounce rate sebesar 32% (Mewa Studio, 2026)
Satu detik keterlambatan loading mengurangi konversi rata-rata 7%
E-commerce yang mencapai threshold “Good” di ketiga metrik melihat peningkatan konversi 15–30% (Mewa Studio, 2026)
Contoh nyata dari Pinterest: setelah memperbaiki perceived load time hingga 40%, mereka mencatat 15% peningkatan SEO traffic dan 15% peningkatan konversi sign-up (aTeam Soft Solutions, 2025)

Dari perspektif ranking, Core Web Vitals berfungsi sebagai tiebreaker bukan faktor dominan yang bisa mengalahkan konten.

Tapi ketika dua halaman bersaing untuk keyword yang sama dengan kualitas konten yang setara, halaman dengan Core Web Vitals yang lebih baik yang menang.

Walaupun dari pengalaman saya, terkadang metrics ini tidak berlaku di beberapa website, namun jika tentu ini akan berpngaruh terhadap experience user saat berkunjung di website kita.

Metrics Core Web Vitals

Seperti yang sudah saya mention diatas, setidaknya ada 3 metrics yang harus diperhatikan untuk optimasinya.

1. LCP (Largest Contentful Paint)

LCP mengukur waktu dari saat halaman mulai dimuat hingga elemen konten terbesar di viewport pengguna selesai dirender.

Elemen yang mempengaruhi nilai LCP biasanya berupa:

Hero image di bagian atas halaman
Video thumbnail
Blok teks besar (H1 atau paragraf pembuka panjang)
Background image yang besar

LCP adalah metrik yang paling langsung memberikan persepsi pengguna tentang seberapa cepat halaman loading.

Mengapa LCP Sering Gagal?

Menurut Web Almanac 2025, hanya 62% halaman mobile yang mencapai LCP baik menjadikannya Core Web Vital yang paling sering gagal.

Penyebab utamanya:

a. Gambar yang tidak dioptimasi

Ini penyebab paling umum. Gambar berukuran besar dalam format JPEG/PNG yang tidak dikompres menjadi beban terbesar untuk LCP. Solusi: konversi ke format WebP atau AVIF (ukuran file 25–50% lebih kecil dengan kualitas visual yang sama), kompres gambar sebelum upload, dan tentukan dimensi eksplisit di HTML.

b. Server response time yang lambat (TTFB tinggi)

Sebelum browser bisa memuat konten, dia harus menunggu server merespons. TTFB (Time to First Byte) yang tinggi — biasanya akibat hosting shared yang lambat atau tidak ada server-side caching — langsung memukul LCP.

c. Render-blocking CSS dan JavaScript

File CSS dan JS yang harus selesai dimuat sebelum browser bisa menampilkan konten apapun. Solusi: defer JavaScript yang tidak kritis, inline critical CSS, dan gunakan atribut async atau defer pada script tag.

d. LCP image tidak di-preload

Jika elemen LCP adalah gambar, browser perlu menemukannya lebih awal dalam proses loading. Solusi: tambahkan <link rel="preload" as="image" fetchpriority="high"> untuk gambar yang menjadi elemen LCP.

Yang Harus Dilakukan untuk Memperbaiki LCP

Kompres semua gambar (gunakan TinyPNG atau ShortPixel)
Konversi gambar ke format WebP
Upgrade hosting ke yang lebih cepat
Aktifkan caching server-side
Implementasikan CDN (Cloudflare free tier sudah sangat membantu)
Defer JavaScript yang tidak kritis
Preload LCP image dengan fetchpriority=”high”

2. INP (Interaction to Next Paint)

INP (Interaction to Next Paint) menggantikan FID (First Input Delay) sebagai metrik interaktivitas sejak Maret 2024.

FID hanya mengukur keterlambatan sebelum browser mulai memproses interaksi pertama. INP mengukur latensi penuh dari setiap interaksi selama sesi pengguna klik, tap, input keyboard dari awal hingga browser menampilkan respons visual.

Bayangkan website yang loading-nya cepat tapi setiap kali kamu klik tombol, ada jeda 400ms sebelum sesuatu terjadi.

FID mungkin tidak mendeteksi ini tapi INP akan menangkapnya.

Penyebab INP Buruk

INP yang buruk hampir selalu disebabkan oleh JavaScript yang memblokir main thread. Ketika browser sibuk mengeksekusi JavaScript, dia tidak bisa merespons interaksi pengguna dan inilah yang menyebabkan lag yang terasa.

Culprit paling umum:

Third-party scripts : Google Analytics, pixel iklan, chat widgets, heatmap tools. Setiap script tambahan adalah beban di main thread.
Event listeners yang berat : handler yang melakukan terlalu banyak pekerjaan saat triggered
JavaScript framework yang tidak dioptimasi : terutama React atau Vue yang merender ulang terlalu banyak komponen

Cara Memperbaiki INP

INP adalah metrik yang paling sulit diperbaiki karena memerlukan perubahan pada arsitektur JavaScript.

Tapi ada langkah awal yang bisa dilakukan:

Audit third-party scripts
Lazy load semua script non-kritis
Gunakan Web Workers untuk tugas berat di background
Pecah long tasks (>50ms) menjadi task yang lebih kecil
Gunakan tools seperti Chrome DevTools Performance panel untuk identifikasi bottleneck

3. CLS (Cumulative Layout Shift)

CLS mengukur seberapa banyak konten bergerak secara tak terduga selama proses loading halaman.

Skor CLS dihitung dari total dampak semua layout shift yang terjadi tanpa interaksi langsung pengguna.

Menurut Web Almanac 2025, 81% halaman mobile sudah mencapai CLS yang baik jauh lebih tinggi dari LCP dan INP.

Penyebab CLS Paling Umum

Gambar tanpa dimensi eksplisit Jika tag <img> tidak mencantumkan width dan height, browser tidak tahu berapa ruang yang perlu disiapkan. Saat gambar selesai dimuat, konten di sekitarnya bergeser. Solusi sederhana: selalu cantumkan dimensi gambar.
Iklan dan embed yang diinjeksikan secara dinamis Iklan yang dimuat setelah konten utama sering mendorong konten ke bawah tiba-tiba. Solusi: reservasi ruang tetap untuk iklan sebelum konten dimuat.
Web font yang menyebabkan teks bergeser (FOUT/FOIT) Ketika font eksternal belum dimuat, browser menggunakan font fallback. Ketika font asli selesai dimuat, ukuran dan posisi teks berubah. Solusi: gunakan font-display: optional atau font-display: swap dengan size-adjust yang disesuaikan.
Cookie banner dan popup Elemen yang muncul setelah halaman dimuat dan mendorong konten utama ke bawah. Solusi: design cookie banner agar muncul di overlay tanpa mendorong konten lain.

Cara Mengecek Core Web Vitals Website Kamu

Kamu tidak perlu tools berbayar untuk mengecek kondisi Core Web Vitals website. Berikut tools gratis yang bisa langsung digunakan:

1. Google Search Console

*Tampilan di Google Search Console untuk melihat menu Core Web Vitals*

Cara mengakses: Login ke search.google.com/search-console kemudian klik Core Web Vitals di menu kiri.

Ini adalah sumber data paling akurat karena menggunakan field data (CrUX) data dari pengguna nyata yang mengunjungi website kamu.

Laporan ini mengelompokkan halaman berdasarkan status: Good, Needs Improvement, atau Poor.

Yang perlu diperhatikan:

Halaman mana yang memiliki masalah paling parah (Poor)?
Template halaman mana yang paling banyak bermasalah?
Apakah masalah lebih banyak di mobile atau desktop?

2. PageSpeed Insights

*Tampilan di website Page Speed Insight untuk melihat performa Core web Vitals*

URL: pagespeed.web.dev

Masukkan URL halaman manapun dan dapatkan laporan lengkap yang menggabungkan field data (CrUX) dan lab data (Lighthouse).

Laporan ini juga memberikan rekomendasi spesifik apa yang perlu diperbaiki beserta estimasi dampaknya.

Targetnya di 90+ untuk desktop, 70+ untuk mobile.

3. Chrome DevTools

*Tampilan Chrome Dev Tools untuk melihat Core Web Vitals*

Untuk analisis yang lebih mendalam, buka Chrome → klik kanan → Inspect → tab Performance atau gunakan ekstensi Web Vitals yang menampilkan skor LCP, INP, dan CLS secara real-time saat kamu browsing.

Panduan Optimasi Core Web Vitals untuk WordPress

Sebagian besar website Indonesia menggunakan WordPress, jadi berikut panduan spesifik untuk platform ini, karena CMS ini punya banyak plugin, kamu bisa install beberapa plugin yang saya rekomendasikan dibawah ini.

Untuk caching dan LCP:

WP Rocket (berbayar, ~$49/tahun)
LiteSpeed Cache (gratis)
W3 Total Cache (gratis)

Untuk kompresi gambar:

ShortPixel
Imagify
EWWW Image Optimizer (gratis)

Untuk CDN:

Cloudflare (gratis untuk tier dasar)

Kesimpulan

Core Web Vitals di 2026 bukan opsional tapi jadi baseline yang harus dipenuhi setiap website yang ingin bersaing di halaman pertama Google.

Prioritas paling rasional yang bisa dimulai dari LCP karena dampak bisnisnya paling terukur dan cara memperbaikinya paling jelas.

Lanjutkan ke CLS karena relatif mudah. Baru kemudian tackle INP yang memerlukan pekerjaan JavaScript yang lebih dalam.

Kalau kamu butuh bantuan mengaudit dan mengoptimasi Core Web Vitals website kamu, konsultasi gratis 30 menit tersedia via WhatsApp atau gunakan jasa SEO Profesional dari saya.

Referensi :