Panduan Lengkap Optimasi Performa Next.js dan Core Web Vitals

Mengapa Core Web Vitals Sangat Penting?

Performa web tidak hanya mempengaruhi pengalaman pengguna (User Experience), tetapi juga menjadi faktor penentu utama dalam perangkingan search engine (SEO) Google. Tiga indikator utama Core Web Vitals adalah:

1. LCP (Largest Contentful Paint): Mengukur waktu pemuatan konten visual terbesar (Target: < 2.5s).
2. INP (Interaction to Next Paint): Mengukur ketersediaan responsivitas antarmuka terhadap interaksi pengguna (Target: < 200ms).
3. CLS (Cumulative Layout Shift): Mengukur stabilitas visual pergerakan tata letak elemen (Target: < 0.1).

---

Strategi 1: Optimalisasi Gambar dengan next/image

Gambar sering kali menjadi penyebab utama LCP lambat. Selalu gunakan komponen bawaan next/image dengan prop priority pada gambar di atas lipatan layar (above-the-fold):

import Image from 'next/image';

export function HeroBanner() {
  return (
    <div className="relative h-96 w-full">
      <Image
        src="/hero-cover.jpg"
        alt="Hero Cover"
        fill
        priority
        fetchPriority="high"
        sizes="(max-width: 768px) 100vw, 50vw"
        className="object-cover"
      />
    </div>
  );
}

---

Strategi 2: Code Splitting dengan Dynamic Imports

Komponen yang berat seperti grafik visual (charting libraries) atau modal interaktif yang tidak langsung dibutuhkan saat halaman dimuat pertama kali harus di-load secara dinamis:

import dynamic from 'next/dynamic';

const HeavyAnalyticsChart = dynamic(() => import('@/components/HeavyAnalyticsChart'), {
  loading: () => <div className="h-64 animate-pulse bg-muted rounded-xl" />,
  ssr: false,
});

---

Strategi 3: Menggunakan React Server Components secara Efektif

Secara default di App Router, semua komponen adalah Server Components. Hindari menambahkan direktif "use client" di tingkat teratas halaman kecuali jika komponen tersebut memang membutuhkan event handler (onClick), useState, atau useEffect.

---

Kesimpulan

Dengan menerapkan penanganan gambar teroptimasi, eksekusi kode dinamis, dan mempertahankan mayoritas logika di Server Components, skor Lighthouse aplikasi Next.js Anda dapat dengan mudah mencapai nilai 95-100!