Core Web Vitals: Panduan Lengkap untuk Pemilik Website 2026

Jika Anda pernah mengecek skor kecepatan website di Google PageSpeed Insights, kemungkinan besar Anda menemukan istilah seperti LCP, INP, atau CLS di sana. Mungkin Anda mengabaikannya karena terdengar terlalu teknis. Padahal, tiga metrik inilah yang Google gunakan untuk mengukur seberapa nyaman pengalaman pengguna di website Anda, dan secara langsung memengaruhi peringkat website di hasil pencarian.

Core Web Vitals adalah standar resmi Google untuk mengukur kualitas pengalaman pengguna dari sisi teknis. Bukan sekadar ukuran abstrak untuk insinyur, melainkan metrik yang mencerminkan sesuatu yang nyata: apakah halaman website Anda terasa cepat, responsif, dan stabil bagi pengunjung.

Artikel ini menjelaskan apa itu Core Web Vitals, mengapa penting bagi bisnis Anda, dan apa yang bisa dilakukan untuk memperbaikinya.

Apa Itu Core Web Vitals?

Core Web Vitals adalah sekumpulan metrik yang Google tetapkan sebagai indikator utama kualitas pengalaman pengguna. Per 2024, ada tiga metrik yang menjadi intinya.

1. LCP – Largest Contentful Paint: mengukur kecepatan loading elemen utama halaman
2. INP – Interaction to Next Paint: mengukur responsivitas halaman terhadap interaksi pengguna
3. CLS – Cumulative Layout Shift: mengukur stabilitas visual halaman saat dimuat

Ketiga metrik ini menjadi bagian dari Page Experience Signal Google, yaitu kumpulan faktor yang digunakan untuk menilai kualitas sebuah halaman web. Performa yang baik di Core Web Vitals berkontribusi pada peringkat yang lebih baik di Google, sedangkan performa yang buruk bisa menjadi hambatan meski konten website Anda berkualitas.

LCP – Largest Contentful Paint

Apa yang Diukur

LCP mengukur waktu yang dibutuhkan untuk memuat elemen terbesar yang terlihat di viewport (area layar yang terlihat tanpa scroll) ketika halaman pertama kali dibuka. Elemen yang dimaksud biasanya berupa gambar hero, thumbnail video, atau blok teks besar di bagian atas halaman.

Secara sederhana, LCP menjawab pertanyaan: “Berapa lama sampai pengunjung bisa melihat konten utama halaman ini?”

Target yang Perlu Dipenuhi

• Baik: di bawah 2,5 detik
• Perlu perbaikan: antara 2,5 hingga 4 detik
• Buruk: di atas 4 detik

Penyebab LCP yang Lambat

Penyebab paling umum LCP yang lambat antara lain gambar hero yang berukuran besar dan tidak dioptimasi, server hosting yang lambat merespons permintaan, file CSS atau JavaScript yang memblokir rendering halaman, serta tidak adanya optimasi untuk sumber daya yang dibutuhkan awal halaman.

Cara Memperbaiki LCP

Langkah-langkah yang paling efektif untuk memperbaiki LCP adalah mengoptimasi gambar hero (kompres dan gunakan format WebP), menambahkan atribut fetchpriority="high" pada gambar LCP agar dimuat lebih diprioritaskan, menggunakan CDN agar konten lebih cepat sampai ke pengunjung, serta meningkatkan kualitas hosting. Semua ini dibahas lebih lengkap di artikel cara mempercepat loading website.

INP – Interaction to Next Paint

Apa yang Diukur

INP menggantikan metrik lama FID (First Input Delay) sejak Maret 2024. INP mengukur waktu yang dibutuhkan halaman untuk merespons secara visual setelah pengguna melakukan interaksi apa pun, seperti mengklik tombol, mengetuk menu, atau mengisi formulir.

Jika pengguna mengklik tombol “Tambah ke Keranjang” dan tombol tersebut tidak merespons selama beberapa detik, INP website Anda akan buruk. Ini menciptakan pengalaman yang membuat frustrasi, terutama di perangkat seluler.

Target yang Perlu Dipenuhi

• Baik: di bawah 200 milidetik
• Perlu perbaikan: antara 200 hingga 500 milidetik
• Buruk: di atas 500 milidetik

Penyebab INP yang Buruk

INP yang buruk biasanya disebabkan oleh JavaScript yang terlalu berat atau tidak efisien yang memblokir main thread browser, terlalu banyak skrip pihak ketiga yang dijalankan bersamaan, atau kode yang tidak dioptimasi untuk merespons interaksi dengan cepat.

Cara Memperbaiki INP

Perbaikan INP umumnya membutuhkan pendekatan teknis yang lebih dalam. Ini mencakup memecah tugas JavaScript yang panjang menjadi bagian yang lebih kecil, menghapus atau menunda pemuatan skrip pihak ketiga yang tidak kritis, dan memastikan event handler dioptimasi agar tidak mengerjakan terlalu banyak pekerjaan sekaligus.

Untuk website WordPress, menggunakan tema yang ringan dan membatasi jumlah plugin yang memuat JavaScript berat adalah langkah awal yang paling praktis.

CLS – Cumulative Layout Shift

Apa yang Diukur

CLS mengukur seberapa banyak elemen di halaman bergeser dari posisinya secara tak terduga selama proses loading. Anda pasti pernah mengalami ini: Anda hampir mengklik sebuah tombol, tapi tiba-tiba gambar di atasnya selesai dimuat dan menggeser seluruh konten ke bawah, sehingga Anda malah mengklik hal yang salah.

Itulah layout shift. CLS mengukur totalnya selama proses loading halaman.

Target yang Perlu Dipenuhi

• Baik: di bawah 0,1
• Perlu perbaikan: antara 0,1 hingga 0,25
• Buruk: di atas 0,25

Penyebab CLS yang Buruk

Penyebab paling umum CLS yang buruk adalah gambar tanpa atribut dimensi (width dan height), iklan atau embed yang muncul setelah konten sudah mulai dimuat, dan font dari server eksternal yang menyebabkan teks bergeser saat font selesai diunduh.

Cara Memperbaiki CLS

Selalu tentukan dimensi gambar dengan atribut width dan height di kode HTML, atau gunakan CSS untuk menetapkan aspect ratio container gambar. Ini memberi tahu browser berapa ruang yang perlu disiapkan sebelum gambar selesai dimuat, sehingga tidak ada pergeseran.

Untuk font, gunakan properti font-display: swap agar teks tetap tampil menggunakan font cadangan sambil menunggu font utama selesai dimuat, tanpa menyebabkan pergeseran tata letak yang tiba-tiba.

Mengukur Core Web Vitals Website Anda

Ada dua cara mengukur Core Web Vitals: data lab dan data lapangan.

Data lab adalah pengukuran yang dilakukan dalam kondisi terkontrol, seperti yang dilakukan Google PageSpeed Insights. Ini membantu mendiagnosis masalah spesifik tapi belum tentu mencerminkan pengalaman nyata pengguna Anda.

Data lapangan (field data) adalah data yang dikumpulkan dari pengguna nyata yang mengunjungi website Anda melalui Chrome. Data inilah yang Google gunakan sebagai sinyal peringkat. Anda bisa melihatnya di Google Search Console, bagian Core Web Vitals, yang memperlihatkan berapa persen URL di website Anda yang masuk kategori Baik, Perlu Perbaikan, atau Buruk.

Alat yang Bisa Digunakan

• Google PageSpeed Insights (pagespeed.web.dev): analisis cepat dengan skor dan rekomendasi
• Google Search Console: data lapangan dari pengguna nyata, tersegmen per URL
• Chrome DevTools: alat diagnostik mendalam untuk developer
• web-vitals.js: library JavaScript untuk mengukur Core Web Vitals langsung di website

Skor Core Web Vitals website Anda buruk dan tidak tahu harus memperbaiki dari mana? Tim kami membangun website dengan fondasi performa yang kuat sejak awal. Lihat layanan pembuatan website kami.

Core Web Vitals dan Pengaruhnya Terhadap SEO

Google secara resmi menggunakan Core Web Vitals sebagai salah satu faktor peringkat sejak 2021 melalui pembaruan Page Experience. Bobot faktor ini terus meningkat dalam algoritma Google.

Yang perlu dipahami: Core Web Vitals bukan faktor yang mengalahkan relevansi konten. Konten yang sangat relevan dengan kata kunci pencarian masih bisa mendapat peringkat tinggi meski skor Core Web Vitals-nya tidak sempurna. Tapi di antara halaman-halaman dengan kualitas konten yang setara, performa Core Web Vitals yang lebih baik bisa menjadi penentu.

Lebih dari itu, Core Web Vitals yang baik secara tidak langsung membantu SEO melalui jalur lain: bounce rate yang lebih rendah (pengunjung yang puas cenderung menjelajah lebih dalam), waktu kunjungan yang lebih lama, dan kemungkinan konversi yang lebih tinggi. Semua ini memberi sinyal positif ke Google bahwa halaman Anda memberikan nilai bagi pengunjung.

Baca lebih lanjut tentang hubungan antara pengalaman pengguna dan SEO di artikel UX UI website bisnis.

Perbedaan Performa Desktop dan Mobile

Skor Core Web Vitals untuk versi desktop dan mobile biasanya berbeda, dengan versi mobile yang umumnya lebih rendah. Ini wajar karena perangkat seluler memiliki kapasitas pemrosesan yang lebih terbatas dan koneksi yang lebih tidak stabil.

Yang perlu diperhatikan: Google menggunakan pendekatan mobile-first indexing, artinya versi mobile website Anda yang menjadi acuan utama untuk penilaian. Skor Core Web Vitals versi mobile Anda lebih penting daripada skor desktopnya.

Pastikan website Anda tidak hanya tampil baik di layar kecil secara visual (responsive web design), tapi juga performanya memadai di perangkat dengan kapasitas yang lebih terbatas.

Yang Sering Diabaikan: Metrik Pendukung

Selain tiga metrik Core Web Vitals utama, ada beberapa metrik pendukung yang juga dilaporkan oleh PageSpeed Insights dan patut diperhatikan.

TTFB (Time to First Byte): waktu yang dibutuhkan browser menerima byte pertama dari server setelah mengirim permintaan. TTFB yang tinggi menunjukkan masalah di sisi server atau hosting, dan ini secara langsung memengaruhi LCP. Jika Anda baru saja memindahkan file ke server, pastikan prosesnya dilakukan dengan benar — panduan cara upload website ke hosting membahas langkah-langkah yang perlu diperhatikan agar website tampil optimal sejak awal.

FCP (First Contentful Paint): waktu sampai konten pertama apa pun muncul di layar. Berbeda dengan LCP yang mengukur elemen terbesar, FCP mengukur kapan sesuatu pertama kali terlihat.

TBT (Total Blocking Time): waktu total main thread browser dalam keadaan “terblokir” dan tidak bisa merespons interaksi pengguna. Berkorelasi erat dengan INP.

Memperbaiki ketiga metrik ini biasanya sekaligus memperbaiki ketiga Core Web Vitals utama.

Target Realistis untuk Website UMKM

Website UMKM tidak harus sempurna, tapi harus berada di zona “Baik” untuk semua metrik. Target yang realistis untuk website company profile atau toko online UMKM:

• LCP di bawah 2,5 detik
• INP di bawah 200 milidetik
• CLS di bawah 0,1
• Skor PageSpeed mobile minimal 70

Target ini bisa dicapai dengan pilihan tema yang tepat (untuk WordPress), optimasi gambar yang konsisten, dan hosting yang layak. Website yang dibangun dari awal dengan mempertimbangkan performa akan jauh lebih mudah memenuhi target ini dibanding website yang harus dioptimasi setelah jadi.

Pertanyaan yang Sering Diajukan

Apakah Core Web Vitals sama dengan kecepatan website?

Tidak persis. Kecepatan website umumnya mengacu pada waktu loading secara keseluruhan, sedangkan Core Web Vitals mengukur aspek yang lebih spesifik: kecepatan elemen utama (LCP), responsivitas terhadap interaksi (INP), dan stabilitas visual (CLS). Website bisa memuat cepat tapi tetap punya CLS yang buruk, misalnya.

Seberapa sering skor Core Web Vitals berubah?

Data lapangan di Google Search Console diperbarui secara berkala berdasarkan data yang dikumpulkan selama 28 hari terakhir. Perubahan yang Anda buat hari ini baru akan terlihat di laporan setelah beberapa minggu.

Apakah saya perlu ahli teknis untuk memperbaiki Core Web Vitals?

Beberapa perbaikan seperti optimasi gambar dan pengurangan plugin bisa dilakukan sendiri. Tapi perbaikan INP yang membutuhkan optimasi JavaScript biasanya memerlukan bantuan pengembang.

Apakah semua halaman website perlu memenuhi standar Core Web Vitals?

Idealnya ya, tapi fokuslah pada halaman-halaman yang paling banyak dikunjungi terlebih dahulu. Google Search Console memperlihatkan halaman mana yang mendapat nilai buruk dan mana yang sudah baik.

Kesimpulan

Core Web Vitals bukan metrik teknis yang hanya relevan bagi developer. Ini adalah cerminan langsung dari pengalaman pengunjung ketika mengakses website Anda, dan Google menganggapnya cukup penting untuk dijadikan faktor peringkat.

LCP, INP, dan CLS masing-masing mengukur aspek pengalaman yang berbeda: seberapa cepat konten utama muncul, seberapa cepat halaman merespons interaksi, dan seberapa stabil tata letak halaman selama loading. Ketiganya perlu berada di zona “Baik” untuk memberikan pengalaman yang memuaskan.

Website yang dibangun dengan mempertimbangkan performa sejak awal akan jauh lebih mudah memenuhi standar ini. Jika website Anda masih berjuang dengan skor Core Web Vitals, konsultasikan dengan tim kami untuk mendapatkan diagnosis yang tepat dan solusi yang efektif.