Cara Memperbaiki Interaction to Next Paint (INP)

Apa Itu INP?

Interaction to Next Paint (INP) adalah metrik Core Web Vitals yang mengukur waktu respons halaman terhadap semua interaksi pengguna. Standar baik menurut Google adalah ≤ 200 ms untuk memastikan pengalaman yang mulus.

INP menggantikan FID (First Input Delay) sejak 2023 karena lebih akurat. Jika FID hanya mengukur interaksi pertama, INP menilai keseluruhan interaksi (klik, ketikan, navigasi) selama pengguna berada di halaman.

Dengan kata lain, INP memberi gambaran apakah halaman terasa cepat dan responsif sepanjang sesi pengguna.

Penyebab INP Buruk

• JavaScript berat yang memblokir main thread
• Event handler tidak efisien atau terlalu panjang
• Render-blocking CSS/JS
• Banyak script pihak ketiga yang memperlambat respons
• Beban framework SPA (React, Vue, Angular) yang tidak dioptimalkan

Cara Memperbaiki INP

1. Optimasi JavaScript

• Kurangi ukuran file dengan minify & tree-shaking
• Terapkan code splitting agar hanya script penting dimuat awal
• Jalankan script non-esensial dengan async atau defer

2. Kurangi Beban Main Thread

• Pecah tugas besar menjadi tugas kecil (chunking)
• Gunakan Web Workers untuk proses berat (misalnya parsing data besar)
• Prioritaskan interaksi UI utama daripada background task

3. Percepat Rendering

• Preload resource penting (CSS, font, gambar utama)
• Gunakan caching agar halaman lebih responsif setelah kunjungan pertama
• Kurangi jumlah request eksternal yang tidak esensial

4. Optimasi Event Handler

• Pastikan handler klik/scroll ringan dan efisien
• Hindari penggunaan listener berlebihan pada banyak elemen
• Gunakan passive event listeners ({ passive: true }) untuk scroll/touch

5. Perbaikan di Framework (SPA/JS-heavy Website)

• Gunakan SSR (Server-Side Rendering) atau SSG (Static Site Generation)
• Implementasi hydration yang efisien
• Gunakan library modern yang sudah mendukung performa tinggi

Tools untuk Mengukur INP

• Google PageSpeed Insights → laporan INP dengan rekomendasi
• Search Console (Core Web Vitals report) → data real-world
• Chrome DevTools → analisis event handler berat
• Web Vitals Extension → cek INP saat browsing

Checklist Perbaikan INP

• Pastikan INP ≤ 200 ms untuk semua interaksi
• Kurangi JavaScript berat dengan code splitting
• Gunakan async/defer untuk script non-esensial
• Optimalkan event handler agar tidak blocking
• Monitor INP secara rutin dengan PageSpeed Insights & GSC

FAQ tentang INP

1. Apa bedanya INP dengan FID? FID hanya mengukur interaksi pertama, sementara INP menilai semua interaksi selama sesi pengguna.

2. Standar nilai INP yang baik berapa? Google menetapkan ≤ 200 ms sebagai kategori baik.

3. Apakah optimasi FID masih bermanfaat? Ya. Perbaikan FID (optimasi JS & respons interaksi awal) juga otomatis meningkatkan INP.