INP ને ઠીક કરવું: React એપ્સને ધીમી લાગતી અટકાવવા માટે શું કરવું
તમારું ડેશબોર્ડ ધીમું લાગે છે. તમારી API ઝડપી છે. Lighthouse ગ્રીન સ્કોર બતાવે છે. છતાં દરેક ક્લિકમાં લેગ (lag) થાય છે.
આ એક 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 ને પ્રતિભાવશીલ (responsive) રાખવા માટે React ની transition APIs નો ઉપયોગ કરો.
startTransition– બિન-તાત્કાલિક અપડેટ્સને આમાં લપેટો (wrap). React નવા ક્લિકને હેન્ડલ કરવા માટે ભારે અપડેટને થોભાવી શકે છે.useDeferredValue– એવી વેલ્યુઝને મોકૂફ (defer) રાખો જેને તરત જ અપડેટ કરવાની જરૂર નથી.
આ APIs કોડની ઝડપ વધારતા નથી; તેઓ તેને interruptible બનાવે છે, જેનાથી તમારો INP ઘટે છે.
Presentation Delay ને ઠીક કરવું
વધુ પડતા DOM એલિમેન્ટ્સ પેઇન્ટિંગની પ્રક્રિયાને ધીમી પાડે છે.
- સ્ક્રીનની બહારના એલિમેન્ટ્સનું રેન્ડરિંગ ટાળવા માટે CSS માં
content-visibility: autoલાગુ કરો. - Layout thrashing અટકાવો: ક્યારેય એક જ લૂપમાં સ્ટાઇલ વાંચશો નહીં અને પછી સ્ટાઇલ લખશો નહીં. તેના બદલે રીડ્સ (reads) અને રાઈટ્સ (writes) ને બેચમાં કરો.
- લાંબી લિસ્ટને Virtualize કરો.
કેવી રીતે માપવું
Lighthouse લેબમાં ચાલે છે અને તે વાસ્તવિક વ્યક્તિની જેમ તમારા બટનો પર ક્લિક કરી શકતું નથી. web-vitals લાઇબ્રેરી ઇન્સ્ટોલ કરો અને તમારા યુઝર્સ પાસેથી વાસ્તવિક ડેટા મેળવો.