INP ਨੂੰ ਠੀਕ ਕਰਨਾ: React ਐਪਸ ਨੂੰ ਸੁਸਤ ਮਹਿਸੂਸ ਹੋਣ ਤੋਂ ਕਿਵੇਂ ਰੋਕੀਏ
ਤੁਹਾਡਾ ਡੈਸ਼ਬੋਰਡ ਸੁਸਤ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ। ਤੁਹਾਡੀ API ਤੇਜ਼ ਹੈ। Lighthouse ਹਰੇ ਰੰਗ ਦੇ ਸਕੋਰ ਦਿਖਾਉਂਦਾ ਹੈ। ਫਿਰ ਵੀ ਹਰ ਕਲਿੱਕ ਵਿੱਚ ਦੇਰੀ ਹੁੰਦੀ ਹੈ।
ਇਹ ਇੱਕ INP ਸਮੱਸਿਆ ਹੈ।
Interaction to Next Paint (INP) ਇਹ ਮਾਪਦਾ ਹੈ ਕਿ ਇੱਕ ਪੇਜ ਨੂੰ ਉਪਭੋਗਤਾ (user) ਨੂੰ ਜਵਾਬ ਦੇਣ ਵਿੱਚ ਕਿੰਨਾ ਸਮਾਂ ਲੱਗਦਾ ਹੈ। ਇਸਨੇ ਮਾਰਚ 2024 ਵਿੱਚ First Input Delay (FID) ਦੀ ਜਗ੍ਹਾ ਲਈ। FID ਸਿਰਫ਼ ਪਹਿਲੇ ਕਲਿੱਕ ਨੂੰ ਦੇਖਦਾ ਸੀ; INP ਹਰ ਇੰਟਰੈਕਸ਼ਨ 'ਤੇ ਨਜ਼ਰ ਰੱਖਦਾ ਹੈ।
200 ms ਤੋਂ ਘੱਟ INP ਸਕੋਰ ਤੇਜ਼ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ। 500 ms ਤੋਂ ਵੱਧ ਸੁਸਤ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ।
INP ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ, ਇਸਨੂੰ ਤਿੰਨ ਪੜਾਵਾਂ ਵਿੱਚ ਵੰਡੋ:
- Input Delay – ਇੱਕ ਕਲਿੱਕ ਅਤੇ ਤੁਹਾਡੇ ਕੋਡ ਦੇ ਸ਼ੁਰੂ ਹੋਣ ਦੇ ਵਿਚਕਾਰ ਦਾ ਸਮਾਂ। ਇਹ ਉਦੋਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ ਜਦੋਂ main thread ਵਿਅਸਤ ਹੁੰਦਾ ਹੈ।
- Processing Time – ਤੁਹਾਡੇ functions ਅਤੇ React state updates ਨੂੰ ਚੱਲਣ ਵਿੱਚ ਕਿੰਨਾ ਸਮਾਂ ਲੱਗਦਾ ਹੈ।
- Presentation Delay – ਤੁਹਾਡੇ ਕੋਡ ਦੇ ਖਤਮ ਹੋਣ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਦੁਆਰਾ ਸਕ੍ਰੀਨ ਨੂੰ ਪੇਂਟ ਕਰਨ ਦੇ ਵਿਚਕਾਰ ਦਾ ਸਮਾਂ।
Fixing Input Delay
ਲੰਬੇ ਟਾਸਕ (long tasks) main thread ਨੂੰ ਰੋਕ ਦਿੰਦੇ ਹਨ। ਜੇਕਰ ਕੋਈ ਟਾਸਕ 50 ms ਤੋਂ ਵੱਧ ਸਮਾਂ ਚੱਲਦਾ ਹੈ, ਤਾਂ ਇਹ ਕਲਿੱਕਸ ਨੂੰ ਰੋਕ ਦਿੰਦਾ ਹੈ। ਲੰਬੇ ਟਾਸਕਾਂ ਨੂੰ ਛੋਟੇ ਹਿੱਸਿਆਂ ਵਿੱਚ ਵੰਡਣ ਲਈ scheduler.yield() ਦੀ ਵਰਤੋਂ ਕਰੋ ਤਾਂ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਉਹਨਾਂ ਦੇ ਵਿਚਕਾਰ ਕਲਿੱਕਸ ਨੂੰ ਪ੍ਰੋਸੈਸ ਕਰ ਸਕੇ।
Fixing Processing Time
UI ਨੂੰ ਰਿਸਪੌਂਸਿਵ ਰੱਖਣ ਲਈ React ਦੇ transition APIs ਦੀ ਵਰਤੋਂ ਕਰੋ।
startTransition– ਗੈਰ-ਜ਼ਰੂਰੀ (non-urgent) ਅਪਡੇਟਸ ਨੂੰ ਰੈਪ (wrap) ਕਰੋ। React ਨਵੇਂ ਕਲਿੱਕ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਇੱਕ ਭਾਰੀ ਅਪਡੇਟ ਨੂੰ ਰੋਕ ਸਕਦਾ ਹੈ।useDeferredValue– ਉਹਨਾਂ ਵੈਲਯੂਜ਼ ਨੂੰ ਟਾਲ ਦਿਓ (defer) ਜਿਨ੍ਹਾਂ ਨੂੰ ਤੁਰੰਤ ਅਪਡੇਟ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ।
ਇਹ APIs ਕੋਡ ਦੀ ਰਫ਼ਤਾਰ ਨਹੀਂ ਵਧਾਉਂਦੇ; ਇਹ ਇਸਨੂੰ ਇੰਟਰਪਟਿਬਲ (interruptible) ਬਣਾਉਂਦੇ ਹਨ, ਜਿਸ ਨਾਲ ਤੁਹਾਡਾ INP ਘਟ ਜਾਂਦਾ ਹੈ।
Fixing Presentation Delay
ਬਹੁਤ ਜ਼ਿਆਦਾ DOM elements ਪੇਂਟਿੰਗ ਨੂੰ ਸੁਸਤ ਕਰ ਦਿੰਦੇ ਹਨ।
- ਸਕ੍ਰੀਨ ਤੋਂ ਬਾਹਰਲੇ (off-screen) elements ਨੂੰ ਰੈਂਡਰ ਕਰਨ ਤੋਂ ਬਚਣ ਲਈ CSS ਵਿੱਚ
content-visibility: autoਲਾਗੂ ਕਰੋ। - Layout thrashing ਨੂੰ ਰੋਕੋ: ਕਦੇ ਵੀ ਇੱਕੋ ਲੂਪ ਵਿੱਚ ਸਟਾਈਲ ਨੂੰ ਪੜ੍ਹੋ ਅਤੇ ਫਿਰ ਸਟਾਈਲ ਲਿਖੋ ਨਾ। ਇਸਦੀ ਬਜਾਏ, ਰੀਡ (read) ਅਤੇ ਰਾਈਟ (write) ਨੂੰ ਬੈਚ (batch) ਵਿੱਚ ਕਰੋ।
- ਲੰਬੀਆਂ ਲਿਸਟਾਂ ਨੂੰ virtualize ਕਰੋ।
How to Measure
Lighthouse ਇੱਕ ਲੈਬ ਵਿੱਚ ਚੱਲਦਾ ਹੈ ਅਤੇ ਇਹ ਇੱਕ ਅਸਲੀ ਵਿਅਕਤੀ ਵਾਂਗ ਤੁਹਾਡੇ ਬਟਨਾਂ 'ਤੇ ਕਲਿੱਕ ਨਹੀਂ ਕਰ ਸਕਦਾ। web-vitals ਲਾਇਬ੍ਰੇਰੀ ਇੰਸਟਾਲ ਕਰੋ ਅਤੇ ਆਪਣੇ ਉਪਭੋਗਤਾਵਾਂ ਤੋਂ ਅਸਲੀ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰੋ।