Optimasi Performa Next.js untuk Portfolio
Jurnal/Dev
Dev05 Feb 2026

Optimasi Performa Next.js untuk Portfolio

Tim Redaksi
Tim Editorial

Portfolio sering kalah Lighthouse karena gambar Unsplash tanpa ukuran, font variabel yang kelebihan sumbu, dan JavaScript klien untuk halaman yang seharusnya statis.

Urutan Perbaikan yang Paling Berdampak

Kunci LCP di hero image: width/height, format modern, dan prioritas fetch. Pindahkan animasi berat ke CSS. Jangan unduh seluruh ikon set jika hanya lima glif yang dipakai.

Skor 100 yang dibeli dengan menghapus konten bukan kemenangan. Yang diinginkan klien adalah halaman cepat dengan karya tetap terlihat tajam.
  • Gambar: ukuran eksplisit, lazy di bawah fold, eager hanya hero
  • Font: subset latin, display swap, hindari terlalu banyak weight
  • Server Components untuk listing proyek; klien hanya untuk filter
  • Hapus polyfill yang tidak dibutuhkan target browser modern
  • Cache static assets agresif; HTML portfolio boleh ISR
  • Ukur di jaringan 4G, bukan hanya di localhost kabel