Core Web Vitals: Cara Mengukur dan Memperbaiki Kecepatan Website

Core Web Vitals membantu mengukur apakah website benar-benar terasa cepat dan responsif saat digunakan. Pengunjung menilai pengalaman dari seberapa cepat konten utama muncul, seberapa responsif tombol dan formulir, serta apakah tata letak bergeser ketika halaman dimuat. Core Web Vitals membantu pemilik situs menilai tiga aspek pengalaman tersebut dengan metrik yang terukur.

Apa Itu Core Web Vitals?

Core Web Vitals adalah sekumpulan metrik pengalaman pengguna yang digunakan Google untuk mengevaluasi pemuatan, interaktivitas, dan stabilitas visual. Tiga metrik utamanya adalah Largest Contentful Paint (LCP), Interaction to Next Paint (INP), dan Cumulative Layout Shift (CLS). Metrik ini bukan satu-satunya faktor SEO, tetapi dapat membantu menemukan hambatan nyata yang dirasakan pengunjung.

Memahami LCP, INP, dan CLS

• LCP: mengukur waktu hingga elemen konten utama terlihat. Gambar hero yang terlalu besar, server lambat, dan CSS yang menahan render bisa memperburuknya.
• INP: mengukur respons halaman terhadap interaksi pengguna. JavaScript yang berat atau pekerjaan panjang di main thread dapat membuat klik terasa lambat.
• CLS: mengukur pergeseran tata letak yang tidak diharapkan. Gambar tanpa dimensi, iklan yang menyisip tiba-tiba, atau font yang terlambat dapat menyebabkan masalah.

Sebagai panduan umum, nilai “baik” pada persentil ke-75 adalah LCP maksimal 2,5 detik, INP maksimal 200 milidetik, dan CLS maksimal 0,1. Evaluasi sebaiknya menggunakan data lapangan bila tersedia, bukan hanya satu kali pengujian di perangkat sendiri.

Alat untuk Mengukur Performa

Mulailah dengan Google PageSpeed Insights untuk melihat data lapangan dan hasil lab jika tersedia. Chrome DevTools dan Lighthouse membantu mengidentifikasi gambar besar, skrip yang menghambat render, serta pergeseran elemen. Gunakan Google Search Console untuk melihat ringkasan pengalaman halaman pada URL yang memiliki cukup data.

Lakukan pengukuran pada halaman yang berbeda—beranda, artikel, kategori, dan halaman dengan formulir—karena satu template tidak selalu mewakili seluruh situs. Bandingkan hasil sebelum dan sesudah perubahan agar optimasi dapat dievaluasi secara objektif.

Prioritas Perbaikan yang Praktis

1. Optimalkan gambar. Ubah ukuran sesuai area tampilan, gunakan format modern yang didukung, kompres file, dan hindari mengunduh gambar yang jauh lebih besar daripada kebutuhan.
2. Perbaiki cache dan pengiriman konten. Cache yang benar dan CDN dapat mengurangi waktu perjalanan permintaan, terutama bagi pengunjung yang jauh dari server asal. Baca panduan cara kerja CDN untuk mempercepat website.
3. Kurangi JavaScript yang tidak diperlukan. Tunda skrip pihak ketiga yang tidak penting, pecah tugas panjang, dan hapus plugin atau pustaka yang tidak digunakan.
4. Stabilkan layout. Tetapkan lebar dan tinggi gambar atau video, sisakan ruang untuk elemen dinamis, dan gunakan font dengan strategi pemuatan yang sesuai.
5. Periksa ukuran server dan file. Jika gambar disimpan pada object storage, pelajari penggunaan Cloudflare R2 untuk file website dan ukur performanya secara nyata.

Jangan Mengoptimalkan Berdasarkan Satu Angka

Skor Lighthouse adalah alat diagnosis, bukan tujuan tunggal. Perubahan yang meningkatkan satu metrik dapat memengaruhi fitur lain. Uji halaman di perangkat seluler, koneksi lambat, dan skenario pengguna yang sebenarnya. Pastikan pula optimasi tidak mengorbankan aksesibilitas, keamanan, atau fungsi inti situs.

Kesimpulan

Mulailah dari data Core Web Vitals, pilih hambatan terbesar, lakukan satu perubahan pada satu waktu, lalu ukur kembali. Performa website yang baik biasanya lahir dari beberapa perbaikan kecil yang konsisten—bukan dari memasang sebanyak mungkin plugin optimasi.

Referensi

Dokumentasi resmi: Web Vitals di web.dev dan praktik tautan yang dapat dirayapi Google. Untuk aspek keamanan sisi browser, lihat juga panduan Content Security Policy.