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

पब्लिश करने की तारीख: 6 मई, 2022, पिछली बार अपडेट करने की तारीख: 9 सितंबर, 2025

Browser Support

  • Chrome: 96.
  • Edge: 96.
  • Firefox Technology Preview: supported.
  • Safari: not supported.

Source

Chrome के इस्तेमाल से जुड़े डेटा से पता चलता है कि कोई उपयोगकर्ता, पेज लोड होने के बाद उस पर 90% समय बिताता है. इसलिए, पेज के लाइफ़साइकल के दौरान रिस्पॉन्सिवनेस को ध्यान से मेज़र करना ज़रूरी है. आईएनपी मेट्रिक इसी का आकलन करती है.

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

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

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

नीचे दिए गए वीडियो में, दाईं ओर दिए गए उदाहरण में तुरंत विज़ुअल फ़ीडबैक मिलता है कि अकॉर्डियन खुल रहा है. बाईं ओर दिए गए उदाहरण में दिखाया गया है कि रिस्पॉन्सिव न होने की वजह से, उपयोगकर्ताओं को किस तरह की समस्याएं होती हैं.

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

इस गाइड में बताया गया है कि आईएनपी कैसे काम करता है और इसे कैसे मेज़र किया जाता है. साथ ही, इसे बेहतर बनाने के लिए रिसॉर्स के बारे में भी बताया गया है.

आईएनपी क्या है?

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

आईएनपी का हिसाब लगाने के तरीके के बारे में जानकारी

INP का हिसाब लगाने के लिए, पेज पर हुए सभी इंटरैक्शन को ट्रैक किया जाता है. ज़्यादातर साइटों के लिए, सबसे ज़्यादा लेटेन्सी वाले इंटरैक्शन को आईएनपी के तौर पर रिपोर्ट किया जाता है.

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

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

इंटरैक्शन, इवेंट हैंडलर का एक ग्रुप होता है. ये सभी इवेंट हैंडलर, उपयोगकर्ता के एक ही जेस्चर के दौरान ट्रिगर होते हैं. उदाहरण के लिए, टचस्क्रीन डिवाइस पर "टैप करें" इंटरैक्शन में कई इवेंट शामिल होते हैं, जैसे कि pointerup, pointerdown, और click. इंटरैक्शन को JavaScript, सीएसएस, ब्राउज़र में मौजूद कंट्रोल (जैसे कि फ़ॉर्म एलिमेंट) या इन सभी के कॉम्बिनेशन से ट्रिगर किया जा सकता है.

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

अच्छा आईएनपी स्कोर क्या होता है?

रिस्पॉन्सिवनेस मेट्रिक पर "अच्छा" या "खराब" जैसे लेबल पिन करना मुश्किल है. एक तरफ़, आपको डेवलपमेंट के ऐसे तरीकों को बढ़ावा देना है जिनसे ऐप्लिकेशन तेज़ी से काम करे. दूसरी ओर, आपको इस बात का ध्यान रखना होगा कि लोग जिन डिवाइसों का इस्तेमाल करते हैं उनकी क्षमताओं में काफ़ी अंतर होता है. इसलिए, डेवलपमेंट से जुड़ी उम्मीदें तय करते समय इस बात का ध्यान रखें.

यह पक्का करने के लिए कि उपयोगकर्ताओं को अच्छी प्रतिक्रिया मिल रही है, फ़ील्ड में रिकॉर्ड किए गए पेज लोड के 75वें पर्सेंटाइल को मेज़र करना एक अच्छा थ्रेशोल्ड है. इसे मोबाइल और डेस्कटॉप डिवाइसों के हिसाब से सेगमेंट किया जाता है:

  • अगर किसी पेज का आईएनपी 200 मिलीसेकंड या इससे कम है, तो इसका मतलब है कि पेज पर रिस्पॉन्स मिलने में कम समय लग रहा है.
  • अगर किसी पेज का आईएनपी 200 मिलीसेकंड से ज़्यादा और 500 मिलीसेकंड से कम या इसके बराबर है, तो इसका मतलब है कि पेज के रिस्पॉन्स को बेहतर बनाने की ज़रूरत है.
  • अगर किसी पेज का आईएनपी 500 मिलीसेकंड से ज़्यादा है, तो इसका मतलब है कि वह पेज तेज़ी से रिस्पॉन्स नहीं दे रहा है.
आईएनपी की अच्छी वैल्यू 200 मिलीसेकंड या इससे कम होती है. खराब वैल्यू 500 मिलीसेकंड से ज़्यादा होती है. इन दोनों के बीच की वैल्यू में सुधार करने की ज़रूरत होती है.
आईएनपी की अच्छी वैल्यू 200 मिलीसेकंड या इससे कम होती है. खराब वैल्यू 500 मिलीसेकंड से ज़्यादा होती हैं.

इंटरैक्शन में क्या-क्या शामिल होता है?

मुख्य थ्रेड पर इंटरैक्शन दिखाने वाला डायग्राम. उपयोगकर्ता, टास्क को ब्लॉक करते समय इनपुट देता है. इनपुट तब तक नहीं दिया जाता, जब तक ये टास्क पूरे नहीं हो जाते. इसके बाद, pointerup, mouseup, और click इवेंट हैंडलर चलते हैं. फिर, रेंडरिंग और पेंटिंग का काम तब तक शुरू नहीं होता, जब तक अगला फ़्रेम नहीं दिख जाता.
इंटरैक्शन की अवधि. इवेंट हैंडलर के चलने तक इनपुट में देरी होती है. ऐसा मुख्य थ्रेड पर लंबे समय तक चलने वाले टास्क जैसे फ़ैक्टर की वजह से हो सकता है. इसके बाद, इंटरैक्शन के इवेंट हैंडलर कॉलबैक चलते हैं. साथ ही, अगला फ़्रेम दिखने से पहले कुछ समय लगता है.

इंटरैक्टिविटी के लिए, अक्सर JavaScript का इस्तेमाल किया जाता है. हालांकि, ब्राउज़र ऐसे कंट्रोल के ज़रिए भी इंटरैक्टिविटी उपलब्ध कराते हैं जो JavaScript से नहीं चलते. जैसे, चेकबॉक्स, रेडियो बटन, और सीएसएस से चलने वाले कंट्रोल.

INP के लिए, सिर्फ़ इन इंटरैक्शन टाइप को ट्रैक किया जाता है:

  • माउस से क्लिक करना.
  • टचस्क्रीन वाले डिवाइस पर टैप करना.
  • फ़िज़िकल या ऑनस्क्रीन कीबोर्ड पर कोई बटन दबाना.

इंटरैक्शन, मुख्य दस्तावेज़ में या दस्तावेज़ में एम्बेड किए गए iframe में होते हैं. उदाहरण के लिए, एम्बेड किए गए वीडियो पर 'चलाएं' पर क्लिक करना. असली उपयोगकर्ताओं को यह पता नहीं चलेगा कि iframe में क्या है या क्या नहीं. इसलिए, टॉप लेवल पेज पर उपयोगकर्ता अनुभव का आकलन करने के लिए, iframe में INP की ज़रूरत होती है. JavaScript Web API के पास iframe के कॉन्टेंट का ऐक्सेस नहीं होता. इसलिए, यह CrUX और RUM के बीच अंतर के तौर पर दिख सकता है

इंटरैक्शन में कई इवेंट शामिल हो सकते हैं. उदाहरण के लिए, कीस्ट्रोक में keydown, keypress, और keyup इवेंट शामिल होते हैं. टैप इंटरैक्शन में pointerup और pointerdown इवेंट शामिल होते हैं. इंटरैक्शन के दौरान सबसे ज़्यादा समय तक चलने वाला इवेंट, इंटरैक्शन के कुल इंतज़ार के समय में योगदान देता है.

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

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

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

आईएनपी, फ़र्स्ट इनपुट डिले (एफ़आईडी) से किस तरह अलग है?

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

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

अगर कोई आईएनपी वैल्यू रिपोर्ट नहीं की जाती है, तो क्या होगा?

ऐसा हो सकता है कि किसी पेज के लिए, आईएनपी की कोई वैल्यू न मिले. ऐसा कई वजहों से हो सकता है. इनमें ये वजहें शामिल हैं:

  • पेज लोड हो गया, लेकिन उपयोगकर्ता ने कभी क्लिक नहीं किया, टैप नहीं किया या कीबोर्ड पर कोई बटन नहीं दबाया.
  • पेज लोड हो गया, लेकिन उपयोगकर्ता ने ऐसे जेस्चर का इस्तेमाल करके उससे इंटरैक्ट किया जिन्हें मेज़र नहीं किया जाता. जैसे, स्क्रोल करना या एलिमेंट पर कर्सर घुमाना.
  • पेज को ऐसे बॉट से ऐक्सेस किया जा रहा है जिसे पेज के साथ इंटरैक्ट करने के लिए स्क्रिप्ट नहीं किया गया है. जैसे, सर्च क्रॉलर या हेडलेस ब्राउज़र.

आईएनपी को मेज़र करने का तरीका

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

फ़ील्ड में

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

अगर आपकी वेबसाइट, Chrome उपयोगकर्ता अनुभव रिपोर्ट (CrUX) में शामिल होने की ज़रूरी शर्तें पूरी करती है, तो आपको आईएनपी के लिए फ़ील्ड डेटा PageSpeed Insights में CrUX के ज़रिए (और अन्य Core Web Vitals) तुरंत मिल सकता है. कम से कम, आपको अपनी वेबसाइट के INP की जानकारी ओरिजिन लेवल पर मिल सकती है. हालांकि, कुछ मामलों में आपको यूआरएल लेवल का डेटा भी मिल सकता है.

हालांकि, CrUX से यह पता चल सकता है कि कोई समस्या है या नहीं. इससे यह नहीं पता चलता कि समस्या किस वजह से हुई है. आरयूएम की मदद से, आपको उन पेजों, उपयोगकर्ताओं या उपयोगकर्ता इंटरैक्शन के बारे में ज़्यादा जानकारी मिल सकती है जिनमें रिस्पॉन्सिवनेस से जुड़ी समस्याएं आ रही हैं. आईएनपी को अलग-अलग इंटरैक्शन के लिए एट्रिब्यूट करने से, अनुमान लगाने और समय बर्बाद करने से बचा जा सकता है.

लैब में

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

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

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

JavaScript में INP को मेज़र करना

JavaScript में आईएनपी को मेज़र करने के लिए, आपको सभी इंटरैक्शन के लिए इवेंट टाइमिंग मेज़र करनी होगी. इसके बाद, पेज अनलोड होने पर इन सभी इंटरैक्शन के लिए 98वां पर्सेंटाइल लेना होगा. web vitals JavaScript लाइब्रेरी का सोर्स कोड देखें. इसमें INP के कैलकुलेट होने के तरीके के बारे में बताया गया है.

ज़्यादातर मामलों में, पेज अनलोड होने के समय की मौजूदा आईएनपी वैल्यू, उस पेज की फ़ाइनल आईएनपी वैल्यू होती है. हालांकि, कुछ अहम अपवाद भी हैं, जिनके बारे में अगले सेक्शन में बताया गया है. web vitals JavaScript लाइब्रेरी, वेब एपीआई की सीमाओं के अंदर इन बातों का ज़्यादा से ज़्यादा ध्यान रखती है.

मेट्रिक और एपीआई के बीच अंतर

  • event 104 मिलीसेकंड से कम समय वाली एंट्री, परफ़ॉर्मेंस ऑब्ज़र्वर का इस्तेमाल करके डिफ़ॉल्ट रूप से रिपोर्ट नहीं की जाती हैं. durationThreshold पैरामीटर का इस्तेमाल करके परफ़ॉर्मेंस ऑब्ज़र्वर को रजिस्टर करते समय, इस डिफ़ॉल्ट वैल्यू को बदला जा सकता है. हालांकि, इसकी कम से कम वैल्यू 16 मिलीसेकंड होती है. इस वजह से, हमारा सुझाव है कि आप first-input एंट्री को भी देखें. यह भी इवेंट टाइमिंग एंट्री है. हालांकि, इसकी अवधि durationThreshold से कम होने पर भी इसे देखा जा सकता है. इससे यह पक्का करने में मदद मिलती है कि इंटरैक्शन वाले पेजों के लिए, हमेशा कोई न कोई INP वैल्यू रिपोर्ट की जाए.
  • तकनीकी तौर पर, पर्सेंटाइल का सटीक हिसाब लगाने के लिए, सभी सैंपल को मेमोरी में सेव रखना ज़रूरी होता है. इसमें ज़्यादा खर्च आ सकता है. हालांकि, सबसे खराब परफ़ॉर्म करने वाले N इंटरैक्शन की छोटी सूची बनाकर, पर्सेंटाइल का अनुमान लगाया जा सकता है. खास तौर पर, p98 जैसे बहुत ज़्यादा पर्सेंटाइल का अनुमान लगाया जा सकता है. आम तौर पर, 10 को चुना जाता है.
  • अगर किसी पेज को बैक/फ़ॉरवर्ड कैश मेमोरी से वापस लाया जाता है, तो उसकी आईएनपी वैल्यू को शून्य पर रीसेट कर देना चाहिए. ऐसा इसलिए, क्योंकि उपयोगकर्ता इसे पेज की अलग विज़िट के तौर पर देखते हैं.
  • एपीआई, उन इंटरैक्शन के लिए event एंट्री की रिपोर्ट नहीं करता जो iframe में होते हैं. हालांकि, मेट्रिक ऐसा करती है, क्योंकि ये पेज के उपयोगकर्ता अनुभव का हिस्सा होते हैं. यह CrUX और RUM के बीच अंतर के तौर पर दिख सकता है. आईएनपी को सही तरीके से मेज़र करने के लिए, आपको इन पर ध्यान देना चाहिए. सब-फ़्रेम, एपीआई का इस्तेमाल करके पैरंट फ़्रेम को अपनी event-timing एंट्री की जानकारी दे सकते हैं.

इन अपवादों के अलावा, INP को समझना थोड़ा मुश्किल है. ऐसा इसलिए है, क्योंकि यह किसी पेज के पूरे लाइफ़स्पैन को मेज़र करता है:

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

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

इन सभी मामलों को खुद याद रखने और समझने के बजाय, डेवलपर web-vitals JavaScript लाइब्रेरी का इस्तेमाल करके INP को मेज़र कर सकते हैं. इसमें ऊपर बताई गई सभी बातों का ध्यान रखा जाता है. हालांकि, इसमें iframe के मामले को शामिल नहीं किया जाता:

import {onINP} from 'web-vitals';

// Measure and log INP in all situations
// where it needs to be reported.
onINP(console.log);

आईएनपी को बेहतर बनाने का तरीका

आईएनपी को ऑप्टिमाइज़ करने के बारे में गाइड का कलेक्शन उपलब्ध है. इससे आपको फ़ील्ड में धीमे इंटरैक्शन की पहचान करने और लैब डेटा का इस्तेमाल करके, उनकी वजहों का पता लगाने और उन्हें ऑप्टिमाइज़ करने में मदद मिलेगी.

बदलावों का लॉग

कभी-कभी, मेट्रिक मेज़र करने के लिए इस्तेमाल किए जाने वाले एपीआई में बग मिलते हैं. साथ ही, कभी-कभी मेट्रिक की परिभाषाओं में भी बग मिलते हैं. इस वजह से, कभी-कभी बदलाव करने पड़ते हैं. ये बदलाव, आपकी इंटरनल रिपोर्ट और डैशबोर्ड में सुधार या गिरावट के तौर पर दिख सकते हैं.

इन मेट्रिक को मैनेज करने में आपकी मदद करने के लिए, इनके लागू करने के तरीके या परिभाषा में होने वाले सभी बदलाव, इस बदलाव के बारे में जानकारी देने वाले लॉग में दिखेंगे.

अगर आपको इन मेट्रिक के बारे में कोई सुझाव/राय देनी है या शिकायत करनी है, तो web-vitals-feedback Google ग्रुप में जाकर ऐसा करें.

अपने ज्ञान को परखें

आईएनपी मेट्रिक का मुख्य लक्ष्य क्या है?

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

आईएनपी का हिसाब लगाने के लिए, इनमें से किस तरह के इंटरैक्शन देखे जाते हैं? (लागू होने वाले सभी विकल्प चुनें.)

माउस से क्लिक करना.
सही!
माउस के पहिए या ट्रैकपैड से पेज को स्क्रोल करना.
गलत - आईएनपी, स्क्रोलिंग को ध्यान में नहीं रखता
टचस्क्रीन पर टैप करना.
सही!
माउस के कर्सर को एलिमेंट पर घुमाएं.
गलत - आईएनपी, होवर करने की सुविधा को ध्यान में नहीं रखता
कीबोर्ड पर कोई बटन दबाना.
सही!
पेज को ज़ूम इन या ज़ूम आउट करना.
गलत - आईएनपी, ज़ूम करने की सुविधा को ध्यान में नहीं रखता

आईएनपी के लिए, इंटरैक्शन की "लेटेंसी" को कैसे तय किया जाता है?

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

आईएनपी और एफ़आईडी में क्या अंतर है?

आईएनपी, किसी पेज का पहला कॉन्टेंट दिखने में लगने वाले समय को मापता है. वहीं, एफ़आईडी, उपयोगकर्ता के इनपुट पर रिस्पॉन्स मिलने में लगने वाले समय को मापता है.
गलत - इसमें फ़र्स्ट कॉन्टेंटफ़ुल पेंट के बारे में बताया गया है, न कि आईएनपी के बारे में
आईएनपी, सभी इंटरैक्शन की पूरी अवधि को ध्यान में रखता है. वहीं, एफ़आईडी सिर्फ़ पहले इंटरैक्शन के इनपुट डिले को मापता है.
सही!
आईएनपी और एफ़आईडी, अलग-अलग टाइमस्टैंप को मेज़र करते हैं. ये टाइमस्टैंप बताते हैं कि कोई पेज कब इंटरैक्टिव हुआ.
गलत - आईएनपी और एफ़आईडी, इस बात का मेज़रमेंट करते हैं कि इंटरैक्शन होने के समय से कोई फ़र्क़ नहीं पड़ता, पेज कितनी तेज़ी से इंटरैक्शन का जवाब देता है
इनमें कोई अंतर नहीं है. INP और FID, एक ही मेट्रिक के दो अलग-अलग नाम हैं.
गलत - इन दोनों शब्दों की अलग-अलग परिभाषाएं हैं

किन स्थितियों में, PageSpeed Insights जैसे टूल में किसी पेज के लिए आईएनपी डेटा उपलब्ध नहीं हो सकता?

पेज पर, परफ़ॉर्मेंस मेज़रमेंट की ऐसी कस्टम लाइब्रेरी का इस्तेमाल किया जा रहा है जो आईएनपी डेटा की रिपोर्ट नहीं करती है.
गलत - वेब प्लैटफ़ॉर्म एपीआई का इस्तेमाल करके, आईएनपी को अपने-आप मेज़र किया जाता है. यह कस्टम लाइब्रेरी के ज़रिए, पेजों की परफ़ॉर्मेंस की खुद से रिपोर्टिंग करने पर निर्भर नहीं करता.
CrUX डेटासेट में, Chrome का इस्तेमाल करने वाले लोगों से मिले इंटरैक्शन के डेटा की कमी है. इसलिए, INP की सही वैल्यू का हिसाब नहीं लगाया जा सकता.
सही!
उपयोगकर्ताओं ने सिर्फ़ स्क्रोल करके और कर्सर घुमाकर पेज से इंटरैक्ट किया. इन्हें आईएनपी के लिए नहीं माना जाता.
सही!
इस पेज को ऐसे फ़्रेमवर्क का इस्तेमाल करके बनाया गया है जो INP के लिए अपने-आप ऑप्टिमाइज़ हो जाता है. इसलिए, इसकी शिकायत करने की ज़रूरत नहीं है.
गलत - फ़्रेमवर्क, आईएनपी को बेहतर बनाने में मदद कर सकते हैं. हालांकि, अगर डेटा उपलब्ध है, तो मेट्रिक अब भी काम की है और इसकी रिपोर्ट की जाती है

लैब एनवायरमेंट में, धीमे इंटरैक्शन को फिर से बनाने के लिए सबसे असरदार रणनीति क्या है?

चुनौतीपूर्ण स्थितियां बनाने के लिए, धीमे और भरोसेमंद न होने वाले नेटवर्क कनेक्शन के साथ हाई-एंड डिवाइस का सिम्युलेशन करना.
गलत - नेटवर्क की वजह से भी ऐसा हो सकता है, लेकिन डिवाइस की क्षमताओं की वजह से इंटरैक्शन धीमे होने की संभावना ज़्यादा होती है
पेज के पूरी तरह से लोड होने और कुछ समय तक कोई गतिविधि न होने के बाद ही इंटरैक्शन की जांच की जाती है.
गलत - ऐसा हो सकता है कि लोड होने के दौरान धीमे इंटरैक्शन छूट जाएं
पेज लोड होने के दौरान उससे इंटरैक्ट करना और उपयोगकर्ता के सामान्य फ़्लो को फ़ॉलो करना, ताकि संभावित समस्याओं का पता लगाया जा सके.
सही!
ऐसे मुश्किल इंटरैक्शन पर फ़ोकस करना जो ज़्यादातर उपयोगकर्ताओं को शायद ही कभी दिखें.
गलत - सामान्य यूज़र फ़्लो, आईएनपी से जुड़ी सामान्य समस्याओं की पहचान करने के लिए ज़्यादा काम के होते हैं

इस क्विज़ को Gemini 1.5 ने जनरेट किया है और इसकी समीक्षा मैन्युअल तरीके से की गई है. सुझाव/राय दें या शिकायत करें