Core Web Vitals dan Performance Engineering

Performance adalah kualitas pengalaman pengguna sekaligus kualitas delivery. Fokus pada data lapangan, lalu gunakan lab untuk diagnosis.

Tiga metrik inti

• LCP: elemen konten terbesar terlihat. Target baik ≤ 2,5 detik.
• INP: latensi interaksi sepanjang kunjungan. Target baik ≤ 200 ms.
• CLS: pergeseran layout tak terduga. Target baik ≤ 0,1.

Nilai dinilai pada persentil ke-75 dan dipisahkan antara mobile dan desktop.

Jalur diagnosis

Memperbaiki LCP

Kurangi TTFB melalui cache dan query efisien. Pastikan hero image ditemukan dari HTML awal, gunakan format modern dan ukuran responsif, serta jangan lazy-load elemen LCP.

Memperbaiki INP

Kurangi JavaScript, pecah long task, hindari hydration seluruh halaman bila tidak perlu, dan jangan memperbarui React state pada setiap frame scroll.

Memperbaiki CLS

Tetapkan dimensi atau aspect-ratio pada media. Reservasi ruang untuk embed dan iklan. Gunakan fallback font dengan metrik serupa. Jangan menyisipkan banner di atas konten tanpa ruang.

Performance budget

Tetapkan budget per template untuk JavaScript, CSS, gambar, font, request pihak ketiga, dan target metrik. Jadikan budget sebagai gate CI atau alert.

Animasi yang aman

Animasikan hanya transform dan opacity. Hormati prefers-reduced-motion. Animasi harus menjelaskan hierarki, feedback, atau perubahan state; hindari efek dekoratif yang menunda konten atau input.