INP सुधारणे: React Apps संथ वाटण्यापासून कसे थांबवायचे
तुमचे डॅशबोर्ड संथ वाटते. तुमचे API वेगवान आहे. Lighthouse मध्ये ग्रीन स्कोअर दिसतात. तरीही प्रत्येक क्लिकला विलंब होतो.
ही एक INP समस्या आहे.
Interaction to Next Paint (INP) हे पेज वापरकर्त्याला प्रतिसाद देण्यासाठी किती वेळ घेते हे मोजते. मार्च २०२४ मध्ये याने First Input Delay (FID) ची जागा घेतली. FID फक्त पहिल्या क्लिककडे लक्ष देत असे; तर INP प्रत्येक इंटरॅक्शनवर लक्ष ठेवते.
२०० ms पेक्षा कमी INP स्कोअर वेगवान वाटतो. ५०० ms पेक्षा जास्त असल्यास संथ वाटते.
INP सुधारण्यासाठी, त्याचे तीन टप्प्यांत विभाजन करा:
- Input Delay – क्लिक आणि तुमचा कोड सुरू होणे यामधील अंतर. जेव्हा main thread व्यस्त असतो तेव्हा हे दिसून येते.
- Processing Time – तुमचे functions आणि React state updates चालण्यासाठी लागणारा वेळ.
- Presentation Delay – तुमचा कोड पूर्ण होणे आणि ब्राउझर स्क्रीन पेंट करणे यामधील अंतर.
Input Delay सुधारणे
लांब कार्ये (Long tasks) main thread ला ब्लॉक करतात. जर एखादे कार्य ५० ms पेक्षा जास्त वेळ चालले, तर ते क्लिक्समध्ये अडथळा आणते. लांब कार्यांचे लहान तुकड्यांमध्ये विभाजन करण्यासाठी scheduler.yield() वापरा, जेणेकरून ब्राउझर त्यांच्या दरम्यान क्लिक्स प्रोसेस करू शकेल.
Processing Time सुधारणे
UI रिस्पॉन्सिव्ह ठेवण्यासाठी React च्या transition APIs वापरा.
startTransition– तातडीचे नसलेले (non-urgent) अपडेट्स यामध्ये गुंडाळा (wrap). नवीन क्लिक हाताळण्यासाठी React एखादे जड अपडेट थांबवू शकते.useDeferredValue– ज्या व्हॅल्यूज त्वरित अपडेट करण्याची गरज नाही, त्यांना पुढे ढकलण्यासाठी (defer) वापरा.
हे APIs कोडचा वेग वाढवत नाहीत; ते कोडला 'interruptible' (मध्येच थांबवता येण्यासारखा) बनवतात, ज्यामुळे तुमचा INP कमी होतो.
Presentation Delay सुधारणे
खूप जास्त DOM elements मुळे पेंटिंग प्रक्रिया संथ होते.
- स्क्रीनच्या बाहेर असलेल्या elements चे रेंडरिंग टाळण्यासाठी CSS मध्ये
content-visibility: autoवापरा. - layout thrashing थांबवा: एकाच लूपमध्ये कधीही आधी style वाचा आणि नंतर style लिहा असे करू नका. त्याऐवजी reads आणि writes एकत्रितपणे (batch) करा.
- लांब लिस्ट व्हर्च्युअलाइज (Virtualize) करा.
मोजमाप कसे करावे
Lighthouse हे लॅबमध्ये चालते आणि ते एखाद्या खऱ्या व्यक्तीप्रमाणे तुमच्या बटणांवर क्लिक करू शकत नाही. web-vitals लायब्ररी इंस्टॉल करा आणि तुमच्या वापरकर्त्यांकडून प्रत्यक्ष डेटा मिळवा.