पेज के रिस्पॉन्स में लगने वाले समय (आईएनपी) को समझना

1. परिचय

पेज के रिस्पॉन्स में लगने वाला समय (आईएनपी) के बारे में जानने के लिए, इंटरैक्टिव डेमो और कोडलैब.

ज़रूरी शर्तें

• एचटीएमएल और JavaScript डेवलपमेंट की जानकारी.
• सुझाया गया: आईएनपी से जुड़ा दस्तावेज़ पढ़ें.

आपको ये सब सीखने को मिलेगा

• उपयोगकर्ता के इंटरैक्शन और उन इंटरैक्शन को हैंडल करने के तरीके से, पेज के रिस्पॉन्सिव होने पर क्या असर पड़ता है.
• उपयोगकर्ता को बेहतर अनुभव देने के लिए, देरी को कैसे कम किया जाए और इसे कैसे खत्म किया जाए.

आपको इन चीज़ों की ज़रूरत पड़ेगी

• ऐसा कंप्यूटर जिसमें GitHub से कोड क्लोन करने और npm कमांड चलाने की सुविधा हो.
• टेक्स्ट एडिटर.
• सभी इंटरैक्शन मेज़रमेंट के काम करने के लिए, Chrome का नया वर्शन.

2. सेट अप करें

कोड पाना और उसे लागू करना

यह कोड, web-vitals-codelabs रिपॉज़िटरी में मौजूद है.

1. अपने टर्मिनल में रेपो को क्लोन करें: git clone https://github.com/GoogleChromeLabs/web-vitals-codelabs.git
2. क्लोन की गई डायरेक्ट्री में जाएं: cd web-vitals-codelabs/understanding-inp
3. डिपेंडेंसी इंस्टॉल करें: npm ci
4. वेब सर्वर शुरू करें: npm run start
5. अपने ब्राउज़र में http://localhost:5173/understanding-inp/ पर जाएं

ऐप्लिकेशन की खास जानकारी

पेज के सबसे ऊपर, स्कोर काउंटर और बढ़ाएं बटन मौजूद है. यह रिऐक्टिविटी और रिस्पॉन्सिवनेस का क्लासिक डेमो है!

बटन के नीचे, चार मेज़रमेंट दिए गए हैं:

• आईएनपी: मौजूदा आईएनपी स्कोर, जो आम तौर पर सबसे खराब इंटरैक्शन होता है.
• इंटरैक्शन: सबसे हाल के इंटरैक्शन का स्कोर.
• एफ़पीएस: पेज के मुख्य थ्रेड फ़्रेम-प्रति-सेकंड.
• टाइमर: यह एक टाइमर ऐनिमेशन है, जो जंक को विज़ुअलाइज़ करने में मदद करता है.

इंटरैक्शन को मेज़र करने के लिए, फ़्रेम प्रति सेकंड (एफ़पीएस) और टाइमर की एंट्री ज़रूरी नहीं हैं. इन्हें सिर्फ़ इसलिए जोड़ा गया है, ताकि रिस्पॉन्सिवनेस को विज़ुअलाइज़ करना थोड़ा आसान हो जाए.

इसे आज़माएं

बढ़ाएं बटन पर क्लिक करके देखें कि स्कोर कैसे बढ़ता है. क्या हर इंक्रीमेंट के साथ आईएनपी और इंटरैक्शन की वैल्यू बदलती हैं?

आईएनपी से पता चलता है कि उपयोगकर्ता के इंटरैक्ट करने से लेकर, पेज पर अपडेट रेंडर होने तक कितना समय लगता है.

3. Chrome DevTools की मदद से इंटरैक्शन मेज़र करना

DevTools कोज़्यादा टूल > डेवलपर टूल मेन्यू से खोलें. इसके लिए, पेज पर राइट क्लिक करके जांच करें को चुनें या कीबोर्ड शॉर्टकट का इस्तेमाल करें.

परफ़ॉर्मेंस पैनल पर जाएं. इसका इस्तेमाल इंटरैक्शन मेज़र करने के लिए किया जाता है.

इसके बाद, परफ़ॉर्मेंस पैनल में इंटरैक्शन कैप्चर करें.

1. 'रिकॉर्ड करें' दबाएं.
2. पेज के साथ इंटरैक्ट करें (बढ़ाएं बटन दबाएं).
3. रिकॉर्डिंग बंद करो.

इसके बाद, आपको टाइमलाइन में इंटरैक्शन ट्रैक दिखेगा. बाईं ओर मौजूद त्रिकोण पर क्लिक करके इसे बड़ा करें.

दो इंटरैक्शन दिखते हैं. स्क्रोल करके या W बटन को दबाकर, दूसरे फ़्रेम को ज़ूम इन करें.

इंटरैक्शन पर कर्सर घुमाने से पता चलता है कि इंटरैक्शन तेज़ी से हुआ. इसमें प्रोसेसिंग में लगने वाला समय नहीं लगा. साथ ही, इनपुट में देरी और प्रेज़ेंटेशन में देरी में कम समय लगा. हालांकि, इनकी सटीक अवधि आपकी मशीन की स्पीड पर निर्भर करेगी.

4. लंबे समय तक चलने वाले इवेंट लिसनर

index.js फ़ाइल खोलें और इवेंट लिसनर में मौजूद blockFor फ़ंक्शन से टिप्पणी हटाएं.

पूरा कोड देखें: click_block.html

button.addEventListener('click', () => {
  blockFor(1000);
  score.incrementAndUpdateUI();
});

फ़ाइल सेव करें. सर्वर को बदलाव दिखेगा और वह आपके लिए पेज को रीफ़्रेश करेगा.

पेज के साथ फिर से इंटरैक्ट करके देखें. अब इंटरैक्शन काफ़ी धीमे हो जाएंगे.

परफ़ॉर्मेंस ट्रेस

परफ़ॉर्मेंस पैनल में एक और रिकॉर्डिंग लें, ताकि यह देखा जा सके कि यह वहां कैसा दिखता है.

पहले यह इंटरैक्शन कुछ ही समय में हो जाता था, लेकिन अब इसमें पूरा एक सेकंड लगता है.

इंटरैक्शन पर कर्सर घुमाने पर, आपको दिखेगा कि ज़्यादातर समय "प्रोसेसिंग की अवधि" में लगता है. यह वह समय होता है जो इवेंट लिसनर कॉलबैक को पूरा करने में लगता है. ब्लॉक करने वाला blockFor कॉल, इवेंट लिस्नर के अंदर होता है. इसलिए, समय वहीं लगता है.

5. एक्सपेरिमेंट: प्रोसेसिंग की अवधि

इवेंट-लिसनर के काम को फिर से व्यवस्थित करने के तरीकों को आज़माएं. इससे INP पर पड़ने वाले असर को देखा जा सकता है.

पहले यूज़र इंटरफ़ेस (यूआई) को अपडेट करें

अगर JS कॉल का क्रम बदल दिया जाए, तो क्या होगा? जैसे, पहले यूआई को अपडेट करना और फिर ब्लॉक करना.

पूरा कोड देखें: ui_first.html

button.addEventListener('click', () => {
  score.incrementAndUpdateUI();
  blockFor(1000);
});

क्या आपने देखा कि यूज़र इंटरफ़ेस (यूआई) पहले दिख रहा था? क्या क्रम से INP स्कोर पर असर पड़ता है?

ट्रेस लेकर, इंटरैक्शन की जांच करें. इससे पता चलेगा कि कोई अंतर है या नहीं.

अलग-अलग लिसनर

अगर काम को किसी दूसरे इवेंट लिसनर में ले जाया जाए, तो क्या होगा? एक इवेंट लिसनर में यूज़र इंटरफ़ेस (यूआई) को अपडेट करें और दूसरे लिसनर से पेज को ब्लॉक करें.

पूरा कोड देखें: two_click.html

button.addEventListener('click', () => {
  score.incrementAndUpdateUI();
});

button.addEventListener('click', () => {
  blockFor(1000);
});

अब यह परफ़ॉर्मेंस पैनल में कैसा दिखता है?

अलग-अलग तरह के इवेंट

ज़्यादातर इंटरैक्शन से कई तरह के इवेंट ट्रिगर होंगे. जैसे, पॉइंटर या की इवेंट से लेकर होवर, फ़ोकस/ब्लर, और सिंथेटिक इवेंट, जैसे कि beforechange और beforeinput.

कई असली पेजों पर, अलग-अलग इवेंट के लिए लिसनर होते हैं.

अगर इवेंट लिसनर के लिए इवेंट टाइप बदल दिए जाएं, तो क्या होगा? उदाहरण के लिए, क्या आपको click इवेंट लिसनर में से किसी एक को pointerup या mouseup से बदलना है?

पूरा कोड देखें: diff_handlers.html

button.addEventListener('click', () => {
  score.incrementAndUpdateUI();
});

button.addEventListener('pointerup', () => {
  blockFor(1000);
});

यूज़र इंटरफ़ेस (यूआई) में कोई बदलाव नहीं किया गया

अगर इवेंट लिसनर से यूज़र इंटरफ़ेस (यूआई) को अपडेट करने के लिए कॉल को हटा दिया जाता है, तो क्या होगा?

पूरा कोड देखें: no_ui.html

button.addEventListener('click', () => {
  blockFor(1000);
  // score.incrementAndUpdateUI();
});

6. एक्सपेरिमेंट के नतीजों को प्रोसेस होने में लगने वाला समय

परफ़ॉर्मेंस ट्रेस: पहले यूज़र इंटरफ़ेस (यूआई) अपडेट करें

पूरा कोड देखें: ui_first.html

button.addEventListener('click', () => {
  score.incrementAndUpdateUI();
  blockFor(1000);
});

बटन पर क्लिक करने की परफ़ॉर्मेंस पैनल रिकॉर्डिंग देखने पर, आपको पता चलेगा कि नतीजे नहीं बदले. ब्लॉकिंग कोड से पहले यूज़र इंटरफ़ेस (यूआई) अपडेट ट्रिगर किया गया था. हालांकि, ब्राउज़र ने इवेंट लिसनर के पूरा होने तक, स्क्रीन पर पेंट किए गए कॉन्टेंट को अपडेट नहीं किया. इसका मतलब है कि इंटरैक्शन को पूरा होने में अब भी एक सेकंड से ज़्यादा समय लगा.

परफ़ॉर्मेंस ट्रेस: अलग-अलग लिसनर

पूरा कोड देखें: two_click.html

button.addEventListener('click', () => {
  score.incrementAndUpdateUI();
});

button.addEventListener('click', () => {
  blockFor(1000);
});

इनमें कोई अंतर नहीं है. इंटरैक्शन में अब भी एक सेकंड लगता है.

क्लिक इंटरैक्शन को ज़ूम इन करने पर, आपको दिखेगा कि click इवेंट के नतीजे के तौर पर, दो अलग-अलग फ़ंक्शन कॉल किए जा रहे हैं.

जैसा कि उम्मीद थी, पहला टास्क यानी यूज़र इंटरफ़ेस (यूआई) को अपडेट करने में बहुत कम समय लगता है. वहीं, दूसरे टास्क में पूरा एक सेकंड लगता है. हालांकि, इन दोनों के असर को मिलाकर, असली उपयोगकर्ता को इंटरैक्शन में लगने वाला समय उतना ही मिलता है.

परफ़ॉर्मेंस ट्रेस: अलग-अलग तरह के इवेंट

button.addEventListener('click', () => {
  score.incrementAndUpdateUI();
});

button.addEventListener('pointerup', () => {
  blockFor(1000);
});

ये नतीजे काफ़ी हद तक एक जैसे हैं. इंटरैक्शन में अब भी एक सेकंड लगता है. फ़र्क़ सिर्फ़ इतना है कि यूज़र इंटरफ़ेस (यूआई) को अपडेट करने वाला छोटा click लिसनर, अब ब्लॉक करने वाले pointerup लिसनर के बाद चलता है.

परफ़ॉर्मेंस ट्रेस: यूज़र इंटरफ़ेस (यूआई) अपडेट नहीं किया गया

पूरा कोड देखें: no_ui.html

button.addEventListener('click', () => {
  blockFor(1000);
  // score.incrementAndUpdateUI();
});

• स्कोर अपडेट नहीं होता, लेकिन पेज अब भी अपडेट होता है!
• ऐनिमेशन, सीएसएस इफ़ेक्ट, डिफ़ॉल्ट वेब कॉम्पोनेंट ऐक्शन (फ़ॉर्म इनपुट), टेक्स्ट एंट्री, और टेक्स्ट हाइलाइटिंग, ये सभी अपडेट होते रहते हैं.

इस मामले में, बटन पर क्लिक करने पर वह चालू हो जाता है और फिर से बंद हो जाता है. इसके लिए, ब्राउज़र को पेंट करने की ज़रूरत होती है. इसका मतलब है कि अब भी आईएनपी मौजूद है.

इवेंट लिसनर ने मुख्य थ्रेड को एक सेकंड के लिए ब्लॉक कर दिया था. इससे पेज को पेंट होने से रोका गया. इसलिए, इंटरैक्शन में अब भी एक सेकंड लगता है.

परफ़ॉर्मेंस पैनल की रिकॉर्डिंग में, इंटरैक्शन को पहले की तरह ही दिखाया गया है.

सीखने लायक अहम बातें

किसी भी इवेंट लिसनर में चल रहा कोई भी कोड, इंटरैक्शन में देरी करेगा.

• इसमें अलग-अलग स्क्रिप्ट और फ़्रेमवर्क से रजिस्टर किए गए लिसनर शामिल होते हैं. साथ ही, लिसनर में चलने वाला लाइब्रेरी कोड भी शामिल होता है. जैसे, स्टेट अपडेट, जो कॉम्पोनेंट रेंडर को ट्रिगर करता है.
• सिर्फ़ आपका कोड ही नहीं, बल्कि तीसरे पक्ष की सभी स्क्रिप्ट भी.

यह एक सामान्य समस्या है!

आखिर में: सिर्फ़ इसलिए कि आपका कोड पेंट को ट्रिगर नहीं करता, इसका मतलब यह नहीं है कि पेंट को पूरा करने के लिए, इवेंट लिसनर के धीमे होने का इंतज़ार नहीं किया जाएगा.

7. Experiment: input delay

इवेंट लिसनर के बाहर लंबे समय तक चलने वाले कोड के बारे में क्या? उदाहरण के लिए:

• अगर आपने देर से लोड होने वाला <script> इस्तेमाल किया है, तो हो सकता है कि वह लोड होने के दौरान पेज को अचानक ब्लॉक कर दे.
• क्या कोई एपीआई कॉल, जैसे कि setInterval, पेज को समय-समय पर ब्लॉक करता है?

इवेंट लिसनर से blockFor को हटाकर, इसे setInterval() में जोड़ें:

पूरा कोड देखें: input_delay.html

setInterval(() => {
  blockFor(1000);
}, 3000);


button.addEventListener('click', () => {
  score.incrementAndUpdateUI();
});

इस दिन क्या होगा?

8. इनपुट में देरी से जुड़े एक्सपेरिमेंट के नतीजे

पूरा कोड देखें: input_delay.html

setInterval(() => {
  blockFor(1000);
}, 3000);


button.addEventListener('click', () => {
  score.incrementAndUpdateUI();
});

अगर setInterval ब्लॉकिंग टास्क के दौरान बटन क्लिक रिकॉर्ड किया जाता है, तो इंटरैक्शन लंबे समय तक चलता है. भले ही, इंटरैक्शन में कोई ब्लॉकिंग काम न किया जा रहा हो!

लंबे समय तक चलने वाले इन कामों को अक्सर लॉन्ग टास्क कहा जाता है.

DevTools में इंटरैक्शन पर कर्सर घुमाने पर, आपको दिखेगा कि इंटरैक्शन का समय अब मुख्य रूप से इनपुट में हुई देरी की वजह से है, न कि प्रोसेसिंग में लगने वाले समय की वजह से.

ध्यान दें कि इससे इंटरैक्शन पर हमेशा असर नहीं पड़ता! अगर टास्क के चालू होने पर क्लिक नहीं किया जाता है, तो हो सकता है कि आपको इनाम मिल जाए. इस तरह की "रैंडम" छींकों को डीबग करना मुश्किल हो सकता है, क्योंकि इनसे कभी-कभी ही समस्याएं होती हैं.

इन समस्याओं का पता लगाने का एक तरीका, लंबे समय तक चलने वाले टास्क (या लंबे ऐनिमेशन फ़्रेम) और टोटल ब्लॉकिंग टाइम को मेज़र करना है.

9. प्रज़ेंटेशन धीरे-धीरे दिख रहा है

अब तक, हमने इनपुट डिले या इवेंट लिसनर के ज़रिए JavaScript की परफ़ॉर्मेंस देखी है. हालांकि, रेंडरिंग नेक्स्ट पेंट पर और किन चीज़ों का असर पड़ता है?

ठीक है, पेज को महंगे इफ़ेक्ट के साथ अपडेट किया जा रहा है!

पेज अपडेट होने में भले ही कम समय लगे, लेकिन ब्राउज़र को उन्हें रेंडर करने में ज़्यादा समय लग सकता है!

मुख्य थ्रेड पर:

• ऐसे यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क जिन्हें स्थिति में बदलाव होने के बाद अपडेट रेंडर करने की ज़रूरत होती है
• डीओएम में बदलाव करने या कई महंगे सीएसएस क्वेरी सिलेक्टर को टॉगल करने से, स्टाइल, लेआउट, और पेंट से जुड़ी कई कार्रवाइयां ट्रिगर हो सकती हैं.

मुख्य थ्रेड से अलग:

• जीपीयू इफ़ेक्ट को बेहतर बनाने के लिए सीएसएस का इस्तेमाल करना
• बहुत बड़ी और हाई रिज़ॉल्यूशन वाली इमेज जोड़ना
• मुश्किल सीन बनाने के लिए SVG/Canvas का इस्तेमाल करना

RenderingNG