INP പരിഹരിക്കാം: React ആപ്പുകൾ സാവധാനത്തിൽ പ്രവർത്തിക്കുന്നത് എങ്ങനെ തടയാം
നിങ്ങളുടെ ഡാഷ്ബോർഡ് സാവധാനത്തിൽ പ്രവർത്തിക്കുന്നതായി തോന്നുന്നു. നിങ്ങളുടെ API വേഗതയുള്ളതാണ്. Lighthouse പച്ച നിറത്തിലുള്ള സ്കോറുകൾ കാണിക്കുന്നു. എന്നിട്ടും ഓരോ ക്ലിക്കിലും ലാഗ് അനുഭവപ്പെടുന്നു.
അത് ഒരു INP പ്രശ്നമാണ്.
Interaction to Next Paint (INP) എന്നത് ഒരു പേജ് ഉപയോക്താവിന്റെ പ്രതികരണത്തിന് എത്ര സമയം എടുക്കുന്നു എന്ന് അളക്കുന്നു. 2024 മാർച്ചിൽ ഇത് First Input Delay (FID)-ന് പകരമായി വന്നു. FID ആദ്യത്തെ ക്ലിക്ക് മാത്രമാണ് പരിശോധിച്ചിരുന്നത്; എന്നാൽ INP ഓരോ ഇന്ററാക്ഷനും നിരീക്ഷിക്കുന്നു.
200 ms-ൽ താഴെയുള്ള INP സ്കോർ വേഗതയുള്ളതായി അനുഭവപ്പെടും. 500 ms-ന് മുകളിൽ ആണെങ്കിൽ അത് സാവധാനത്തിലുള്ളതായി അനുഭവപ്പെടും.
INP പരിഹരിക്കുന്നതിന്, ഇതിനെ മൂന്ന് ഘട്ടങ്ങളായി തിരിക്കാം:
- Input Delay – ഒരു ക്ലിക്കിനും നിങ്ങളുടെ കോഡ് പ്രവർത്തിച്ചു തുടങ്ങുന്നതിനും ഇടയിലുള്ള സമയവ്യത്യാസം. മെയിൻ ത്രെഡ് (main thread) തിരക്കിലായിരിക്കുമ്പോഴാണ് ഇത് സംഭവിക്കുന്നത്.
- Processing Time – നിങ്ങളുടെ ഫംഗ്ഷനുകളും React സ്റ്റേറ്റ് അപ്ഡേറ്റുകളും പ്രവർത്തിക്കാൻ എടുക്കുന്ന സമയം.
- Presentation Delay – നിങ്ങളുടെ കോഡ് പൂർത്തിയായതിനും ബ്രൗസർ സ്ക്രീൻ പെയിന്റ് ചെയ്യുന്നതിനും ഇടയിലുള്ള സമയവ്യത്യാസം.
Input Delay പരിഹരിക്കാം
ദൈർഘ്യമേറിയ ടാസ്ക്കുകൾ (Long tasks) മെയിൻ ത്രെഡിനെ തടസ്സപ്പെടുത്തുന്നു. ഒരു ടാസ്ക് 50 ms-ൽ കൂടുതൽ സമയം എടുക്കുന്നുണ്ടെങ്കിൽ, അത് ക്ലിക്കുകളെ തടസ്സപ്പെടുത്തും. ദൈർഘ്യമേറിയ ടാസ്ക്കുകളെ ചെറിയ ഭാഗങ്ങളായി തിരിക്കാൻ scheduler.yield() ഉപയോഗിക്കുക, അങ്ങനെ അവയ്ക്കിടയിൽ ബ്രൗസറിന് ക്ലിക്കുകൾ പ്രോസസ്സ് ചെയ്യാൻ സാധിക്കും.
Processing Time പരിഹരിക്കാം
UI റെസ്പോൺസീവ് ആയി നിലനിർത്താൻ React-ന്റെ transition APIs ഉപയോഗിക്കുക.
startTransition– അടിയന്തരമല്ലാത്ത അപ്ഡേറ്റുകളെ ഇതിനുള്ളിൽ ഉൾപ്പെടുത്തുക. പുതിയൊരു ക്ലിക്ക് കൈകാര്യം ചെയ്യുന്നതിനായി ഒരു കനത്ത അപ്ഡേറ്റ് താൽക്കാലികമായി നിർത്താൻ React-ന് സാധിക്കും.useDeferredValue– ഉടനടി അപ്ഡേറ്റ് ചെയ്യേണ്ടതില്ലാത്ത വാല്യൂസിനെ മാറ്റിവെക്കാൻ (defer) ഇത് ഉപയോഗിക്കാം.
ഈ APIs കോഡിന്റെ വേഗത കൂട്ടുന്നില്ല; പകരം അവയെ തടസ്സപ്പെടുത്താൻ സാധിക്കുന്നതാക്കി (interruptible) മാറ്റുന്നു, ഇത് നിങ്ങളുടെ INP കുറയ്ക്കുന്നു.
Presentation Delay പരിഹരിക്കാം
അമിതമായ DOM എലമെന്റുകൾ പെയിന്റിംഗ് വേഗത കുറയ്ക്കുന്നു.
- സ്ക്രീനിന് പുറത്തുള്ള എലമെന്റുകളുടെ റെൻഡറിംഗ് ഒഴിവാക്കാൻ CSS-ൽ
content-visibility: autoഉപയോഗിക്കുക. - Layout thrashing ഒഴിവാക്കുക: ഒരേ ലൂപ്പിനുള്ളിൽ ഒരു സ്റ്റൈൽ വായിക്കുകയും (read) ഉടൻ തന്നെ ഒരു സ്റ്റൈൽ എഴുതുകയും (write) ചെയ്യരുത്. പകരം റീഡുകളും റൈറ്റുകളും ബച്ച് (batch) ആയി ചെയ്യുക.
- നീളമുള്ള ലിസ്റ്റുകൾ വിർച്വലൈസ് (Virtualize) ചെയ്യുക.
എങ്ങനെ അളക്കാം
Lighthouse ഒരു ലാബിൽ പ്രവർത്തിക്കുന്നതാണ്, അതിനാൽ ഒരു യഥാർത്ഥ വ്യക്തിയെപ്പോലെ നിങ്ങളുടെ ബട്ടണുകളിൽ ക്ലിക്ക് ചെയ്യാൻ അതിന് കഴിയില്ല. web-vitals ലൈബ്രറി ഇൻസ്റ്റാൾ ചെയ്യുകയും നിങ്ങളുടെ ഉപയോക്താക്കളിൽ നിന്ന് യഥാർത്ഥ ഡാറ്റ ശേഖരിക്കുകയും ചെയ്യുക.