LCP, INP, CLS: Bedah Tiga Metrik Core Web Vitals dengan Rumus

TL;DR: Core Web Vitals terdiri dari LCP (loading), INP (interactivity), dan CLS (visual stability). Ambang baik: LCP di bawah 2,5 detik, INP di bawah 200 ms, CLS di bawah 0,1. Ketiga metrik ini mengukur persentil ke-75 pengguna nyata, bukan rata-rata, sehingga 25% pengalaman terburuk pun harus dijaga.

Ketika membangun ulang website Vetmo (pet care) tahun lalu, masalah terbesar bukan desain atau konten, tapi skor Web Vitals. Halaman booking yang awalnya punya LCP 4,8 detik dan CLS 0,35 menghasilkan bounce rate yang tinggi pada perangkat mid-range di Jakarta.

Setelah tiga minggu optimasi fokus ke tiga metrik ini, LCP turun ke 1,9 detik dan CLS ke 0,05. Konversi form booking naik dari 2,1% ke 3,4%. Ini bukan kebetulan, Google memang menjadikan Core Web Vitals sebagai ranking factor sejak 2021, dan pengalaman pengguna yang lebih baik langsung berdampak ke konversi.

Kenapa Persentil ke-75?

Google tidak pakai rata-rata untuk skor Web Vitals. Metrik diukur pada persentil ke-75 dari semua kunjungan real-user. Artinya, 75% pengguna Anda harus mengalami pengalaman baik agar halaman lulus.

$$p_{75} = \text{nilai di mana 75% sample berada di bawahnya}$$

Kenapa ini penting? Rata-rata bisa tertipu oleh outlier. Jika 90% pengguna punya LCP 1 detik tapi 10% punya 10 detik, rata-rata masih terlihat wajar, padahal 10% pengalaman sangat buruk. Persentil 75 memaksa fokus ke distribusi ekor.

LCP (Largest Contentful Paint)

LCP mengukur kapan elemen terbesar yang terlihat di viewport selesai dirender. Biasanya hero image, heading H1, atau blok teks utama.

Kontributor utama LCP:

$$LCP \approx TTFB + \text{Resource Load Delay} + \text{Resource Load Duration} + \text{Element Render Delay}$$

Optimasi paling berdampak: tingkatkan TTFB via CDN, preload font dan hero image, lazy-load konten di bawah fold, dan serve image responsif (WebP/AVIF).

INP (Interaction to Next Paint)

INP menggantikan FID sejak Maret 2024. Metrik ini mengukur latensi terburuk dari semua interaksi pengguna (klik, tap, keypress) selama satu session, bukan hanya interaksi pertama.

INP = waktu dari input pengguna sampai browser paint frame berikutnya. Komponen utama: Input Delay, Processing Time, Presentation Delay.

Penyebab umum INP buruk: JavaScript long task yang memblokir main thread, event handler yang terlalu kompleks, re-render React berlebih. Solusi: code splitting, requestIdleCallback, debounce/throttle handler, dan audit via Google Search Console.

CLS (Cumulative Layout Shift)

CLS mengukur jumlah pergeseran layout tak terduga. Metrik ini tidak punya satuan waktu, tapi skor.

$$CLS = \sum (\text{impact fraction} \times \text{distance fraction})$$

CLS dihitung per session window. Penyebab umum: gambar tanpa atribut width/height, iframe iklan yang disisipkan tanpa reserved space, font swap yang menggeser teks, konten injected via JavaScript.

Untuk Next.js, pakai komponen <Image> bawaan yang otomatis reserve space, dan next/font untuk self-host font tanpa FOIT/FOUT berlebih.

Checklist Optimasi Praktis

Dalam beberapa proyek terakhir, saya pakai urutan ini karena dampak terbesar per jam kerja:

1. Audit lewat PageSpeed Insights pakai data real-user (CrUX), bukan lab data saja.
2. Fix LCP dulu, biasanya penyebab paling sering: hero image tidak optimal.
3. Benahi CLS, biasanya quick win dengan set width/height image.
4. Attack INP terakhir, karena butuh refactor JavaScript lebih dalam.
5. Monitor minimal 4 minggu setelah deploy, Google butuh 28 hari data untuk update skor.

Referensi teknis mendalam ada di dokumentasi web.dev tentang Core Web Vitals dan panduan optimasi resmi Google.

Pertanyaan Umum

Apakah skor di PageSpeed Insights sama dengan yang dipakai Google Ranking?

Tidak persis sama. PageSpeed menampilkan lab data (simulasi) dan field data (CrUX). Google ranking pakai field data persentil ke-75 dari pengguna nyata selama 28 hari terakhir.

Apakah harus lulus ketiga metrik sekaligus?

Iya. Satu metrik fail = halaman dianggap tidak lulus Core Web Vitals secara keseluruhan, walaupun dua metrik lain sangat baik.

Apakah Web Vitals berdampak ke semua query?

Tidak seragam. Web Vitals lebih kuat sebagai tiebreaker untuk halaman yang kualitas kontennya mirip. Konten yang jauh lebih relevan tetap bisa ranking di atas halaman yang lebih cepat tapi dangkal.

Berapa budget waktu realistis untuk optimasi?

Untuk website bisnis ukuran menengah, 2-4 minggu kerja fokus biasanya cukup bawa ke zona hijau. Untuk e-commerce kompleks, 6-10 minggu lebih realistis.

Penutup

Core Web Vitals bukan checklist sekali jalan, tapi komitmen operasional. Setiap deploy baru berpotensi bikin skor turun kalau tim tidak punya budget performance dan monitoring otomatis. Mulai dari audit jujur kondisi sekarang, pilih satu metrik paling lemah untuk diperbaiki dulu, dan biasakan review bulanan. Yang konsisten selalu menang atas yang sekali-sekali sprint.