Core Web Vitals: Cara Membaca LCP, INP, dan CLS tanpa Bingung
Pernah membuka website yang gambarnya muncul belakangan, lalu tombolnya bergeser tepat ketika mau diklik? Kita mungkin hanya merasa “situsnya berat”, tetapi pengalaman seperti itu bisa diukur. Salah satu kumpulan metrik yang digunakan untuk melihatnya adalah Core Web Vitals.
Angka ini berguna untuk menentukan prioritas perbaikan. Namun jangan terjebak menjadikan skor sebagai permainan. Target akhirnya tetap pengalaman pengunjung nyata.
LCP: konten utama muncul seberapa cepat?
Largest Contentful Paint (LCP) mengukur waktu sampai elemen konten terbesar yang relevan terlihat pada viewport. Sering kali ini adalah gambar utama atau judul besar. Nilai yang dianggap baik umumnya 2,5 detik atau kurang pada persentil ke-75 pengalaman pengguna.
Jika LCP lambat, periksa gambar hero, stylesheet yang menahan render, waktu respons server, dan font. Gambar yang tampil paling atas justru sering tidak tepat jika di-lazy-load karena browser menjadi terlambat memintanya.
INP: seberapa cepat situs menanggapi interaksi?
Interaction to Next Paint (INP) mengukur respons halaman terhadap interaksi pengguna. Metrik ini melihat jeda sampai pembaruan visual berikutnya. Target yang umum digunakan adalah 200 milidetik atau kurang.
Script berat, event handler panjang, dan pekerjaan JavaScript yang menahan main thread dapat memperburuk INP. Pada blog statis, peluang menghindari masalah ini besar karena sebagian besar elemen memang tidak membutuhkan JavaScript di browser.
Tetapi tetap perlu hati-hati: widget komentar, analytics, iklan, dan script pihak ketiga dapat menambah beban interaksi.
CLS: kenapa layout tiba-tiba melompat?
Cumulative Layout Shift (CLS) mencatat perpindahan elemen yang tidak diharapkan saat halaman digunakan. Target yang baik adalah 0,1 atau kurang.
Salah satu penyebab yang paling sering adalah gambar tanpa rasio ukuran. Browser belum tahu seberapa besar ruang yang harus disediakan sehingga teks di bawahnya terdorong ketika gambar selesai dimuat.
Gunakan dimensi atau aspect-ratio untuk gambar. Kalau menyediakan slot iklan, pikirkan juga ruang yang akan dipakai ketika iklan aktif. Jangan membuat pembaca kehilangan posisi karena elemen baru muncul di tengah artikel.
Cara memeriksanya
Buka PageSpeed Insights dan masukkan URL halaman yang ingin diuji. Perhatikan apakah ada data lapangan dari pengguna nyata. Jika traffic masih sedikit, data lapangan mungkin belum tersedia; itu bukan berarti situs bebas masalah.
Selain PageSpeed Insights, Chrome DevTools dapat membantu menemukan elemen LCP atau aktivitas script yang lambat. Uji homepage, halaman arsip, dan halaman detail artikel karena masing-masing memiliki pola konten berbeda.
Tentukan prioritas dengan akal sehat
Misalnya homepage memiliki gambar hero besar dan nilainya lambat. Periksa gambar itu terlebih dahulu sebelum menghabiskan waktu menghapus class CSS kecil. Jika CLS tinggi hanya setelah iklan aktif, perbaiki ukuran slot iklan daripada mengutak-atik font seluruh situs.
Perbaikan performa paling berhasil biasanya bukan trik rahasia. Ia berasal dari keputusan dasar: aset efisien, HTML yang jelas, sedikit JavaScript, dan pengukuran yang dilakukan berulang.
