Cara Saya Optimize Performance Next.js

August 21, 2026 — NextJS, Performance, Optimization, Web Development — 2 min read

Cara Saya Optimize Performance Next.js App di 2026 (Tanpa Over-Engineering)

Halo teman-teman,

Sudah lama banget saya gak nulis. Setelah beberapa bulan fokus di project, hari ini saya mau share sesuatu yang sering saya kerjain: optimasi performance di Next.js.

Banyak developer langsung lompat ke teknik rumit padahal yang paling berdampak justru yang sederhana. Ini workflow optimasi yang saya pakai sekarang:

1. Mulai dari yang Paling Berdampak

Saya selalu cek dulu pakai Lighthouse dan Chrome DevTools. Biasanya masalah terbesar ada di:

Gambar yang terlalu besar
JavaScript bundle yang gemuk
Data fetching yang gak efisien
Third-party script yang berat

2. Teknik yang Paling Sering Saya Pakai

A. Image Optimization

import Image from "next/image";

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority
  sizes="(max-width: 768px) 100vw, 1200px"
/>;

B. Dynamic Import untuk komponen berat

const HeavyChart = dynamic(() => import("@/components/HeavyChart"), {
  loading: () => <ChartSkeleton />,
  ssr: false,
});

C. Streaming + Suspense Saya pakai React Suspense + streaming di Server Components biar user langsung lihat konten penting dulu.

D. Caching yang Benar

unstable_cache atau cache dari React untuk data yang jarang berubah
Revalidate yang masuk akal (bukan selalu 0)

3. Hal yang Saya Hindari

Jangan over-fetch data
Jangan taruh semua logic di Client Component
Jangan pakai library besar kalau yang dibutuhkan cuma 1 fitur
Jangan lupa loading.tsx dan error.tsx

4. Hasil yang Saya Rasakan

Setelah apply teknik di atas di beberapa project:

Lighthouse score naik signifikan
Time to Interactive jauh lebih cepat
User complaint soal loading berkurang

Kesimpulan

Performance optimization itu bukan soal teknik paling keren. Itu soal prioritas. Kerjakan yang impact-nya besar dulu, baru yang detail.

Kalau app kamu masih terasa lambat, coba mulai dari image dan bundle size dulu. Biasanya sudah cukup bikin perbedaan besar.

Pertanyaan buat kalian:
Apa bottleneck performance yang paling sering kalian temui di Next.js?
Sudah coba teknik apa yang paling efektif?

Cerita di komentar yuk!

— Ady Rahmansyah
Software Engineer | Tech Blogger | Coffee Addict