Performance Web Nyata: Bukan Cuma Skor Lighthouse

Skor Lighthouse itu penting, tapi bukan segalanya. Yang benar-benar dirasakan pengguna adalah seberapa cepat konten utama muncul, input terasa responsif, dan layout tidak loncat-loncat.

Apa itu Core Web Vitals?#

• LCP (Largest Contentful Paint): seberapa cepat elemen utama tampil.
• INP (Interaction to Next Paint): seberapa responsif saat interaksi.
• CLS (Cumulative Layout Shift): seberapa stabil layout saat loading.

Kenapa Fokus ke Web Vitals?#

• Berkorelasi langsung dengan kepuasan pengguna dan konversi.
• Google gunakan sebagai sinyal SEO.
• Lebih realistis dibandingkan skor sintetis semata.

Bagaimana Meningkatkan?#

• LCP: optimasi gambar (format modern, ukuran tepat, preload), server cepat (SSR/SSG, caching), kurangi render-blocking.
• INP: hindari kerja berat di main thread, gunakan web worker, debounce event.
• CLS: tetapkan width/height gambar, hindari injeksi konten di atas tanpa ruang.

Pengukuran Nyata (RUM)#

• Pakai web-vitals JS untuk kirim metrik ke analytics.
• Segmentasi per device/network; fokuskan perbaikan ke mayoritas user.

import { onLCP, onINP, onCLS } from "web-vitals";

onLCP(console.log);
onINP(console.log);
onCLS(console.log);

Pola di Next.js#

• Gunakan SSG/ISR untuk halaman statis.
• Lazy-load komponen berat; gunakan dynamic import.
• Optimalkan gambar via next/image + remotePatterns yang aman.

Penutup#

Kejar performa yang dirasakan pengguna, bukan sekadar skor. Ukur di lapangan, optimasi yang berdampak, dan ulangi. Dengan fokus ini, web kamu terasa cepat di perangkat nyata, bukan hanya di lab.