Website yang terlihat cepat belum tentu memberikan pengalaman pengguna yang optimal. Halaman mungkin terbuka dalam hitungan detik, tetapi konten utamanya terlambat muncul, tombol tidak segera merespons, atau tata letak bergeser ketika pengunjung hendak mengeklik sesuatu.
Masalah tersebut dapat diidentifikasi melalui Core Web Vitals, yaitu tiga metrik yang digunakan Google untuk mengukur aspek penting pengalaman pengguna pada website.
Bagi pemilik bisnis dan pengelola website, memahami Core Web Vitals bukan sekadar memenuhi rekomendasi teknis Google. Pengukuran ini membantu memastikan pengunjung dapat melihat konten, berinteraksi, dan menjelajahi halaman dengan nyaman.
Lantas, bagaimana cara mengetahui apakah Core Web Vitals website sudah memenuhi standar? Apa penyebab nilai LCP, INP, dan CLS buruk, serta bagaimana memperbaikinya?
Artikel ini membahas langkah diagnosis dan optimasi ketiga metrik tersebut menggunakan PageSpeed Insights dan Google Search Console.
Apa Itu Core Web Vitals dan Mengapa Penting untuk Website?
Core Web Vitals adalah sekumpulan metrik dari Google yang mengukur pengalaman pengguna berdasarkan kecepatan tampilnya konten utama, responsivitas interaksi, dan stabilitas visual halaman.
Ketiga metrik utamanya meliputi:
- Largest Contentful Paint (LCP): Mengukur seberapa cepat elemen konten terbesar yang terlihat pada viewport selesai ditampilkan.
- Interaction to Next Paint (INP): Mengukur responsivitas halaman terhadap interaksi pengguna.
- Cumulative Layout Shift (CLS): Mengukur pergeseran tata letak yang tidak diharapkan selama penggunaan halaman.
Core Web Vitals merupakan bagian dari sinyal pengalaman halaman yang digunakan sistem ranking Google. Namun, memperoleh skor baik tidak otomatis menjamin website mendapatkan peringkat tinggi.
Relevansi konten, kualitas informasi, dan berbagai sinyal lainnya tetap berperan dalam hasil pencarian.
Dari perspektif pengguna, ketiga metrik tersebut membantu menjawab pertanyaan sederhana: apakah halaman cepat terlihat, mudah digunakan, dan tidak mengganggu interaksi?
Standar Nilai LCP, INP, dan CLS yang Direkomendasikan Google
Google membagi hasil pengukuran Core Web Vitals menjadi tiga kategori: Good, Needs Improvement, dan Poor.
Berikut ambang nilai yang digunakan untuk menilai ketiga metrik.
| Metrik | Good | Needs Improvement | Poor |
| LCP | ≤ 2,5 detik | > 2,5–4 detik | > 4 detik |
| INP | ≤ 200 ms | > 200–500 ms | > 500 ms |
| CLS | ≤ 0,1 | > 0,1–0,25 | > 0,25 |
Penilaian menggunakan persentil ke-75 dari pengalaman pengguna yang tercatat, dengan pengukuran terpisah untuk perangkat seluler dan desktop.
Artinya, nilai Core Web Vitals tidak cukup dinilai berdasarkan satu kali pengujian pada perangkat pribadi.
Sebagai contoh, apabila LCP sebuah halaman mencapai 3,2 detik pada persentil ke-75, halaman tersebut berada dalam kategori Needs Improvement untuk metrik LCP.
Target optimasi yang disarankan adalah mencapai kategori Good pada ketiga metrik.
Perbedaan Field Data dan Lab Data dalam Core Web Vitals
Sebelum melakukan optimasi, penting untuk memahami dua jenis data yang digunakan dalam pengukuran performa website.
Field Data: Data Pengalaman Pengguna Nyata
Field data merupakan data yang dikumpulkan dari pengalaman pengguna nyata ketika mengakses website.
Google menggunakan Chrome User Experience Report (CrUX) sebagai salah satu sumber data tersebut.
Field data mencerminkan kondisi penggunaan yang beragam, termasuk perbedaan perangkat, jaringan, dan perilaku pengguna.
Pada PageSpeed Insights, data CrUX umumnya menggunakan periode bergulir selama 28 hari.
Data inilah yang relevan untuk menilai apakah website memenuhi ambang Core Web Vitals berdasarkan pengalaman pengguna nyata.
Lab Data: Hasil Pengujian dalam Kondisi Terkontrol
Lab data diperoleh melalui pengujian menggunakan perangkat dan kondisi simulasi tertentu.
PageSpeed Insights menggunakan Lighthouse untuk memberikan hasil pengujian laboratorium dan rekomendasi teknis.
Lab data berguna untuk menemukan penyebab masalah, tetapi hasilnya dapat berbeda dari pengalaman pengguna nyata.
Perhatikan perbedaan berikut:
| Field Data | Lab Data |
| Berdasarkan pengguna nyata | Berdasarkan pengujian terkontrol |
| Menggambarkan variasi kondisi penggunaan | Menggunakan kondisi pengujian tertentu |
| Memiliki data INP jika sampelnya mencukupi | Menggunakan metrik diagnostik seperti TBT, bukan INP langsung |
| Cocok untuk memantau pengalaman aktual | Cocok untuk investigasi dan pengujian perbaikan |
Kesimpulannya, gunakan field data untuk menilai kondisi pengalaman pengguna dan lab data untuk membantu menemukan masalah teknis yang perlu diperbaiki.
Cara Mengecek Core Web Vitals Menggunakan PageSpeed Insights
PageSpeed Insights merupakan salah satu alat yang dapat digunakan untuk menganalisis Core Web Vitals.
Berikut langkah penggunaannya.
1. Masukkan URL Website
Buka PageSpeed Insights, masukkan URL halaman yang ingin diperiksa, kemudian klik Analyze.
Tunggu hingga proses analisis selesai.
2. Periksa Core Web Vitals Assessment
Jika data pengguna nyata tersedia, PageSpeed Insights akan menampilkan hasil Core Web Vitals Assessment.
Periksa nilai LCP, INP, dan CLS pada perangkat seluler maupun desktop.
Perhatikan apakah data yang ditampilkan berasal dari URL spesifik atau keseluruhan origin, karena cakupan keduanya berbeda.
3. Analisis Temuan Lighthouse
Lanjutkan ke bagian diagnostik untuk melihat potensi masalah yang memengaruhi performa.
Sebagai contoh:
- LCP buruk dapat berkaitan dengan keterlambatan penemuan atau pemuatan elemen konten utama.
- INP buruk dapat berkaitan dengan pemrosesan JavaScript yang menghambat respons interaksi.
- CLS tinggi dapat disebabkan oleh elemen yang berubah posisi setelah halaman mulai ditampilkan.
Gunakan temuan tersebut sebagai dasar investigasi, bukan sebagai bukti tunggal penyebab masalah.
Cara Memantau Core Web Vitals melalui Google Search Console
Selain PageSpeed Insights, Anda dapat menggunakan Google Search Console untuk memantau kelompok halaman yang mengalami masalah Core Web Vitals.
Langkah-langkahnya sebagai berikut:
- Masuk ke Google Search Console dan pilih properti website.
- Buka menu Experience → Core Web Vitals.
- Pilih laporan Mobile atau Desktop.
- Periksa kelompok URL berstatus Poor atau Needs Improvement.
- Buka detail masalah untuk melihat contoh URL yang terdampak.
Google Search Console mengelompokkan URL berdasarkan kemiripan pengalaman pengguna dan masalah yang ditemukan.
Karena itu, satu masalah dapat memengaruhi beberapa halaman sekaligus.
Misalnya, apabila banyak halaman menggunakan template artikel yang sama, perbaikan pada template tersebut berpotensi meningkatkan pengalaman pengguna di seluruh kelompok URL terkait.
Laporan GSC lebih tepat digunakan untuk memantau pola masalah, sedangkan PageSpeed Insights membantu menganalisis URL tertentu secara lebih mendalam.
Cara Memperbaiki LCP agar Konten Utama Lebih Cepat Tampil
Largest Contentful Paint mengukur waktu yang diperlukan hingga elemen konten terbesar yang terlihat pada viewport selesai dirender.
Elemen tersebut dapat berupa gambar utama, poster video, atau blok teks besar.
Jika LCP melebihi 2,5 detik, lakukan pemeriksaan terhadap elemen yang menjadi kandidat LCP.
1. Identifikasi Elemen LCP
Gunakan PageSpeed Insights untuk menemukan elemen LCP yang terdeteksi dalam pengujian.
Perhatikan apakah elemen tersebut berupa gambar hero, banner, atau teks utama.
Identifikasi ini penting karena strategi perbaikan harus disesuaikan dengan elemen yang benar-benar memengaruhi LCP.
2. Optimalkan Gambar LCP
Apabila gambar merupakan elemen LCP, beberapa langkah yang dapat dilakukan adalah:
- Gunakan ukuran gambar sesuai kebutuhan tampilan.
- Pertimbangkan format modern seperti WebP atau AVIF.
- Gunakan atribut srcset dan sizes untuk menyediakan gambar responsif.
- Hindari penggunaan lazy loading pada gambar LCP yang langsung terlihat.
- Pertimbangkan fetchpriority=”high” untuk gambar LCP yang penting.
Optimasi gambar sebaiknya tetap mempertahankan kualitas visual yang sesuai dengan kebutuhan website.
3. Kurangi Keterlambatan Rendering
Periksa apakah CSS atau JavaScript tertentu menghambat tampilan konten utama.
Anda dapat mengurangi sumber daya yang tidak diperlukan pada tahap awal, mengoptimalkan CSS penting, dan memastikan elemen LCP dapat ditemukan browser sedini mungkin.
Jika elemen utama baru dimasukkan melalui JavaScript setelah proses tertentu selesai, evaluasi apakah pendekatan rendering tersebut masih diperlukan.
Tujuannya adalah mempercepat waktu tampil konten utama, bukan sekadar mengecilkan seluruh ukuran halaman.
Cara Memperbaiki INP agar Website Lebih Responsif
Interaction to Next Paint mengukur responsivitas halaman terhadap interaksi pengguna, seperti klik, ketukan, dan input keyboard.
INP memperhitungkan waktu dari interaksi hingga browser dapat menampilkan pembaruan visual berikutnya.
Nilai INP yang tinggi dapat membuat tombol, menu, atau formulir terasa lambat merespons.
1. Identifikasi Interaksi yang Lambat
Gunakan data lapangan dan alat pengembang browser untuk mencari interaksi yang memerlukan waktu lama.
Periksa apakah masalah muncul ketika pengguna membuka menu, memilih produk, atau mengisi formulir.
2. Kurangi Pekerjaan JavaScript yang Panjang
JavaScript yang menjalankan pekerjaan berat pada main thread dapat menunda pemrosesan interaksi.
Beberapa pendekatan perbaikannya meliputi:
- Memecah pekerjaan JavaScript panjang menjadi tugas yang lebih kecil.
- Menghindari proses komputasi berat secara langsung dalam event handler.
- Mengurangi pekerjaan yang tidak diperlukan ketika pengguna berinteraksi.
- Memindahkan komputasi yang sesuai ke Web Worker.
Langkah tersebut dapat membantu browser memberikan kesempatan lebih cepat untuk memproses input dan memperbarui tampilan.
3. Optimalkan Pembaruan Antarmuka
Selain JavaScript, proses rendering juga dapat memengaruhi INP.
Hindari perubahan DOM berlebihan dan evaluasi pembaruan tata letak yang kompleks setelah interaksi.
Untuk mengidentifikasi hambatan secara lebih rinci, gunakan panel Performance pada Chrome DevTools.
Cara Memperbaiki CLS agar Tata Letak Website Stabil
Cumulative Layout Shift mengukur pergeseran visual yang tidak diharapkan ketika pengguna mengakses halaman.
Contohnya, pengguna hendak mengeklik tombol, tetapi tombol tersebut tiba-tiba bergeser karena gambar atau banner baru muncul.
CLS yang baik memiliki nilai maksimal 0,1.
1. Tentukan Dimensi Gambar dan Video
Gambar atau video tanpa ruang yang disiapkan dapat menyebabkan elemen lain bergeser ketika media selesai dimuat.
Tambahkan atribut width dan height, atau gunakan CSS aspect-ratio untuk membantu browser menyediakan ruang sejak awal.
Contoh:
<img
src=”gambar-artikel.webp”
width=”1200″
height=”675″
alt=”Ilustrasi artikel website”
>
Dengan dimensi yang jelas, browser dapat memperkirakan ruang gambar sebelum file selesai dimuat.
2. Siapkan Ruang untuk Konten Dinamis
Banner promosi, iklan, dan elemen dinamis lainnya dapat menyebabkan layout shift apabila muncul tanpa ruang yang telah disediakan.
Gunakan container dengan dimensi yang sesuai untuk mengurangi perubahan posisi konten.
Hindari menyisipkan elemen baru di atas konten yang sedang dibaca pengguna, kecuali memang diperlukan dan dirancang dengan baik.
3. Optimalkan Penggunaan Web Font
Perubahan font setelah halaman ditampilkan dapat mengubah ukuran teks dan posisi elemen.
Pertimbangkan penggunaan font cadangan yang memiliki metrik serupa, lakukan preload secara selektif, dan evaluasi strategi font-display.
Pengaturan font perlu diuji karena hasilnya dapat berbeda sesuai karakteristik website.
Cara Memantau Core Web Vitals Setelah Melakukan Perbaikan
Setelah melakukan optimasi LCP, INP, dan CLS, langkah berikutnya adalah memastikan perubahan tersebut benar-benar meningkatkan pengalaman pengguna.
Jangan hanya mengandalkan satu hasil pengujian PageSpeed Insights.
1. Bandingkan Hasil Sebelum dan Sesudah Optimasi
Catat nilai Core Web Vitals sebelum perubahan diterapkan.
Setelah optimasi, jalankan kembali pengujian menggunakan URL, jenis perangkat, dan kondisi pengujian yang sebanding.
Bandingkan hasilnya untuk mengetahui apakah terdapat peningkatan atau masalah baru.
2. Pantau Data Pengguna Nyata
Karena CrUX menggunakan periode bergulir selama 28 hari, perubahan pada field data tidak selalu langsung terlihat.
Pantau perkembangannya secara berkala. Jika tersedia, gunakan data Real User Monitoring (RUM) untuk memperoleh pengukuran yang lebih spesifik.
3. Gunakan Fitur Validate Fix
Jika masalah tercatat dalam laporan Core Web Vitals Google Search Console, gunakan fitur Validate Fix setelah perbaikan diterapkan.
Google akan memeriksa perkembangan masalah berdasarkan data yang tersedia. Proses validasi dapat membutuhkan waktu dan tidak menjamin seluruh URL langsung memperoleh status Good.
Untuk memudahkan pemantauan, dokumentasikan tanggal perubahan, URL terdampak, metrik yang diperbaiki, serta hasil evaluasinya.
FAQ Seputar Core Web Vitals
Apakah Core Web Vitals memengaruhi SEO?
Ya. Core Web Vitals digunakan oleh sistem ranking Google sebagai bagian dari penilaian pengalaman halaman. Namun, nilai yang baik tidak menjamin peringkat tinggi karena relevansi dan kualitas konten tetap menjadi faktor penting.
Berapa nilai Core Web Vitals yang bagus?
Nilai yang termasuk kategori Good adalah LCP maksimal 2,5 detik, INP maksimal 200 milidetik, dan CLS maksimal 0,1 pada persentil ke-75.
Mengapa skor PageSpeed Insights berubah-ubah?
Hasil pengujian laboratorium dapat berubah karena variasi kondisi simulasi, pemrosesan halaman, dan sumber daya yang dimuat. Untuk mengevaluasi pengalaman pengguna secara keseluruhan, perhatikan juga field data.
Apakah skor Lighthouse 100 berarti Core Web Vitals sudah baik?
Tidak selalu. Skor Lighthouse merupakan hasil pengujian laboratorium, sedangkan penilaian Core Web Vitals mengutamakan pengalaman pengguna nyata. Website dengan skor Lighthouse tinggi masih dapat memiliki masalah pada field data.
Berapa lama perbaikan Core Web Vitals terlihat di Google Search Console?
Perubahan tidak selalu langsung muncul karena laporan menggunakan data pengguna nyata dalam periode tertentu. Pantau perkembangannya selama beberapa minggu dan gunakan pengujian laboratorium untuk memeriksa dampak teknis lebih awal.
Kesimpulan
Core Web Vitals merupakan indikator penting untuk mengevaluasi kualitas pengalaman pengguna pada website, khususnya dari sisi kecepatan tampilan konten, responsivitas interaksi, dan stabilitas tata letak.
Untuk mendapatkan hasil optimal, fokuskan perbaikan pada tiga metrik utama: LCP maksimal 2,5 detik, INP maksimal 200 milidetik, dan CLS maksimal 0,1.
Gunakan PageSpeed Insights untuk menemukan potensi masalah teknis, Google Search Console untuk memantau kelompok URL yang terdampak, serta field data untuk mengevaluasi hasil optimasi berdasarkan pengalaman pengguna nyata.
Perbaikan Core Web Vitals sebaiknya dilakukan secara bertahap dan terukur agar setiap perubahan memberikan manfaat bagi pengguna, bukan sekadar meningkatkan skor pengujian.
Ingin meningkatkan performa website sekaligus memperkuat strategi SEO bisnis Anda?
Percayakan kebutuhan digital marketing Anda kepada DIFITECH | Digital Marketing Agency Berpengalaman. Dapatkan pendampingan untuk mengevaluasi performa website, mengidentifikasi peluang optimasi SEO, dan mengembangkan strategi digital yang sesuai dengan kebutuhan bisnis Anda.
Konsultasikan kebutuhan website dan paket digital marketing Anda bersama DIFITECH sekarang!
