Optimasi INP Website: Panduan Lengkap Mengurangi Input Delay, Processing Duration, dan Presentation Delay

Memahami INP dan Komponennya

INP (Interaction to Next Paint) adalah metrik yang mengukur responsivitas website terhadap interaksi pengguna seperti klik, ketukan, atau sentuhan. Website yang baik harus memiliki INP di bawah 200 milidetik .

Setiap interaksi dapat dipecah menjadi tiga fase berurutan:

• Input delay: "dimulai saat pengguna memulai interaksi dengan halaman, dan berakhir saat callback event untuk interaksi tersebut mulai dijalankan."
• Processing duration: "terdiri dari waktu yang dibutuhkan untuk menjalankan callback event hingga selesai."
• Presentation delay: waktu yang dibutuhkan browser untuk menampilkan frame berikutnya yang berisi hasil visual dari interaksi, setelah kode event handler selesai dijalankan .

Rekomendasi Optimasi

1. Optimasi Input Delay

Input delay tinggi biasanya disebabkan oleh pekerjaan thread utama lain yang berjalan sebelum callback interaksi dapat dimulai. Interaksi itu sendiri "mungkin bukan penyebab langsung INP yang lambat."

Tips:

• Kurangi pekerjaan thread utama yang berlebihan saat pengguna mencoba berinteraksi .
• Evaluasi apakah ada skrip atau proses yang memblokir thread utama .
• Pastikan input delay dijaga serendah mungkin agar INP mencapai ambang 'baik' .

2. Optimasi Processing Duration

Processing duration tinggi menandakan bahwa "event handler interaksi adalah penyebab langsung INP yang lambat."

Tips:

• Audit semua listener: "Kode apa pun yang berjalan di event listener mana pun akan menunda interaksi."
• Perhatikan listener dari kode first-party, framework, library, dan pihak ketiga .
• Kurangi atau tunda pekerjaan yang dilakukan oleh event handler .
• Pertimbangkan untuk memecah tugas panjang (long tasks) menjadi lebih kecil .

3. Optimasi Presentation Delay

Presentation delay tinggi berkaitan dengan kerja rendering browser setelah callback selesai. Fokus pada pengurangan waktu fase paling lambat, dan coba berbagai interaksi pengguna saat merekam untuk memahami kontributor terbesar INP pada halaman .

Panduan Umum

• Jaga setiap bagian interaksi "sesingkat mungkin" agar website memiliki peluang terbaik memenuhi ambang 'baik' INP, terlepas dari perangkat pengguna .
• Code-splitting, progressive loading, dan pemecahan long tasks dapat meningkatkan waktu respons secara signifikan .
• Untuk pengukuran di lapangan, Anda perlu mengukur waktu event menggunakan Performance Observer .