Core Web Vitals untuk SEO: Memahami LCP, INP, CLS, dan Cara Optimasi

Apa Itu Core Web Vitals?

Core Web Vitals adalah sekumpulan metrik yang berfokus pada pengalaman pengguna nyata ketika membuka dan menggunakan halaman web. Metrik ini tidak menilai apakah desain terlihat cantik atau konten sudah relevan dengan keyword. Fokusnya adalah bagaimana halaman benar-benar terasa ketika dimuat dan digunakan.

Tiga metrik utamanya adalah Largest Contentful Paint (LCP), Interaction to Next Paint (INP), dan Cumulative Layout Shift (CLS). Ketiganya mewakili tiga masalah yang mudah dirasakan pengguna: menunggu konten utama muncul, menunggu halaman merespons interaksi, dan elemen yang bergeser tiba-tiba.

Core Web Vitals merupakan bagian dari area Technical SEO dan performance. Namun skor yang bagus tidak menggantikan kebutuhan terhadap konten berkualitas, indexability, arsitektur internal link, maupun relevansi pencarian.

Apakah Core Web Vitals Mempengaruhi SEO?

Google menggunakan Core Web Vitals dalam sistem ranking sebagai bagian dari sinyal page experience, tetapi tidak tepat menganggapnya sebagai satu-satunya penentu ranking. Halaman yang sangat cepat tidak otomatis mengalahkan halaman yang lebih relevan dan bermanfaat. Karena itu, optimasi performa sebaiknya diposisikan sebagai peningkatan pengalaman pengguna sekaligus perbaikan kualitas teknis website.

Dalam audit, masalah performa juga perlu dipisahkan dari masalah crawling dan indexing. Website dapat memiliki Core Web Vitals bagus tetapi tidak terindex karena canonical atau robots directive salah. Sebaliknya, halaman dapat terindex dengan baik tetapi terasa lambat bagi pengguna.

LCP: Seberapa Cepat Konten Utama Terlihat?

Largest Contentful Paint mengukur waktu hingga elemen konten terbesar yang terlihat di viewport selesai dirender. Pada banyak website, elemen LCP dapat berupa hero image, banner utama, gambar produk besar, atau blok teks besar.

Untuk pengalaman yang baik, target LCP adalah 2,5 detik atau kurang. Nilai di atas 4 detik masuk kategori buruk, sedangkan area di antaranya membutuhkan perbaikan.

Penyebab LCP lambat

Penyebabnya sering merupakan kombinasi server lambat, resource render-blocking, hero image terlalu berat, gambar dimuat terlambat, font, CSS/JavaScript berlebihan, atau resource utama berasal dari origin yang lambat. Jangan langsung mengompres semua gambar tanpa mengetahui elemen LCP sebenarnya.

Cara memperbaiki LCP

INP: Seberapa Cepat Halaman Merespons Interaksi?

Interaction to Next Paint menilai responsivitas halaman sepanjang kunjungan pengguna. Metrik ini melihat interaksi seperti klik, tap, dan input keyboard, kemudian mengukur waktu sampai browser dapat menampilkan respons visual berikutnya.

Target INP yang baik adalah 200 milidetik atau kurang. INP menggantikan FID sebagai Core Web Vital karena cakupannya lebih representatif terhadap pengalaman interaksi sepanjang halaman.

Mengapa INP bisa buruk?

JavaScript yang menjalankan long task pada main thread merupakan penyebab umum. Script pihak ketiga, widget, tracking berlebihan, event handler berat, proses rendering besar, dan aplikasi yang menjalankan terlalu banyak pekerjaan saat pengguna berinteraksi juga dapat meningkatkan INP.

Solusinya bukan sekadar menghapus seluruh JavaScript. Pecah pekerjaan panjang menjadi tugas yang lebih kecil, kurangi kode yang tidak diperlukan, prioritaskan respons visual pengguna, dan audit script pihak ketiga yang membebani main thread.

CLS: Apakah Layout Bergeser Saat Halaman Dimuat?

Cumulative Layout Shift mengukur pergeseran layout yang tidak diharapkan. Contohnya pengguna hendak menekan tombol, lalu banner muncul dan mendorong tombol ke bawah; atau paragraf berpindah karena gambar di atasnya baru mendapatkan ukuran setelah selesai dimuat.

Target CLS yang baik adalah 0,1 atau kurang. CLS berbeda dari LCP dan INP karena nilainya bukan satuan waktu.

Penyebab CLS yang sering ditemukan

Gambar tanpa dimensi, slot iklan tanpa ruang yang dicadangkan, embed yang berubah ukuran, banner yang disisipkan di atas konten, dan font web yang mengubah ukuran teks setelah loading dapat memicu pergeseran. Gunakan atribut width/height atau aspect-ratio untuk media, reservasi ruang untuk komponen dinamis, dan hindari menyisipkan konten baru di atas area yang sedang dilihat pengguna.

Field Data vs Lab Data: Mengapa Hasil Bisa Berbeda?

Field data berasal dari pengalaman pengguna nyata pada perangkat, jaringan, dan kondisi yang beragam. Data Chrome User Experience Report (CrUX) merupakan contoh field data. Sementara lab data dihasilkan dari pengujian terkontrol dan sangat berguna untuk debugging.

Karena sumbernya berbeda, skor lab hari ini tidak harus sama dengan data pengguna nyata. Sebuah halaman bisa cepat pada komputer developer tetapi lambat bagi pengguna mobile dengan jaringan lebih lemah. Sebaliknya, perubahan optimasi baru mungkin sudah terlihat di lab tetapi belum tercermin penuh pada agregasi field data.

Untuk Core Web Vitals, evaluasi “good” umumnya menggunakan persentil ke-75 dari pengalaman pengguna. Artinya audit tidak seharusnya mengambil satu kunjungan tercepat sebagai representasi seluruh pengguna.

Cara Cek Core Web Vitals

1. PageSpeed Insights

Gunakan PageSpeed Insights untuk melihat data pengguna nyata ketika tersedia serta hasil pengujian Lighthouse. Perhatikan apakah masalah terjadi pada mobile, desktop, atau keduanya, lalu lihat metrik yang benar-benar gagal.

2. Google Search Console

Laporan Core Web Vitals di Search Console membantu melihat kelompok URL dengan pola masalah serupa. Ini berguna untuk website besar karena satu template bermasalah dapat memengaruhi banyak URL sekaligus.

3. Chrome DevTools

DevTools membantu diagnosis teknis lebih dalam: resource yang lambat, long task, request jaringan, layout shift, dan aktivitas main thread. Untuk INP khususnya, rekaman Performance dapat membantu menemukan pekerjaan yang menahan respons interaksi.

4. Jangan menguji homepage saja

Ambil sampel berdasarkan template: homepage, artikel, kategori, produk, landing page, dan halaman penting lain. Template yang berbeda dapat memiliki bottleneck yang berbeda.

Strategi Optimasi Core Web Vitals

Optimasi gambar secara selektif

Gunakan ukuran gambar yang sesuai kebutuhan tampilan, format modern bila cocok, responsive images, dan lazy loading untuk gambar di bawah fold. Namun jangan menerapkan lazy loading secara membabi buta pada hero yang menjadi LCP.

Kurangi beban JavaScript

Audit script yang benar-benar dibutuhkan. Tunda kode non-kritis, kurangi third-party script yang tidak memberikan nilai, pecah long task, dan hindari pekerjaan berat tepat saat pengguna berinteraksi.

Perbaiki jalur rendering

CSS dan font yang dibutuhkan area atas halaman harus tersedia dengan efisien. Resource yang tidak kritis tidak perlu menghambat browser menampilkan konten utama.

Percepat server dan delivery

TTFB bukan Core Web Vital, tetapi respons server yang lambat dapat menunda proses berikutnya dan memperburuk LCP. Caching, CDN, optimasi backend, database, dan hosting perlu diperiksa bila bottleneck berasal dari server. Masalah server berat juga dapat terlihat melalui HTTP status code seperti 5xx.

Stabilkan ruang layout

Berikan dimensi media, sediakan ruang untuk iklan/embed, dan desain komponen dinamis agar tidak mendorong konten secara mendadak.

Prioritas Audit: Apa yang Diperbaiki Lebih Dulu?

Mulailah dari metrik yang gagal pada field data dan template yang berdampak ke banyak URL atau trafik penting. Setelah itu identifikasi penyebab teknis dengan lab tools. Pendekatan ini lebih efisien daripada mengejar angka 100 pada setiap halaman tanpa memahami dampaknya.

Kesalahan Umum Saat Mengejar Core Web Vitals

Kesalahan paling umum adalah menganggap skor Lighthouse sebagai satu-satunya kebenaran, menghapus fitur penting hanya demi skor, lazy-load semua gambar termasuk hero, memasang terlalu banyak plugin optimasi yang saling tumpang tindih, atau mengubah banyak hal sekaligus sehingga penyebab perbaikan tidak dapat dilacak.

Core Web Vitals sebaiknya dipakai sebagai alat diagnosis pengalaman pengguna. Tujuannya bukan membuat website “lulus tes” semata, tetapi membuat halaman cepat tampil, cepat merespons, dan stabil ketika digunakan.

FAQ Core Web Vitals

Berapa nilai Core Web Vitals yang bagus?

Target good yang umum adalah LCP maksimal 2,5 detik, INP maksimal 200 ms, dan CLS maksimal 0,1 pada persentil ke-75 pengalaman pengguna.

Apakah skor PageSpeed harus 100?

Tidak. Skor Lighthouse membantu diagnosis, tetapi angka 100 bukan syarat agar halaman dapat ranking. Fokus pada masalah pengguna nyata, Core Web Vitals, dan bottleneck yang relevan.

Apakah Core Web Vitals hanya penting untuk mobile?

Tidak. Pengalaman mobile dan desktop sama-sama perlu diperhatikan, walaupun karakteristik perangkat dan jaringan dapat membuat hasilnya berbeda.

Apakah INP sama dengan FID?

Tidak. INP menggantikan FID sebagai Core Web Vital dan menilai responsivitas interaksi dengan cakupan yang lebih luas selama kunjungan.

Berapa lama hasil optimasi terlihat?

Lab test dapat menunjukkan perubahan segera. Field data membutuhkan data pengguna nyata sehingga pembaruannya tidak seketika. Karena itu jangan menyimpulkan optimasi gagal hanya karena laporan agregat belum langsung berubah.

Core Web Vitals adalah Diagnosis, Bukan Sekadar Skor

Website yang sehat tidak hanya dapat di-crawl dan diindex. Pengguna juga harus dapat membuka, membaca, dan berinteraksi tanpa menunggu lama atau menghadapi layout yang melompat. LCP, INP, dan CLS memberi kerangka yang terukur untuk menemukan masalah tersebut.

Setelah fondasi seperti canonical, sitemap, response URL, dan indexability benar, optimasi Core Web Vitals membantu membawa Technical SEO ke sisi pengalaman pengguna. Perbaiki berdasarkan data, prioritaskan template yang paling berdampak, lalu ukur kembali setelah implementasi.