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

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

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

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

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

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

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

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

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

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

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

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

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

फ़ील्ड में

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

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

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

लैब में

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

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

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

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

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

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

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

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

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

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