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

ब्राउज़र सहायता

  • 96
  • 96
  • x
  • x

सोर्स

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

मैदान में

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

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

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

लैब में

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

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

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

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

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

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

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