INP को ठीक करना: React ऐप्स को धीमा महसूस होने से कैसे रोकें
आपका डैशबोर्ड धीमा महसूस होता है। आपकी API तेज़ है। Lighthouse ग्रीन स्कोर दिखाता है। फिर भी हर क्लिक में लैग (lag) होता है।
यह एक INP समस्या है।
Interaction to Next Paint (INP) यह मापता है कि किसी पेज को यूजर के रिस्पॉन्स देने में कितना समय लगता है। इसने मार्च 2024 में First Input Delay (FID) की जगह ली। FID केवल पहले क्लिक को देखता था; INP हर इंटरैक्शन पर नज़र रखता है।
200 ms से कम का INP स्कोर तेज़ महसूस होता है। 500 ms से अधिक का स्कोर सुस्त (sluggish) महसूस होता है।
INP को ठीक करने के लिए, इसे तीन चरणों में विभाजित करें:
- Input Delay – क्लिक और आपके कोड के शुरू होने के बीच का अंतर। यह तब होता है जब main thread व्यस्त होता है।
- Processing Time – आपके functions और React state updates को चलने में कितना समय लगता है।
- Presentation Delay – आपके कोड के पूरा होने और ब्राउज़र द्वारा स्क्रीन पेंट करने के बीच का अंतर।
Input Delay को ठीक करना
लंबे टास्क (Long tasks) main thread को ब्लॉक कर देते हैं। यदि कोई टास्क 50 ms से अधिक समय तक चलता है, तो यह क्लिक्स को रोक देता है। लंबे टास्क को छोटे टुकड़ों में विभाजित करने के लिए scheduler.yield() का उपयोग करें ताकि ब्राउज़र उनके बीच क्लिक्स को प्रोसेस कर सके।
Processing Time को ठीक करना
UI को रिस्पॉन्सिव बनाए रखने के लिए React के transition APIs का उपयोग करें।
startTransition– गैर-जरूरी (non-urgent) अपडेट्स को रैप (wrap) करें। React एक नए क्लिक को संभालने के लिए भारी अपडेट को रोक सकता है।useDeferredValue– उन वैल्यूज़ को डिफ़र (defer) करें जिन्हें तुरंत अपडेट करने की आवश्यकता नहीं है।
ये APIs कोड की गति नहीं बढ़ाते; वे इसे interruptible बनाते हैं, जिससे आपका INP कम हो जाता है।
Presentation Delay को ठीक करना
बहुत अधिक DOM elements पेंटिंग की गति को धीमा कर देते हैं।
- ऑफ-स्क्रीन एलिमेंट्स के रेंडरिंग को छोड़ने के लिए CSS में
content-visibility: autoलागू करें। - Layout thrashing को रोकें: कभी भी एक ही लूप में स्टाइल को पढ़ें और फिर स्टाइल लिखें नहीं। इसके बजाय, reads और writes को बैच (batch) में करें।
- लंबी सूचियों (lists) को virtualize करें।
कैसे मापें
Lighthouse एक लैब में चलता है और यह किसी वास्तविक व्यक्ति की तरह आपके बटनों पर क्लिक नहीं कर सकता। web-vitals लाइब्रेरी इंस्टॉल करें और अपने उपयोगकर्ताओं से वास्तविक डेटा प्राप्त करें।