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

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 .