Cara Optimasi Performance Website Next.js

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.