इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी)

Jeremy Wagner

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

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

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

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

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

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

INP क्या है?

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

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

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

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

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

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

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

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

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

INP के मकसद के मुताबिक, सिर्फ़ इन तरह के इंटरैक्शन पर नज़र रखी जाती है:

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

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

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

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

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

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

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

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

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

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

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

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

फ़ील्ड में

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

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

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

लैब में

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

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

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

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

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

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

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

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

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

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