INP ಅನ್ನು ಸರಿಪಡಿಸುವುದು: React ಅಪ್ಲಿಕೇಶನ್ಗಳು ನಿಧಾನವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದನ್ನು ಹೇಗೆ ತಡೆಯುವುದು
ನಿಮ್ಮ ಡ್ಯಾಶ್ಬೋರ್ಡ್ ನಿಧಾನವಾಗಿರುವಂತೆ ಕಾಣುತ್ತಿದೆ. ನಿಮ್ಮ API ವೇಗವಾಗಿದೆ. Lighthouse ಹಸಿರು ಸ್ಕೋರ್ಗಳನ್ನು ತೋರಿಸುತ್ತಿದೆ. ಆದರೂ ಪ್ರತಿ ಕ್ಲಿಕ್ ಮಾಡುವಾಗಲೂ ವಿಳಂಬವಾಗುತ್ತಿದೆ.
ಅದು INP ಸಮಸ್ಯೆ.
Interaction to Next Paint (INP) ಎಂಬುದು ಒಂದು ಪೇಜ್ ಬಳಕೆದಾರರ ಪ್ರತಿಕ್ರಿಯೆಗೆ ಎಷ್ಟು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಎಂಬುದನ್ನು ಅಳೆಯುತ್ತದೆ. ಇದು ಮಾರ್ಚ್ 2024 ರಲ್ಲಿ First Input Delay (FID) ಅನ್ನು ಬದಲಿಸಿತು. FID ಕೇವಲ ಮೊದಲ ಕ್ಲಿಕ್ ಅನ್ನು ಮಾತ್ರ ಗಮನಿಸುತ್ತಿತ್ತು; ಆದರೆ INP ಪ್ರತಿಯೊಂದು ಸಂವಹನವನ್ನೂ (interaction) ಗಮನಿಸುತ್ತದೆ.
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– ತುರ್ತಲ್ಲದ ಅಪ್ಡೇಟ್ಗಳನ್ನು (non-urgent updates) ಇದರಲ್ಲಿ ಸುತ್ತಿಕೊಳ್ಳಿ (wrap). ಹೊಸ ಕ್ಲಿಕ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು React ಭಾರವಾದ ಅಪ್ಡೇಟ್ ಅನ್ನು ತಾತ್ಕಾಲಿಕವಾಗಿ ನಿಲ್ಲಿಸಬಹುದು.useDeferredValue– ತಕ್ಷಣವೇ ಅಪ್ಡೇಟ್ ಆಗಬೇಕಿಲ್ಲದ ಮೌಲ್ಯಗಳನ್ನು (values) ಮುಂದೂಡಲು (defer) ಇದನ್ನು ಬಳಸಿ.
ಈ APIs ಕೋಡ್ ಅನ್ನು ವೇಗಗೊಳಿಸುವುದಿಲ್ಲ; ಬದಲಾಗಿ ಅವು ಅದನ್ನು ಮಧ್ಯದಲ್ಲಿ ನಿಲ್ಲಿಸುವಂತಾಗುವಂತೆ (interruptible) ಮಾಡುತ್ತವೆ, ಇದು ನಿಮ್ಮ INP ಅನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
Presentation Delay ಅನ್ನು ಸರಿಪಡಿಸುವುದು
ಅತಿಯಾದ DOM ಎಲಿಮೆಂಟ್ಗಳು ಪೇಂಟಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ನಿಧಾನಗೊಳಿಸುತ್ತವೆ.
- ಸ್ಕ್ರೀನ್ನಿಂದ ಹೊರಗಿರುವ ಎಲಿಮೆಂಟ್ಗಳ ರೆಂಡರಿಂಗ್ ಅನ್ನು ತಪ್ಪಿಸಲು CSS ನಲ್ಲಿ
content-visibility: autoಅನ್ನು ಅನ್ವಯಿಸಿ. - Layout thrashing ಅನ್ನು ನಿಲ್ಲಿಸಿ: ಒಂದೇ ಲೂಪ್ನಲ್ಲಿ ಎಂದಿಗೂ ಸ್ಟೈಲ್ ಅನ್ನು ಓದಬೇಡಿ ಮತ್ತು ನಂತರ ಸ್ಟೈಲ್ ಅನ್ನು ಬರೆಯಬೇಡಿ. ಬದಲಾಗಿ ಓದುವ ಮತ್ತು ಬರೆಯುವ ಪ್ರಕ್ರಿಯೆಗಳನ್ನು ಗುಂಪು ಮಾಡಿ (Batch).
- ದೀರ್ಘವಾದ ಪಟ್ಟಿಗಳನ್ನು (long lists) ವರ್ಚುವಲೈಸ್ (Virtualize) ಮಾಡಿ.
ಹೇಗೆ ಅಳೆಯುವುದು
Lighthouse ಒಂದು ಲ್ಯಾಬ್ನಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು ನಿಜವಾದ ವ್ಯಕ್ತಿಯಂತೆ ನಿಮ್ಮ ಬಟನ್ಗಳನ್ನು ಕ್ಲಿಕ್ ಮಾಡಲು ಸಾಧ್ಯವಿಲ್ಲ. web-vitals ಲೈಬ್ರರಿಯನ್ನು ಇನ್ಸ್ಟಾಲ್ ಮಾಡಿ ಮತ್ತು ನಿಮ್ಮ ಬಳಕೆದಾರರಿಂದ ನೈಜ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಿ.