Website yang lambat kehilangan user. Berikut cara optimasi performance Next.js app kamu.
Core Web Vitals
Google mengukur 3 metrik utama:
- LCP (Largest Contentful Paint) — < 2.5 detik
- FID/INP (Interaction to Next Paint) — < 200ms
- CLS (Cumulative Layout Shift) — < 0.1
Optimasi Image
Gunakan next/image:
import Image from "next/image";
<Image src="/hero.jpg" width={800} height={400} alt="Hero" priority />
Lazy Loading
import dynamic from "next/dynamic";
const HeavyComponent = dynamic(() => import("./HeavyComponent"), {
loading: () => <Skeleton />,
});
Bundle Size
- Gunakan tree-shaking: import hanya yang dibutuhkan
- Analisis bundle:
npx @next/bundle-analyzer - Avoid large dependencies kalau ada alternatif ringan
Caching
- Static pages di-cache otomatis oleh Next.js
- API routes: set Cache-Control header
- Database queries: gunakan unstable_cache atau React cache
Monitor performance secara berkala menggunakan Lighthouse dan Web Vitals.