INP کو ٹھیک کرنا: React ایپس کو سست محسوس ہونے سے کیسے روکیں
آپ کا ڈیش بورڈ سست محسوس ہوتا ہے۔ آپ کی API تیز ہے۔ Lighthouse سبز اسکور دکھاتا ہے۔ پھر بھی ہر کلک میں تاخیر ہوتی ہے۔
یہ INP کا مسئلہ ہے۔
Interaction to Next Paint (INP) اس بات کی پیمائش کرتا ہے کہ ایک پیج صارف کے ردعمل پر جواب دینے میں کتنا وقت لیتا ہے۔ اس نے مارچ 2024 میں First Input Delay (FID) کی جگہ لی۔ FID صرف پہلے کلک کو دیکھتا تھا؛ INP ہر انٹرایکشن پر نظر رکھتا ہے۔
200ms سے کم کا INP اسکور تیز محسوس ہوتا ہے۔ 500ms سے زیادہ کا اسکور سست محسوس ہوتا ہے۔
INP کو ٹھیک کرنے کے لیے، اسے تین مراحل میں تقسیم کریں:
- Input Delay – کلک اور آپ کے کوڈ کے شروع ہونے کے درمیان کا وقفہ۔ یہ اس وقت ظاہر ہوتا ہے جب main thread مصروف ہو۔
- Processing Time – آپ کے فنکشنز اور React state updates کتنی دیر تک چلتے ہیں۔
- Presentation Delay – آپ کے کوڈ کے مکمل ہونے اور براؤزر کے اسکرین کو پینٹ (paint) کرنے کے درمیان کا وقفہ۔
Input Delay کو ٹھیک کرنا
طویل ٹاسک (Long tasks) main thread کو بلاک کر دیتے ہیں۔ اگر کوئی ٹاسک 50ms سے زیادہ دیر تک چلتا ہے، تو یہ کلکس کو روک دیتا ہے۔ طویل ٹاسک کو چھوٹے حصوں میں تقسیم کرنے کے لیے scheduler.yield() کو کال کریں تاکہ براؤزر ان کے درمیان کلکس کو پروسیس کر سکے۔
Processing Time کو ٹھیک کرنا
UI کو ریسپونسیو رکھنے کے لیے React کی transition APIs استعمال کریں۔
startTransition– غیر ضروری (non-urgent) اپ ڈیٹس کو اس میں لپیٹیں۔ React ایک بھاری اپ ڈیٹ کو روک سکتا ہے تاکہ نئے کلک کو ہینڈل کیا جا سکے۔useDeferredValue– ان ویلیوز کو مؤخر (defer) کریں جنہیں فوری طور پر اپ ڈیٹ کرنے کی ضرورت نہیں ہے۔
یہ APIs کوڈ کی رفتار تیز نہیں کرتی ہیں؛ بلکہ یہ اسے قابلِ وقف (interruptible) بناتی ہیں، جس سے آپ کا INP کم ہو جاتا ہے۔
Presentation Delay کو ٹھیک کرنا
بہت زیادہ DOM elements پینٹ (paint) کے عمل کو سست کر دیتے ہیں۔
- آف اسکرین (off-screen) عناصر کی رینڈرنگ کو چھوڑنے کے لیے CSS میں
content-visibility: autoکا استعمال کریں۔ - Layout thrashing کو روکیں: کبھی بھی ایک ہی لوپ میں اسٹائل کو پڑھیں اور پھر اسٹائل لکھیں۔ اس کے بجائے ریڈز (reads) اور رائٹس (writes) کو بیچ (batch) میں کریں۔
- طویل لسٹوں کو ورچلائز (virtualize) کریں۔
پیمائش کیسے کریں
Lighthouse ایک لیب میں چلتا ہے اور یہ ایک حقیقی شخص کی طرح آپ کے بٹنوں پر کلک نہیں کر سکتا۔ web-vitals لائبریری انسٹال کریں اور اپنے صارفین سے حقیقی ڈیٹا حاصل کریں۔