Di salah satu proyek yang saya kerjakan, halaman dashboard membutuhkan 5 detik untuk interaktif. Setelah serangkaian optimasi, angka itu turun ke 2 detik. Artikel ini merangkum teknik yang benar-benar memberi dampak — bukan sekadar teori.
1. Ukur Dulu, Optimasi Kemudian
Sebelum mengubah satu baris kode pun, jalankan Lighthouse dan lihat tab Network. Di kasus saya, penyebab terbesar adalah bundle JavaScript yang terlalu gemuk dan gambar yang tidak dioptimasi — bukan API yang lambat seperti dugaan awal.
2. Code Splitting yang Disengaja
Next.js sudah melakukan code splitting per halaman, tapi komponen berat di dalam halaman tetap perlu dipecah manual. Chart library, rich text editor, dan modal yang jarang dibuka adalah kandidat utama untuk dynamic import.
- Dynamic import untuk komponen di bawah fold atau di balik interaksi
- Pindahkan library berat ke Server Components bila memungkinkan
- Audit bundle dengan @next/bundle-analyzer secara berkala
3. Gambar: Pelaku Utama yang Sering Diabaikan
next/image dengan ukuran responsif dan format modern (WebP/AVIF) memangkas payload gambar hingga 70%. Tambahkan prop priority hanya untuk gambar above-the-fold, dan biarkan sisanya lazy load.
4. Prefetching Data
Link Next.js melakukan prefetch otomatis saat viewport, tapi data juga bisa di-prefetch. Kombinasi Server Components dan caching membuat navigasi antar halaman terasa instan.
Kesimpulannya sederhana: performa adalah fitur, dan 60% peningkatan datang dari disiplin menerapkan hal-hal fundamental — bukan trik eksotis.