क्या आपका पेज तेज़ी से लोड होता है लेकिन फिर भी धीमा महसूस होता है?

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

आपकी Lighthouse रिपोर्ट ग्रीन है। आपके LCP और CLS स्कोर अच्छे दिखते हैं। आपका पेज तेज़ी से लोड होता है। फिर भी आपके रियल वर्ल्ड स्कोर गिर जाते हैं। आपको समझ नहीं आता कि ऐसा क्यों हो रहा है।

समस्या अक्सर INP की होती है।

INP का अर्थ है Interaction to Next Paint। मार्च 2024 में इसने Core Web Vital के रूप में FID की जगह ली। FID केवल आपके पहले क्लिक की देरी को मापता था। INP तब तक के हर इंटरैक्शन को मापता है जब तक कोई व्यक्ति आपके पेज का उपयोग कर रहा हो। यह सबसे धीमे इंटरैक्शन की रिपोर्ट करता है।

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

Google इन नियमों का उपयोग करता है:

• 200ms या उससे कम अच्छा है।
• 500ms से अधिक खराब है।

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

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

वास्तविक नंबर देखने के लिए, इंटरैक्शन होने पर उन्हें मापें। इस कोड का उपयोग करें:

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

यह धीमे इंटरैक्शन और उसके पीछे के एलिमेंट (element) को लॉग करता है। अब आप अंदाज़ा लगाने के बजाय वास्तविक समस्याओं को ठीक कर सकते हैं।

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

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

• भारी इवेंट हैंडलर्स (event handlers) जो हर क्लिक पर बहुत अधिक काम करते हैं।
• थर्ड-पार्टी स्क्रिप्ट जैसे चैट विजेट या एनालिटिक्स जो लंबे टास्क चलाते हैं।
• लूप में DOM को पढ़ने और लिखने से होने वाला लेआउट थ्रैश (layout thrash)।
• फ्रेमवर्क हाइड्रेशन (framework hydration) प्रक्रियाएं।

आप लंबे टास्क को तोड़कर इसे ठीक कर सकते हैं। ब्राउज़र को थोड़ा खाली समय दें (Let the browser breathe)।

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

लक्ष्य धीमे काम के शुरू होने से पहले रिस्पॉन्स को पेंट करना है।

अन्य कदम जो उठाए जा सकते हैं:

• उन स्क्रिप्ट्स को डिफ़र (defer) करें जिनकी पेज को तुरंत आवश्यकता नहीं है।
• थर्ड-पार्टी विजेट्स का ऑडिट करें।
• महंगे हैंडलर्स को डिबाउंस (debounce) करें।
• अपने DOM रीड्स और राइट्स को बैच (batch) करें।

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

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