Chrome के इस्तेमाल के बारे में डेटा से पता चलता है कि उपयोगकर्ता का 90% समय, पेज लोड होने के बाद खर्च होता है. इसलिए, पेज के पूरे लाइफ़साइकल के दौरान, पेज लोड होने और उसके जवाब देने में लगने वाले समय को सावधानी से मापना ज़रूरी है. आईएनपी मेट्रिक, इसका आकलन करती है.
बेहतर रिस्पॉन्स का मतलब है कि कोई पेज, उसके साथ किए गए इंटरैक्शन पर तुरंत जवाब देता है. जब कोई पेज किसी इंटरैक्शन का जवाब देता है, तो नतीजों में विज़ुअल फ़ीडबैक मिलता है. ब्राउज़र इसे अगले फ़्रेम में दिखाता है. विज़ुअल फ़ीडबैक से आपको यह पता चलता है कि, उदाहरण के लिए, ऑनलाइन शॉपिंग कार्ट में जोड़ा गया कोई आइटम वाकई में जोड़ा जा रहा है या नहीं, क्या मोबाइल नेविगेशन मेन्यू खोला गया है, अगर लॉगिन फ़ॉर्म की सामग्री की पुष्टि सर्वर से की जा रही है और यह प्रक्रिया इसी तरह की जा सकती है.
कुछ इंटरैक्शन स्वाभाविक रूप से अन्य की तुलना में ज़्यादा समय लेंगे, लेकिन विशेष रूप से जटिल इंटरैक्शन के लिए, उपयोगकर्ता को कुछ शुरुआती विज़ुअल फ़ीडबैक तुरंत संकेत के रूप में पेश करना ज़रूरी है कि कुछ हो रहा है. ऐसा करने के लिए, अगली बार पेंट होने में लगने वाला समय सबसे कम है. इसलिए, INP का मकसद इंटरैक्शन के आखिर में होने वाले सभी असर (जैसे कि नेटवर्क फ़ेच और अन्य एसिंक्रोनस ऑपरेशन से यूज़र इंटरफ़ेस (यूआई) अपडेट) का आकलन करना नहीं है, बल्कि next पेंट को ब्लॉक किए जाने के समय को मेज़र करना है. विज़ुअल फ़ीडबैक में देरी करने से, उपयोगकर्ताओं को यह लगेगा कि पेज उनकी कार्रवाइयों के हिसाब से काम नहीं कर रहा है.
आईएनपी का मकसद यह पक्का करना होता है कि उपयोगकर्ता के इंटरैक्शन की शुरुआत करने से लेकर, अगले फ़्रेम को पेंट करने तक के समय को जितना हो सके उतना छोटा होना चाहिए. यह समय, उपयोगकर्ता के सभी या ज़्यादातर इंटरैक्शन के लिए होता है.
नीचे दिए गए वीडियो में, दाईं ओर दिए गए उदाहरण से तुरंत विज़ुअल फ़ीडबैक मिलता है कि एक अकॉर्डियन खुल रहा है. इससे यह भी पता चलता है कि कैसे खराब रिस्पॉन्स मिलने की वजह से, अनचाहे जवाब मिल सकते हैं. ऐसा इसलिए होता है, क्योंकि उपयोगकर्ता को लगता है कि गड़बड़ी का असर हुआ है.
इस लेख में बताया गया है कि आईएनपी कैसे काम करता है और इसे कैसे मेज़र किया जाता है. इस लेख में, आईएनपी को बेहतर बनाने वाले संसाधनों की जानकारी भी दी गई है.
आईएनपी क्या है?
आईएनपी ऐसी मेट्रिक है जो किसी पेज के सभी क्लिक, टैप, और कीबोर्ड इंटरैक्शन के दौरान होने वाले इंटरैक्शन को देखकर, उपयोगकर्ता के इंटरैक्शन के मामले में उस पेज से जुड़ा पूरा रिस्पॉन्स देती है. फ़ाइनल आईएनपी वैल्यू, सबसे लंबे इंटरैक्शन को दिखाती है. इसमें आउटलायर को अनदेखा किया जाता है.
जैसा कि ऊपर बताया गया है, किसी पेज के साथ हुए सभी इंटरैक्शन को ध्यान में रखकर आईएनपी को कैलकुलेट किया जाता है. ज़्यादातर साइटों के लिए, इंतज़ार के समय की सबसे कम दर के साथ इंटरैक्शन को आईएनपी के तौर पर रिपोर्ट किया जाता है. हालांकि, बहुत ज़्यादा इंटरैक्शन वाले पेजों के लिए, अचानक होने वाली गड़बड़ी की वजह से किसी दूसरी रिस्पॉन्सिव साइट पर असामान्य रूप से बहुत ज़्यादा इंटरैक्शन हो सकता है. इंटरैक्शन की संख्या जितनी ज़्यादा होगी, उसके होने की संभावना उतनी ही ज़्यादा होगी. इससे बचने के लिए, हम हर 50 इंटरैक्शन के लिए सबसे ज़्यादा इंटरैक्शन को अनदेखा करते हैं. साथ ही, इस तरह के पेजों से मिले रिस्पॉन्स को बेहतर तरीके से मेज़र करने के लिए, हम इसे अनदेखा करते हैं. ज़्यादातर पेज की परफ़ॉर्मेंस में 50 से ज़्यादा इंटरैक्शन नहीं होते हैं. इसलिए, यह सबसे खराब इंटरैक्शन की रिपोर्ट देगा. इसके बाद, सभी पेज व्यू का 75वां पर्सेंटाइल रिपोर्ट किया जाता है. यह आउटलायर को हटा देता है, ताकि आपको ऐसा वैल्यू मिल सके जो ज़्यादातर उपयोगकर्ताओं को या बेहतर अनुभव मिले.
इंटरैक्शन, इवेंट हैंडलर का एक ग्रुप है जो एक ही लॉजिकल यूज़र जेस्चर के दौरान सक्रिय होता है. उदाहरण के लिए, टचस्क्रीन डिवाइस पर होने वाले "टैप" इंटरैक्शन में pointerup, pointerdown, और click जैसे एक से ज़्यादा इवेंट शामिल होते हैं. इंटरैक्शन JavaScript, सीएसएस, पहले से मौजूद ब्राउज़र कंट्रोल (जैसे कि फ़ॉर्म एलिमेंट) या उनके मिले-जुले वैरिएंट की मदद से हो सकता है.
इंटरैक्शन के इंतज़ार के समय में इवेंट हैंडलर के ग्रुप की सबसे लंबी अवधि होती है. इसकी मदद से इंटरैक्शन शुरू होता है. इसमें उपयोगकर्ता के इंटरैक्शन की शुरुआत से लेकर अगले फ़्रेम को विज़ुअल फ़ीडबैक के तौर पर दिखने के बीच की अवधि होती है.
अच्छा आईएनपी स्कोर क्या होता है?
रिस्पॉन्स मेट्रिक में, "अच्छा" या "खराब" जैसे लेबल पिन करना मुश्किल होता है. एक ओर, आपको डेवलपमेंट के ऐसे तरीकों को बढ़ावा देना है जिनमें अच्छे रिस्पॉन्स को प्राथमिकता दी जाए. वहीं दूसरी ओर, आपको इस बात को भी ध्यान में रखना होगा कि जिन डिवाइसों का इस्तेमाल करके, लोग डेवलपमेंट से जुड़ी उम्मीदों को पूरा करने के लिए काम करते हैं उन डिवाइसों की क्षमताओं में काफ़ी फ़र्क़ है.
आपको उपयोगकर्ताओं को अच्छा अनुभव मिल रहा है या नहीं, यह पक्का करने के लिए, फ़ील्ड में रिकॉर्ड किए गए पेज लोड का 75वां पर्सेंटाइल होता है. इसे मोबाइल और डेस्कटॉप डिवाइसों के हिसाब से अलग-अलग सेगमेंट में बांटा जाता है:
- आईएनपी की वैल्यू 200 मिलीसेकंड से कम होने का मतलब है कि आपके पेज को अच्छी रिस्पॉन्स है.
- 200 मिलीसेकंड और उससे कम या 500 मिलीसेकंड से ज़्यादा के आईएनपी का मतलब है कि आपके पेज के रिस्पॉन्स मिलने की क्षमता में सुधार की ज़रूरत है.
- 500 मिलीसेकंड से ज़्यादा के आईएनपी का मतलब है कि आपके पेज पर खराब रिस्पॉन्स है.
इंटरैक्शन में क्या होता है?
इंटरैक्टिविटी का मुख्य कारण अक्सर JavaScript होता है, हालांकि ब्राउज़र JavaScript द्वारा समर्थित नहीं नियंत्रण के माध्यम से इंटरैक्टिविटी उपलब्ध कराते हैं, जैसे चेकबॉक्स, रेडियो बटन और CSS के ज़रिए नियंत्रित नियंत्रण.
आईएनपी के हिसाब से, सिर्फ़ ये इंटरैक्शन टाइप देखे गए हैं:
- माउस से क्लिक करना.
- टचस्क्रीन वाले डिवाइस पर टैप करना.
- किसी फ़िज़िकल या ऑनस्क्रीन कीबोर्ड पर कोई बटन दबाना.
इंटरैक्शन मुख्य दस्तावेज़ में या दस्तावेज़ में एम्बेड किए गए iframe में होते हैं. उदाहरण के लिए, एम्बेड किए गए किसी वीडियो पर 'चलाएं' पर क्लिक करना. असली उपयोगकर्ताओं को यह जानकारी नहीं होगी कि iframe में क्या है या नहीं. इसलिए, टॉप लेवल पेज पर उपयोगकर्ता अनुभव का आकलन करने के लिए, iframes में INP की ज़रूरत होती है. ध्यान दें कि JavaScript वेब एपीआई के पास iframe कॉन्टेंट का ऐक्सेस नहीं होगा. इसलिए, हो सकता है कि यह iframe में आईएनपी को मेज़र न कर पाए. साथ ही, यह CrUX और RUM के बीच अंतर के तौर पर दिखेगा.
इंटरैक्शन के दो हिस्से हो सकते हैं, हर इंटरैक्शन में कई इवेंट होते हैं. उदाहरण के लिए, कीस्ट्रोक में keydown, keypress, और keyup इवेंट होते हैं. टैप इंटरैक्शन में pointerup और pointerdown इवेंट शामिल हैं. इंटरैक्शन के अंदर सबसे ज़्यादा अवधि वाले इवेंट को इंटरैक्शन की इंतज़ार के समय के तौर पर चुना जाता है.
आईएनपी का हिसाब तब लगाया जाता है, जब उपयोगकर्ता किसी पेज से चला जाता है. इससे एक वैल्यू मिलती है, जो पूरे पेज की लाइफ़साइकल के दौरान, पेज पर आए रिस्पॉन्स के बारे में बताती है. आईएनपी कम होने का मतलब है कि पेज, उपयोगकर्ता के इनपुट के हिसाब से सही तरीके से रिस्पॉन्सिव है.
आईएनपी और फ़र्स्ट इनपुट डिले (एफ़आईडी) में क्या अंतर है?
जहां आईएनपी, सभी पेज इंटरैक्शन पर विचार करता है वहां फ़र्स्ट इनपुट डिले (एफ़आईडी) सिर्फ़ फ़र्स्ट इंटरैक्शन के लिए ज़िम्मेदार होता है. यह सिर्फ़ पहले इंटरैक्शन के इनपुट में हुई देरी को भी मेज़र करता है, इवेंट हैंडलर को चलाने में लगने वाले समय या अगले फ़्रेम को प्रज़ेंट करने में लगने वाले समय को नहीं.
एफ़आईडी, लोड का रिस्पॉन्स मेट्रिक भी है. इसलिए, इसकी वजह यह है कि अगर पेज लोड होने के दौरान, किसी पेज के साथ पहले इंटरैक्शन में इनपुट में देरी नहीं होती या नहीं दिखती, तो पेज ने पहला इंप्रेशन अच्छा परफ़ॉर्म किया है.
आईएनपी, पहले इंप्रेशन से कहीं ज़्यादा है. सभी इंटरैक्शन का सैंपल लेने से, रिस्पॉन्स मिलने की क्षमता का बेहतर तरीके से आकलन किया जा सकता है. इससे आईएनपी को एफ़आईडी के मुकाबले, कुल रिस्पॉन्स का ज़्यादा भरोसेमंद इंडिकेटर मिलता है.
आईएनपी की कोई वैल्यू रिपोर्ट न करने पर क्या होता है?
ऐसा हो सकता है कि कोई पेज आईएनपी वैल्यू न दे. ऐसा कई वजहों से हो सकता है:
- पेज लोड था, लेकिन उपयोगकर्ता ने कभी भी अपने कीबोर्ड पर क्लिक नहीं किया, टैप नहीं किया और न ही किसी बटन को दबाया.
- पेज लोड हो गया था, लेकिन उपयोगकर्ता ने हाथ के जेस्चर का इस्तेमाल करके, पेज से इंटरैक्ट किया. इसमें कीबोर्ड पर क्लिक, टैप या इस्तेमाल करने की ज़रूरत नहीं थी. उदाहरण के लिए, स्क्रोल करने या एलिमेंट पर कर्सर घुमाने से, आईएनपी मेट्रिक का हिसाब लगाने के तरीके पर कोई असर नहीं पड़ता.
- पेज को कोई बॉट, ऐक्सेस कर रहा है. जैसे, सर्च क्रॉलर या बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला ब्राउज़र, जिसे पेज से इंटरैक्ट करने के लिए स्क्रिप्ट नहीं की गई है.
आईएनपी को मेज़र करने का तरीका
आईएनपी को कई तरह के टूल की मदद से फ़ील्ड और लैब, दोनों में मापा जा सकता है.
मैदान में
आम तौर पर, आईएनपी को ऑप्टिमाइज़ करने की आपकी यात्रा फ़ील्ड डेटा से शुरू होगी. असल में, रीयल यूज़र मॉनिटरिंग (आरयूएम) के फ़ील्ड डेटा से, आपको किसी पेज की आईएनपी वैल्यू के साथ-साथ काम का डेटा भी मिलेगा. इससे यह पता चलता है कि आईएनपी वैल्यू के लिए कोई खास इंटरैक्शन किस वजह से हुआ. साथ ही, यह भी पता चलता है कि इंटरैक्शन, पेज लोड होने के दौरान या उसके बाद हुआ, इंटरैक्शन का टाइप (क्लिक, कीप्रेस या टैप) और अन्य अहम जानकारी.
अगर आपकी वेबसाइट को Chrome इस्तेमाल करने वाले लोगों के अनुभव की रिपोर्ट (CrUX) में शामिल किया जा सकता है, तो आपको PageSpeed Insights में CrUX के ज़रिए (और वेबसाइट की परफ़ॉर्मेंस की अन्य अहम जानकारी) से, आईएनपी के लिए फ़ील्ड डेटा तुरंत मिल सकता है. आपको कम से कम, अपनी वेबसाइट के आईएनपी के ऑरिजिन-लेवल की फ़ोटो मिल सकती है, लेकिन कुछ मामलों में आपको पेज लेवल का डेटा भी मिल सकता है.
हालांकि, CrUX से आपको यह बताने में मदद मिलती है कि बड़ी समस्या है, लेकिन समस्या को समझने के लिए अक्सर इसका पर्याप्त ब्यौरा नहीं मिलता. आरयूएम समाधान से, आपको उन पेजों, उपयोगकर्ताओं या उपयोगकर्ता के इंटरैक्शन के बारे में ज़्यादा जानकारी मिलती है जिनके दौरान देर से इंटरैक्शन हो रहा है. अलग-अलग इंटरैक्शन के लिए आईएनपी को एट्रिब्यूट करने में, अनुमान लगाने और बेकार की मेहनत करने से बचा जा सकता है.
लैब में
आम तौर पर, ऐसा फ़ील्ड डेटा मिलने पर लैब में जांच शुरू की जा सकती है जिससे यह पता चले कि आपके इंटरैक्शन की स्पीड धीमी है. हालांकि, फ़ील्ड डेटा के बिना, लैब में धीमे इंटरैक्शन का फिर से इस्तेमाल करने की कुछ रणनीतियां हैं. इस तरह की रणनीतियों में, उपयोगकर्ता के सामान्य फ़्लो और इसके दौरान होने वाले इंटरैक्शन की जांच करना शामिल है. साथ ही, उपयोगकर्ता अनुभव के उस ज़रूरी हिस्से के दौरान धीमे इंटरैक्शन को सामने लाने के लिए, जब मुख्य थ्रेड सबसे ज़्यादा व्यस्त हो, तब पेज के साथ इंटरैक्ट करना भी शामिल होता है.
आईएनपी को बेहतर कैसे बनाएं
आईएनपी को ऑप्टिमाइज़ करने से जुड़ी गाइड का कलेक्शन मौजूद है. यह आपको फ़ील्ड में धीमे इंटरैक्शन की पहचान करने और लैब डेटा का इस्तेमाल करके ड्रिल-डाउन करने और उन्हें ऑप्टिमाइज़ करने के तरीकों के बारे में बताता है.
बदलावों का लॉग
कभी-कभी, मेट्रिक को मापने के लिए इस्तेमाल किए जाने वाले एपीआई में गड़बड़ियां मिलती हैं. कभी-कभी, मेट्रिक की परिभाषा में भी गड़बड़ियां मिलती हैं. इसलिए, कभी-कभी बदलाव करने ज़रूरी होते हैं. ये बदलाव, आपकी इंटरनल रिपोर्ट और डैशबोर्ड में सुधार या रिग्रेशन के तौर पर दिख सकते हैं.
इन्हें मैनेज करने में आपकी मदद के लिए, इन मेट्रिक को लागू करने या इनकी परिभाषा में होने वाले सभी बदलाव, इस बदलाव लॉग में दिखाए जाएंगे.
अगर आपके पास इन मेट्रिक के बारे में कोई सुझाव है, तो वेब-वाइट्स-फ़ीडबैक Google ग्रुप में दिया जा सकता है.