Kurekebisha INP: Jinsi ya Kuzuia Programu za React Zisihisiwe Kuwa Polepole

Dashibodi yako inahisi kuwa polepole. API yako ni ya haraka. Lighthouse inaonyesha alama za kijani. Hata hivyo, kila bofyo inachelewa.

Hiyo ni tatizo la INP.

Interaction to Next Paint (INP) inapima muda ambao ukurasa unachukua kuitikia mtumiaji. Ilichukua nafasi ya First Input Delay (FID) mnamo Machi 2024. FID ilitazama bofyo ya kwanza tu; INP inafuatilia kila mwingiliano.

Alama ya INP chini ya 200 ms inahisiwa kuwa ya haraka. Zaidi ya 500 ms inahisiwa kuwa nzito.

Ili kurekebisha INP, igawanye katika awamu tatu:

  • Input Delay – pengo kati ya bofyo na wakati kodi yako inapoanza. Hutokea wakati main thread ikiwa na kazi nyingi.
  • Processing Time – muda ambao kazi zako (functions) na mabadiliko ya hali ya React (React state updates) yanachukua.
  • Presentation Delay – pengo kati ya kumaliza kodi yako na kivinjari (browser) kuchora skrini.

Kurekebisha Input Delay

Kazi ndefu huzuia main thread. Ikiwa kazi inachukua zaidi ya 50 ms, inachelewesha bofyo. Itisha scheduler.yield() ili kugawanya kazi ndefu katika vipande vidogo ili kivinjari kiweze kuchakata bofyo katikati yake.

Kurekebisha Processing Time

Tumia React transition APIs ili kuweka UI iwe inayoitikia haraka.

  • startTransition – fungia mabadiliko yasiyo ya haraka. React inaweza kusitisha mabadiliko mazito ili kushughulikia bofyo mpya.
  • useDeferredValue – ahirisha thamani ambazo hazihitaji kubadilika papo hapo.

API hizi haziharakishi kodi; zinaifanya iweze kusitishwa (interruptible), jambo ambalo hupunguza INP yako.

Kurekebisha Presentation Delay

Vipengele vingi vya DOM hupunguza kasi ya paint.

  • Tumia content-visibility: auto kwenye CSS ili kuruka rendering ya vipengele vilivyo nje ya skrini.
  • Acha layout thrashing: usisome staili (style) kisha uandike staili nyingine kwenye loop ileile. Badala yake, kusanya usomaji na uandishi kwa pamoja (batch).
  • Tumia virtualization kwa orodha ndefu.

Jinsi ya Kupima

Lighthouse hufanya kazi katika maabara na haiwezi kubofya vitufe vyako kama mtu halisi. Sakinisha maktaba ya web-vitals na upate data halisi kutoka kwa watumiaji wako.

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