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

Jeremy Wagner

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

आईएनपी और फ़र्स्ट इनपुट डिले (एफ़आईडी) में क्या अंतर है?

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

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

आईएनपी की कोई वैल्यू रिपोर्ट न करने पर क्या होता है?

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

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

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

आईएनपी को कई तरह के टूल की मदद से फ़ील्ड और लैब, दोनों में मापा जा सकता है.

मैदान में

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

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

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

लैब में

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

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

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

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

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

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

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

देखें कि आपको कितना ज्ञान है