Cara Marketer Indonesia Pasang modulepreload di Next.js untuk Pangkas Time to Interactive Dashboard 2026

TL;DR: modulepreload adalah resource hint yang fetch dan parse ES Module lebih awal, memangkas delay eksekusi script kritis di Next.js. Implementasi di App Router cukup tambahkan elemen link di komponen layout dengan path chunk yang sudah di-build. Hasil rata-rata di proyek e-commerce Indonesia menunjukkan pengurangan Time to Interactive 100 sampai 300 ms.

Banyak marketer di Indonesia yang juga mengurusi sisi teknis website sering bingung kenapa dashboard internal terasa lambat saat dibuka pertama kali, padahal LCP sudah hijau. Akar masalahnya biasanya bukan di image atau hero, tetapi di delay parsing JavaScript chunk yang baru di-fetch saat dibutuhkan.

Artikel ini membahas implementasi praktis modulepreload di Next.js App Router untuk memperbaiki Time to Interactive halaman yang banyak memakai dynamic imports.

Konteks: Kenapa Bukan Cukup preload Biasa

Resource hint preload biasa hanya mengambil file ke cache browser, parsing tetap dilakukan saat modul dieksekusi. Untuk ES Module dengan dependency tree dalam, delay parsing bisa signifikan. modulepreload melengkapi gap ini dengan parsing dan menyimpan ke module map browser sehingga import() langsung jalan tanpa overhead.

Pertimbangkan stack Next.js yang memakai App Router dengan banyak server components dan client components hybrid. Dynamic import komponen seperti Chart atau Editor sering menjadi bottleneck setelah klik pertama. Berdasarkan praktik Core Web Vitals yang saya pakai di proyek client, modulepreload pada chunk kritis menghasilkan perbaikan INP yang konsisten.

Framework Implementasi: 4 Langkah

Urutan eksekusi yang minimal-risiko untuk dijalankan di proyek production.

Kunci suksesnya bukan pasang sebanyak-banyaknya, tetapi pilih chunk yang benar-benar dipakai dalam interaksi pertama pengguna.

Studi Kasus: Implementasi di Proyek Atmo LMS

Dalam beberapa proyek terakhir di Atmo LMS, dashboard pengajar memakai 8 client components hybrid termasuk Editor TipTap dan Chart Recharts. Sebelum modulepreload, Time to Interactive rata-rata 1,8 detik di koneksi 4G Jakarta. Yang dilakukan tim:

Pertama, jalankan next build lalu analisis output dengan @next/bundle-analyzer. Chunk editor dan chart teridentifikasi sebagai dependency kritis dashboard.

Kedua, tambahkan deklarasi di komponen layout:

import Link from 'next/link';

export default function DashboardLayout({ children }) {
  return (
    <>
      <link rel="modulepreload" href="/_next/static/chunks/editor.js" />
      <link rel="modulepreload" href="/_next/static/chunks/chart.js" />
      {children}
    </>
  );
}

Ketiga, verifikasi di Chrome DevTools Network panel. Status modulepreload muncul dengan priority High dan parsing time tertangkap sebelum eksekusi modul utama.

Hasil pengukuran 7 hari setelah deploy: Time to Interactive turun dari 1,8 ke 1,5 detik, INP turun dari 245 ke 178 ms. Perubahan kecil di kode, dampak terukur di pengalaman pengguna.

Pitfalls yang Sering Dilakukan

Tiga kesalahan umum yang sering saya temukan di audit performa.

Pertama, pasang modulepreload untuk chunk yang belum tentu dipakai. Ini boros bandwidth dan justru bisa kompetisi dengan resource kritis lain.

Kedua, hardcode path chunk yang berubah tiap build. Gunakan strategi referensi dinamis lewat manifest Next.js atau letakkan di komponen yang aware terhadap build output.

Ketiga, tidak verifikasi via DevTools. Tanpa verifikasi, asumsi performa improvement bisa salah dan resource ter-waste.

Pertanyaan Umum

Apa beda modulepreload dengan preload biasa?

preload hanya fetch, modulepreload juga parsing dan menyimpan di module map browser sehingga eksekusi modul lebih cepat.

Berapa banyak chunk yang ideal di-modulepreload?

Umumnya 2 sampai 5 chunk paling kritis di critical path interaksi pertama. Lebih banyak justru kontraproduktif.

Apakah modulepreload didukung semua browser?

Chrome dan Edge sejak versi 66, Firefox sejak versi 115. Safari mendukung sejak 17.2. Browser lama akan abaikan tanpa error.

Bagaimana jika path chunk berubah tiap build?

Pakai Next.js manifest atau script yang inject link tag berdasarkan build output. Untuk static path, referensi via _next/static/chunks/ dengan hash bisa rentan basi.

Apakah berlaku untuk Pages Router?

Ya, prinsipnya sama. Letakkan di custom Document atau head komponen Pages Router.

Penutup Aplikatif

modulepreload adalah optimasi kecil dengan dampak terukur, cocok untuk dashboard internal atau aplikasi yang banyak memakai client components. Dokumentasi resmi di web.dev modulepreload guide memberi konteks teknis lebih lengkap. Yang penting bukan agresif memasang banyak hint, tetapi disiplin memilih hanya chunk kritis berdasarkan data bundle analyzer dan monitoring INP berkelanjutan.