Mengapa Web Vitals INP (Interaction to Next Paint) Menjadi Metrik Terpenting

Dari First Input Delay (FID) ke Interaction to Next Paint (INP)

Selama bertahun-tahun, developer merasa aman jika skor First Input Delay (FID) mereka berwarna hijau. Namun FID hanya mengukur seberapa cepat browser menanggapi klik pertama kali halaman dibuka. Setelah halaman termuat, interaksi berikutnya yang lag dan membeku tidak terdeteksi oleh FID.

INP (Interaction to Next Paint) hadir mengukur seluruh interaksi klik, tap, dan pengetikan selama pengguna berada di situs, mencatat latensi visual terpanjang.

// Mengurai long tasks dengan scheduler.yield()
async function handleComplexDataProcessing(items: DataItem[]) {
  for (let i = 0; i < items.length; i++) {
    processSingleItem(items[i]);
    
    // Berikan ruang pada browser untuk me-render frame jika tugas memakan waktu > 16ms
    if (i % 50 === 0 && 'scheduler' in window) {
      await (window as any).scheduler.yield();
    }
  }
}

Tiga Fase Interaksi INP

1. Input Delay: Waktu tunggu sebelum event listener mulai berjalan (biasanya tertahan oleh eksekusi JavaScript lain di main thread).
2. Processing Time: Waktu yang dihabiskan untuk mengeksekusi kode callback event Anda.
3. Presentation Delay: Waktu yang dibutuhkan browser untuk menghitung layout baru, painting pixel, dan menampilkan frame berikutnya di layar.

Dengan memecah pemrosesan berat dan memprioritaskan visual feedback instan, nilai INP situs Anda akan tetap berada di bawah ambang batas aman 200 milidetik.