INP-ஐ சரிசெய்தல்: React செயலிகள் மெதுவாகத் தெரிவதைத் தடுப்பது எப்படி
உங்கள் டேஷ்போர்டு மெதுவாகத் தெரிகிறது. உங்கள் API வேகமானது. Lighthouse பச்சை நிற மதிப்பெண்களைக் காட்டுகிறது. இருப்பினும், ஒவ்வொரு கிளிக் செய்யும் போதும் தாமதம் ஏற்படுகிறது.
அது ஒரு INP பிரச்சனை.
Interaction to Next Paint (INP) என்பது ஒரு பக்கம் பயனரின் செயலுக்குப் பதிலளிக்க எவ்வளவு நேரம் எடுத்துக்கொள்கிறது என்பதை அளவிடுகிறது. இது மார்ச் 2024 இல் First Input Delay (FID)-க்கு மாற்றாக வந்தது. FID முதல் கிளிக் ஒன்றை மட்டுமே கவனித்தது; ஆனால் INP ஒவ்வொரு தொடர்பையும் (interaction) கண்காணிக்கிறது.
200 ms-க்கும் குறைவான INP மதிப்பெண் வேகமானதாகத் தோன்றும். 500 ms-க்கும் அதிகமாக இருந்தால் அது மந்தமாகத் தோன்றும்.
INP-ஐ சரிசெய்ய, அதை மூன்று நிலைகளாகப் பிரிக்கலாம்:
- Input Delay – ஒரு கிளிக் மற்றும் உங்கள் குறியீடு (code) தொடங்குவதற்கிடையேயான இடைவெளி. மெயின் த்ரெட் (main thread) பிஸியாக இருக்கும்போது இது நிகழ்கிறது.
- Processing Time – உங்கள் பங்க்ஷன்கள் (functions) மற்றும் React state அப்டேட்கள் எவ்வளவு நேரம் இயங்குகின்றன என்பது.
- Presentation Delay – உங்கள் குறியீடு முடிவடைவதற்கும் பிரவுசர் திரையைத் திரையில் காட்டுவதற்கும் (painting) இடையேயான இடைவெளி.
Input Delay-ஐ சரிசெய்தல்
நீண்ட நேரப் பணிகள் (Long tasks) மெயின் த்ரெட்டைத் தடுக்கின்றன. ஒரு பணி 50 ms-க்கும் அதிகமாக இயங்கினால், அது கிளிக் செய்வதைத் தாமதப்படுத்தும். நீண்ட பணிகளைச் சிறிய துண்டுகளாகப் பிரிக்க scheduler.yield() என்பதைப் பயன்படுத்தவும், இதனால் பிரவுசர் அவற்றுக்கிடையே கிளிக் நிகழ்வுகளைச் செயல்படுத்த முடியும்.
Processing Time-ஐ சரிசெய்தல்
UI-ஐத் துரிதமாக (responsive) வைத்திருக்க React-ன் transition APIs-களைப் பயன்படுத்தவும்.
startTransition– அவசரமில்லாத அப்டேட்களை (non-urgent updates) இதனுள் கொண்டு வரவும். ஒரு புதிய கிளிக் நிகழ்வைக் கையாள React ஒரு கனமான அப்டேட்டைத் தற்காலிகமாக நிறுத்தி வைக்க முடியும்.useDeferredValue– உடனடியாக அப்டேட் செய்யத் தேவையில்லாத மதிப்புகளைத் தள்ளிவைக்க (defer) இதைப் பயன்படுத்தலாம்.
இந்த APIs குறியீட்டின் வேகத்தை அதிகரிக்காது; மாறாக அவை குறியீட்டை இடையில் நிறுத்தக்கூடியதாக (interruptible) மாற்றுகின்றன, இது உங்கள் INP-ஐக் குறைக்கிறது.
Presentation Delay-ஐ சரிசெய்தல்
அதிகப்படியான DOM எலிமெண்ட்கள் (elements) திரையில் தோன்றுவதைத் (paint) தாமதப்படுத்தும்.
- திரைக்கு வெளியே உள்ள எலிமெண்ட்களைத் தவிர்ப்பதற்கு CSS-இல்
content-visibility: autoஎன்பதைப் பயன்படுத்தவும். - Layout thrashing-ஐத் தவிர்க்கவும்: ஒரே லூப்பில் (loop) ஒரு ஸ்டைலை (style) வாசித்துவிட்டு, பிறகு ஒரு ஸ்டைலை எழுத வேண்டாம். அதற்குப் பதிலாக, வாசிப்பவற்றையும் எழுதுவதையும் தொகுப்பாக (batch) செய்யவும்.
- நீண்ட பட்டியல்களை (long lists) Virtualize செய்யவும்.
எவ்வாறு அளவிடுவது
Lighthouse ஒரு ஆய்வகச் சூழலில் (lab) இயங்குகிறது, எனவே அது ஒரு நிஜ மனிதனைப் போல உங்கள் பட்டன்களைக் கிளிக் செய்ய முடியாது. web-vitals லைப்ரரியை நிறுவி, உங்கள் பயனர்களிடமிருந்து உண்மையான தரவுகளைப் பெறவும்.