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 state అప్డేట్లు ఎంత సమయం నడుస్తాయో ఇది తెలియజేస్తుంది.
- Presentation Delay – మీ కోడ్ పూర్తయిన సమయానికి మరియు బ్రౌజర్ స్క్రీన్ను పెయింట్ (paint) చేసే సమయానికి మధ్య ఉండే వ్యత్యాసం.
Input Delayని సరిచేయడం
లాంగ్ టాస్క్లు (Long tasks) మెయిన్ థ్రెడ్ను బ్లాక్ చేస్తాయి. ఒక టాస్క్ 50 ms కంటే ఎక్కువ సమయం తీసుకుంటే, అది క్లిక్లను ఆపుతుంది. లాంగ్ టాస్క్లను చిన్న చిన్న భాగాలుగా విభజించడానికి scheduler.yield()ని ఉపయోగించండి, తద్వారా బ్రౌజర్ వాటి మధ్య క్లిక్లను ప్రాసెస్ చేయగలదు.
Processing Timeని సరిచేయడం
UIని రెస్పాన్సివ్గా ఉంచడానికి React యొక్క transition APIsని ఉపయోగించండి.
startTransition– అత్యవసరం కాని అప్డేట్లను (non-urgent updates) దీనితో కవర్ చేయండి. కొత్త క్లిక్ను హ్యాండిల్ చేయడానికి React ఒక భారీ అప్డేట్ను తాత్కాలికంగా ఆపివేయగలదు.useDeferredValue– వెంటనే అప్డేట్ అవ్వాల్సిన అవసరం లేని వాల్యూస్ను వాయిదా వేయడానికి (defer) దీనిని ఉపయోగించండి.
ఈ APIs కోడ్ను వేగవంతం చేయవు; అవి కోడ్ను ఇంటరప్ట్ (interruptible) చేయడానికి వీలుగా మారుస్తాయి, దీనివల్ల మీ INP తగ్గుతుంది.
Presentation Delayని సరిచేయడం
ఎక్కువ సంఖ్యలో DOM ఎలిమెంట్స్ ఉండటం వల్ల పెయింటింగ్ ప్రక్రియ నెమ్మదిస్తుంది.
- స్క్రీన్ వెలుపల ఉన్న ఎలిమెంట్స్ రెండరింగ్ను స్కిప్ చేయడానికి CSSలో
content-visibility: autoని ఉపయోగించండి. - Layout thrashingని ఆపండి: ఒకే లూప్లో ఒక స్టైల్ను చదివి (read), వెంటనే మరొక స్టైల్ను రాయకండి (write). దానికి బదులుగా రీడ్స్ మరియు రైట్స్ను బ్యాచ్లుగా చేయండి.
- పెద్ద లిస్ట్లను వర్చువలైజ్ (Virtualize) చేయండి.
ఎలా కొలవాలి
Lighthouse ఒక ల్యాబ్లో రన్ అవుతుంది మరియు నిజమైన వ్యక్తిలా మీ బటన్లను క్లిక్ చేయలేదు. web-vitals లైబ్రరీని ఇన్స్టాల్ చేసి, మీ వినియోగదారుల నుండి నిజమైన డేటాను సేకరించండి.