Interaction to Next Paint (INP)

INP adalah metrik Core Web Vitals yang mengukur responsivitas halaman terhadap interaksi pengguna. Berbeda dari FID (First Input Delay) yang hanya mengukur delay pertama, INP mengukur seluruh lifecycle setiap interaksi selama halaman dibuka.

Threshold INP

INP menggantikan FID sebagai metrik Core Web Vitals sejak Maret 2024.

Anatomy Sebuah Interaksi

Setiap interaksi (klik, tap, keyboard) terdiri dari 3 fase:

[Input Event] → [Input Delay] → [Processing Time] → [Presentation Delay] → [Next Paint]

• Input Delay — Waktu antara interaksi pengguna dan event handler mulai berjalan (terjadi jika main thread sibuk)
• Processing Time — Waktu event handler berjalan (kode JavaScript kamu)
• Presentation Delay — Waktu browser me-render dan menampilkan perubahan visual

Penyebab INP Buruk

// BURUK: Long task memblokir main thread
button.addEventListener("click", () => {
  // Task berat — memblokir thread 300ms+
  const result = heavyComputation(largeDataset);
  updateUI(result);
});

// BAIK: Pecah task dengan scheduler
button.addEventListener("click", async () => {
  // Yield ke browser dulu, baru lanjut
  updateUIOptimistically();
  await scheduler.yield(); // atau setTimeout(0)
  const result = await heavyComputation(largeDataset);
  updateUI(result);
});

Long Tasks — Musuh Utama INP

Long task adalah tugas JavaScript yang berjalan lebih dari 50ms di main thread. Selama long task berjalan, browser tidak bisa memproses input pengguna.

// Deteksi long tasks dengan PerformanceObserver
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) {
      console.warn("Long task terdeteksi:", entry.duration.toFixed(2) + "ms");
    }
  }
});
observer.observe({ entryTypes: ["longtask"] });

Cara Improve INP

1. Pecah long tasks — Gunakan scheduler.yield() atau setTimeout(0) untuk yield ke browser
2. Debounce heavy handlers — Jangan jalankan kode berat di setiap keystroke
3. Gunakan Web Workers — Pindah komputasi berat ke thread terpisah
4. Optimasi rendering — Hindari layout thrashing, batch DOM updates
5. Lazy load heavy modules — Jangan load semua JS di awal