Core Web Vitals: LCP, INP, CLS dan Cara Optimasinya

Apa itu Core Web Vitals?

Core Web Vitals adalah metrik pengalaman halaman yang digunakan untuk menilai apakah website terasa cepat, responsif, dan stabil. Tiga metrik utamanya adalah LCP untuk kecepatan konten utama muncul, INP untuk respons interaksi, dan CLS untuk stabilitas layout. Untuk website bisnis, metrik ini bukan hanya urusan teknis. Halaman lambat menurunkan kepercayaan, meningkatkan bounce, dan membuat biaya iklan terasa lebih mahal karena pengunjung pergi sebelum membaca penawaran.

Target praktisnya: LCP di bawah 2,5 detik, INP di bawah 200 ms, dan CLS di bawah 0,1. Nilai ini sebaiknya diukur dari data lapangan melalui Chrome User Experience Report, PageSpeed Insights, dan Search Console, bukan hanya test lab.

LCP: membuat konten utama muncul cepat

LCP biasanya dipengaruhi hero image, heading besar, banner, font, dan response server. Jika halaman homepage memakai gambar 3 MB, slider, dan script iklan berat, LCP akan buruk meski desain terlihat modern.

• Gunakan format gambar modern seperti WebP atau AVIF.
• Tentukan ukuran gambar sesuai container, jangan upload foto 4000 px untuk slot 700 px.
• Preload gambar hero yang benar-benar menjadi elemen LCP.
• Kurangi JavaScript yang memblokir render awal.
• Gunakan CDN dan caching untuk aset statis.

Di Next.js, komponen <Image /> membantu optimasi ukuran dan lazy loading. Namun untuk gambar above the fold, gunakan prioritas secara selektif. Jangan memberi prioritas ke semua gambar karena justru berebut bandwidth.

INP: respons website saat diklik

INP menggantikan FID sebagai metrik interaksi yang lebih realistis. Website dengan INP buruk biasanya punya JavaScript terlalu besar, event handler berat, hydration lambat, atau komponen pihak ketiga yang memonopoli main thread. Gejalanya: tombol terasa telat, menu mobile macet, form lambat merespons, atau filter produk tersendat.

1. Pecah bundle JavaScript dengan dynamic import.
2. Hindari komponen interaktif besar di halaman yang sebenarnya statis.
3. Debounce input pencarian dan filter.
4. Pindahkan pekerjaan berat ke server atau web worker.
5. Audit script pihak ketiga seperti chat widget, heatmap, dan pixel iklan.

Website cepat bukan berarti tanpa animasi, tetapi setiap interaksi harus terasa segera.

CLS: mencegah layout loncat

CLS sering terjadi karena gambar tanpa dimensi, iklan yang muncul belakangan, font swap yang ekstrem, banner cookie, atau embed yang tidak punya ruang tetap. Pengguna akan frustrasi ketika hendak menekan tombol checkout tetapi layout bergeser dan klik mengenai elemen lain.

Solusinya sederhana tetapi harus disiplin: set width dan height untuk media, reservasi slot iklan, gunakan skeleton dengan ukuran tetap, dan pastikan font memiliki fallback yang mirip. Untuk komponen dinamis, hindari menyisipkan elemen besar di atas konten setelah halaman dimuat.

Workflow audit yang disarankan

Mulai dari PageSpeed Insights untuk gambaran cepat, lanjutkan dengan Chrome DevTools Performance, Lighthouse, WebPageTest, dan Search Console. Pisahkan masalah lab dan field. Jika lab bagus tetapi field buruk, kemungkinan pengguna nyata memakai jaringan lambat, perangkat low-end, atau halaman tertentu lebih berat daripada halaman yang diuji.

Checklist prioritas

• Optimasi server response dan database query.
• Kompres gambar utama.
• Kurangi CSS dan JS tidak terpakai.
• Batasi tag manager hanya untuk script penting.
• Monitoring setelah deploy, bukan sekali audit.

Kesimpulan

Core Web Vitals adalah bahasa bersama antara developer, SEO, dan bisnis. LCP memastikan pengunjung cepat melihat isi utama, INP memastikan website nyaman dipakai, dan CLS memastikan pengalaman stabil. Optimasi terbaik dilakukan bertahap: ukur, temukan bottleneck, perbaiki dampak terbesar, lalu pantau data nyata pengguna.