Memperbaiki INP: Cara Mengelakkan Aplikasi React Daripada Terasa Lembap

Papan pemuka anda terasa lambat. API anda pantas. Lighthouse menunjukkan skor hijau. Namun, setiap klik mengalami lengah.

Itu adalah masalah INP.

Interaction to Next Paint (INP) mengukur berapa lama masa yang diambil oleh sesebuah halaman untuk bertindak balas terhadap pengguna. Ia menggantikan First Input Delay (FID) pada Mac 2024. FID hanya melihat klik pertama; INP memantau setiap interaksi.

Skor INP di bawah 200 ms terasa pantas. Melebihi 500 ms terasa lembap.

Untuk memperbaiki INP, bahagikannya kepada tiga fasa:

  • Input Delay – jurang antara klik dan bila kod anda bermula. Ia berlaku apabila main thread sedang sibuk.
  • Processing Time – berapa lama fungsi dan kemas kini state React anda berjalan.
  • Presentation Delay – jurang antara selesai menjalankan kod anda dan pelayar melukis (paint) skrin.

Memperbaiki Input Delay

Tugasan yang panjang menyekat main thread. Jika sesuatu tugasan berjalan lebih lama daripada 50 ms, ia akan melambatkan klik. Panggil scheduler.yield() untuk membahagikan tugasan panjang kepada bahagian yang lebih kecil supaya pelayar boleh memproses klik di antaranya.

Memperbaiki Processing Time

Gunakan API transition React untuk memastikan UI kekal responsif.

  • startTransition – bungkus (wrap) kemas kini yang tidak mendesak. React boleh menjeda kemas kini yang berat untuk mengendalikan klik baharu.
  • useDeferredValue – tangguhkan nilai yang tidak perlu dikemas kini secara serta-merta.

API ini tidak mempercepatkan kod; ia menjadikannya boleh diinterupsi (interruptible), yang seterusnya merendahkan INP anda.

Memperbaiki Presentation Delay

Terlalu banyak elemen DOM melambatkan proses paint.

  • Gunakan content-visibility: auto dalam CSS untuk melangkau proses render elemen yang berada di luar skrin.
  • Hentikan layout thrashing: jangan sesekali membaca gaya (style) dan kemudian menulis gaya dalam gelung (loop) yang sama. Sebaliknya, lakukan pembacaan dan penulisan secara berkelompok (batch).
  • Gunakan virtualisasi untuk senarai yang panjang.

Cara Mengukur

Lighthouse berjalan dalam persekitaran makmal dan tidak boleh mengklik butang anda seperti manusia sebenar. Pasang pustaka web-vitals dan tangkap data sebenar daripada pengguna anda.

Sumber: https://dev.to/ahmed_mahmoud360/fixing-inp-field-notes-on-interaction-to-next-paint-in-a-react-app-32fa