Masalah INP dijelaskan: penyebab interaksi lambat dan cara memperbaikinya
Interaction to Next Paint (INP) adalah Core Web Vital yang mengukur seberapa cepat halaman merespons klik, ketukan, dan penekanan tombol. INP di atas 200 ms terasa lambat; di atas 500 ms terasa rusak.
Hampir setiap INP yang buruk bermuara pada salah satu dari segelintir penyebab utama. Setiap panduan di bawah menjelaskan satu penyebab: cara mengenalinya, mengapa terjadi, dan cara memperbaikinya — dengan kode.
Penyebab utama
Event handler yang berjalan lama memblokir main thread dan menunda paint berikutnya. Cara menemukan handler berat dan memecahnya dengan scheduler.yield() atau Web Worker.
Layout thrashing: reflow berulang dalam satu frame dan cara menghentikannyaBergantian membaca dan menulis DOM memaksa browser menghitung ulang layout berulang kali dalam satu frame. Cara mengelompokkan baca dan tulis untuk memperbaiki INP.
Layout sinkron paksa: membaca geometri setelah menulis ke DOMMembaca offsetWidth atau getBoundingClientRect tepat setelah mengubah DOM memaksa browser menghitung ulang layout di dalam tugas JS Anda. Cara mendeteksi dan memperbaikinya.
Main thread terblokir: input delay tinggi sebelum handler Anda berjalanSaat main thread sibuk dengan tugas panjang lain, klik menunggu dalam antrean sebelum handler Anda mulai. Cara menemukan dan memecah tugas yang memblokir untuk memperbaiki input delay INP.
Skrip pihak ketiga yang memblokir interaksi: mendiagnosis dan membendungnyaAnalitik, iklan, dan widget chat menjalankan tugas panjang di main thread Anda dan merusak INP. Cara mengatribusikan tugas panjang ke pihak ketiga dan membendungnya dengan async, defer, atau worker.
Kaskade re-render React: ketika satu klik me-render ulang seluruh pohonPembaruan state di bagian atas pohon React me-render ulang ratusan komponen pada setiap klik. Cara menemukan kaskade render dan memperbaikinya dengan memo, useCallback, dan useTransition.