آپ کا پیج تیزی سے لوڈ ہوتا ہے لیکن محسوس سست ہوتا ہے؟ یہ INP ہے

آپ کی Lighthouse رپورٹ سبز نظر آتی ہے۔ LCP ٹھیک ہے۔ CLS ٹھیک ہے۔ پیج تیزی سے لوڈ ہوتا ہے۔

پھر آپ کے حقیقی دنیا کے اسکورز گر جاتے ہیں۔ آپ کو معلوم نہیں ہوتا کہ کیوں۔

مسئلہ غالباً INP ہے۔ Interaction to Next Paint نے مارچ 2024 میں FID کی جگہ لے لی۔ FID صرف پہلی تاخیر کی پیمائش کرتا تھا۔ INP صارف کے آپ کے پیج پر رہنے کے دوران ہر انٹرایکشن کی پیمائش کرتا ہے۔ یہ سب سے سست انٹرایکشن کی رپورٹ دیتا ہے۔

INP لوڈنگ میٹرک نہیں ہے۔ یہ رسپونسیو (responsiveness) میٹرک ہے۔ یہ ایک سوال کا جواب دیتا ہے: جب آپ کلک کرتے ہیں یا ٹائپ کرتے ہیں، تو اسکرین تبدیل ہونے میں کتنا وقت لگتا ہے؟

گوگل ان کیٹیگریز (buckets) کا استعمال کرتا ہے:

ایک سائٹ ایک سیکنڈ میں لوڈ ہو سکتی ہے اور پھر بھی ناکام ہو سکتی ہے۔ تیزی سے لوڈ ہونا اور تیزی سے جواب دینا (responding) دو الگ کام ہیں۔

Lighthouse ٹولز اکثر INP کو نظر انداز کر دیتے ہیں۔ Lighthouse آپ کے بٹنوں پر کلک نہیں کرتا۔ یہ صرف ایک اندازہ فراہم کرتا ہے۔ آپ کی لیب رپورٹ سبز ہو سکتی ہے لیکن فیلڈ اسکور سرخ ہو سکتا ہے۔

اصل نمبر دیکھنے کے لیے، یہ کوڈ استعمال کریں:

import { onINP } from 'web-vitals';
onINP(function (metric) {
  console.log('INP', metric.value, metric.entries);
});

یہ سست انٹرایکشن اور مخصوص ایلیمنٹ کو لاگ (log) کرتا ہے۔

INP کے مسائل اس لیے ہوتے ہیں کیونکہ مین تھریڈ (main thread) مصروف ہوتا ہے۔ جب تک JavaScript ٹاسک ختم نہیں ہوتا، براؤزر رسپانس کو پینٹ (paint) نہیں کر سکتا۔

عام وجوہات:

طویل ٹاسکس کو توڑ کر اسے ٹھیک کریں۔ مراحل کے درمیان براؤزر کو سانس لینے کا موقع دیں:

async function onClick() {
  doUrgentPart(); 
  await yieldToMain(); 
  doExpensivePart(); 
}

Slow work شروع ہونے سے پہلے براؤزر کو UI پینٹ کرنے دینے کے لیے yieldToMain کا استعمال کریں۔

دیگر حل:

اگر آپ کے حقیقی اسکورز کم ہیں تو LCP کو دیکھنا چھوڑ دیں۔ اس کے بجائے اپنے انٹرایکشنز کی پیمائش کریں۔

Source: https://dev.to/lamas51/your-page-loads-fast-but-still-feels-slow-its-inp-not-load-time-2gkn