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

Jeremy Wagner

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

आईएनपी के मकसद के तौर पर, सिर्फ़ इस तरह के इंटरैक्शन देखे जाते हैं:

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

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

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

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

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

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

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

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

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

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

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

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

फ़ील्ड में

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

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

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

लैब में

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

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

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

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

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

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

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

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

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

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