आपकी पेज तेज़ी से लोड होती है लेकिन धीमी महसूस होती है? यह INP है

आपकी Lighthouse रिपोर्ट हरी दिखती है। LCP ठीक है। CLS ठीक है। पेज तेज़ी से लोड होता है।

फिर आपके रियल-वर्ल्ड स्कोर गिर जाते हैं। आपको पता नहीं चलता कि क्यों।

समस्या संभवतः INP है। Interaction to Next Paint ने मार्च 2024 में FID की जगह ली। FID केवल पहले विलंब (delay) को मापता था। INP उस हर इंटरैक्शन को मापता है जब तक उपयोगकर्ता आपके पेज पर रहता है। यह सबसे धीमे इंटरैक्शन की रिपोर्ट करता है।

INP लोडिंग मेट्रिक नहीं है। यह रिस्पॉन्सिवनेस (responsiveness) मेट्रिक है। यह एक सवाल का जवाब देता है: जब आप क्लिक करते हैं या टाइप करते हैं, तो स्क्रीन बदलने में कितना समय लगता है?

Google इन श्रेणियों (buckets) का उपयोग करता है:

एक साइट एक सेकंड में लोड हो सकती है और फिर भी फेल हो सकती है। तेज़ी से लोड होना और तेज़ी से रिस्पॉन्स देना, दोनों अलग-अलग काम हैं।

Lighthouse टूल्स अक्सर INP को मिस कर देते हैं। Lighthouse आपके बटनों पर क्लिक नहीं करता है। यह केवल एक अनुमान प्रदान करता है। आपके पास एक ग्रीन लैब रिपोर्ट और एक रेड फील्ड स्कोर हो सकता है।

असली नंबर देखने के लिए, इस कोड का उपयोग करें:

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

यह धीमे इंटरैक्शन और विशिष्ट एलिमेंट (element) को लॉग करता है।

INP की समस्याएँ इसलिए होती हैं क्योंकि मेन थ्रेड (main thread) व्यस्त होता है। जब तक एक JavaScript टास्क पूरा नहीं हो जाता, ब्राउज़र रिस्पॉन्स पेंट नहीं कर सकता।

सामान्य कारण:

लंबे टास्क को तोड़कर इसे ठीक करें। स्टेप्स के बीच ब्राउज़र को सांस लेने दें:

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

धीमे काम के शुरू होने से पहले ब्राउज़र को UI पेंट करने देने के लिए yieldToMain का उपयोग करें।

अन्य समाधान:

यदि आपके रियल स्कोर कम हैं, तो LCP को देखना बंद करें। इसके बजाय अपने इंटरैक्शन को मापें।

स्रोत: https://dev.to/lamas51/your-page-loads-fast-but-still-feels-slow-its-inp-not-load-time-2gkn