'नेक्स्ट पेंट से इंटरैक्शन' अब एक स्थिर कोर वेब वाइटल मेट्रिक है जो फ़र्स्ट इनपुट डिले की जगह ले रहा है.
आपके पास आज का दिन है! कई साल काम करने के बाद, अब हम इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) को वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली स्थायी मेट्रिक बनाने के लिए तैयार हैं. फ़र्स्ट इनपुट डिले (एफ़आईडी) की कई कमियों को ठीक करने के लिए, यह एक अहम कदम है. इससे हमें इंटरैक्शन का रिस्पॉन्स देने में लगने वाले समय का पता लगाने में मदद मिलती है.
इस पोस्ट में हम आपको बताएंगे कि आज असल में क्या बदलाव हो रहे हैं. साथ ही, हम Chrome टूल से एफ़आईडी को बंद करने और हटाने के लिए सटीक समयावधि तय करेंगे. साथ ही, आईएनपी से जुड़ी समस्याओं को ढूंढने और उन्हें ठीक करने में आपकी मदद करने के लिए, कुछ संसाधन शेयर करेंगे.
आज क्या बदल रहा है
Chrome की बात करें, तो वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाले हमारे सभी टूल, अब आईएनपी की स्थिति के बारे में बताएंगे. उदाहरण के लिए, PageSpeed Insights, CrUX Dashboard, और Web Vitals एक्सटेंशन जैसे टूल, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली इन तीन मेट्रिक में, आईएनपी को प्रमुखता से दिखाएंगे. खास तौर पर, PageSpeed Insights में, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का आकलन करने वाला लॉजिक, एफ़आईडी के बजाय आईएनपी की परफ़ॉर्मेंस का आकलन करेगा. Search Console में इससे जुड़े बदलावों के बारे में ज़्यादा जानने के लिए, Search टीम की ब्लॉग पोस्ट देखें.
इसके अलावा, आज से कुछ टूल, एफ़आईडी के बंद होने की सूचना के तौर पर यह चेतावनी दिखा सकते हैं कि मेट्रिक अब वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक नहीं है और इसे हटा दिया जाएगा. नीचे दिए गए एफ़आईडी के बंद होने की टाइमलाइन वाले सेक्शन में, उन तारीखों के बारे में बताया गया है जिनके बारे में जानना है. इससे यह पक्का किया जाता है कि आपने एफ़आईडी से पूरी तरह से माइग्रेट कर लिया है.
एफ़आईडी को बंद करने की टाइमलाइन
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के तौर पर आईएनपी ने एफ़आईडी की जगह ले ली है. इसलिए, अब Chrome में एफ़आईडी का इस्तेमाल करने की सुविधा आधिकारिक तौर पर बंद कर दी गई है. इसका मतलब यह है कि Chrome टूल अब एफ़आईडी की उपलब्धता की गारंटी नहीं देंगे. साथ ही, डेवलपर के पास 9 सितंबर, 2024 तक आईएनपी में माइग्रेट करने के लिए समय होगा.
यह खास तौर पर, Chrome के लिए उपयोगकर्ता अनुभव की रिपोर्ट (CrUX) या PageSpeed Insights एपीआई इस्तेमाल करने वालों के लिए अहम है. सेवा में किसी तरह की रुकावट या रुकावट से बचने के लिए, इन एपीआई में से किसी एक का भी एफ़आईडी डेटा प्रोसेस करने वाले ऐप्लिकेशन को 9 सितंबर तक आईएनपी में ट्रांसफ़र कर लेना चाहिए. साफ़ तौर पर कहा जाए, तो यह एपीआई के नए वर्शन में नुकसान पहुंचाने वाला बदलाव होगा. साथ ही, मेजर वर्शन की संख्याओं में कोई रुकावट नहीं आएगी!
आईएनपी को ऑप्टिमाइज़ करने के लिए संसाधन
भले ही, आपको पहली बार आईएनपी का इस्तेमाल करना हो या जवाब देने में महारत हासिल करने वाले पेशेवर, आईएनपी ऑप्टिमाइज़ेशन से जुड़े संसाधनों का कलेक्शन, आपको अपनी पसंद के हिसाब से चीज़ें खोजने का एक बेहतरीन विकल्प है. हमेशा उपलब्ध रहने वाले दस्तावेज़ों के इस कलेक्शन में मेट्रिक की परिभाषा से लेकर, इसे स्थानीय तौर पर और असली उपयोगकर्ताओं के हिसाब से मेज़र करने की तकनीकें, और अलग-अलग तरह के इस्तेमाल के उदाहरणों को ऑप्टिमाइज़ करने के लिए व्यावहारिक सलाह दी गई है. साथ ही, असल दुनिया की केस स्टडी की एक सूची दी गई है, जिसमें यह दिखाया गया है कि कैसे इस मेट्रिक का इस्तेमाल सही तरीके से करने के लिए किया जा रहा है.
यहां एक सामान्य वर्कफ़्लो दिया गया है. इसका इस्तेमाल करके, अपनी साइट पर आईएनपी से जुड़ी समस्याओं को ढूंढा जा सकता है और उन्हें ठीक किया जा सकता है. इन दस्तावेज़ों का इस्तेमाल करें:
जानें कि आईएनपी, कैननिकल आईएनपी दस्तावेज़ में उपयोगकर्ता के इंटरैक्शन पर जवाब देने में कितना समय लेता है.
अपनी साइट की आईएनपी परफ़ॉर्मेंस का आकलन करने के लिए, असली उपयोगकर्ता का डेटा देखें. आईएनपी के कम से कम 75% अनुभवों को अच्छा माने जाने के लिए, 200 मिलीसेकंड से कम समय में उपयोगकर्ता के इनपुट का जवाब देना चाहिए. अगर आपकी साइट का आईएनपी पहले से ही अच्छा है, तो चिंता न करें!
अपने यूआरएल को PageSpeed Insights में प्लग करें या अगर आपकी वेबसाइट CrUX डेटासेट में शामिल है, तो Search Console पर वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली रिपोर्ट देखें.
अपने आंकड़ों की सेवा देने वाली कंपनी से पता करें कि क्या वह आईएनपी मॉनिटरिंग की सुविधा देती है.
web-vitals.js का इस्तेमाल करके अपना आईएनपी समाधान रोल करें.
ज़रूरत पड़ने पर, उपयोगकर्ता अनुभवों के बारे में गड़बड़ी की जानकारी इकट्ठा करने के लिए अपनी साइट पर जाएं. यह ज़रूरी मेटाडेटा होता है, जैसे कि उपयोगकर्ता ने किस पेज एलिमेंट के साथ इंटरैक्ट किया था और वह धीमी क्यों थी. इसके अलावा, इसमें दूसरे काम का डेटा भी शामिल होता है. कुल मिलाकर, इस जानकारी से आपको सुधार करने के सबसे बड़े अवसरों को समझने में मदद मिलेगी.
Chrome DevTools की मदद से धीमे इंटरैक्शन को स्थानीय तौर पर दोबारा जनरेट करें. इससे आपको यह जानने में मदद मिलेगी कि असल में क्या कार्रवाई हो रही है और नुकसान पहुंचाने वाला कोड क्या है.
उपयोगकर्ता इंटरैक्शन को हैंडल करते हुए कम से कम काम करने के लिए, अपने कोड को ऑप्टिमाइज़ करें:
अपने ऐप्लिकेशन में किए गए बदलावों को स्थानीय तौर पर मेज़र करें और असली उपयोगकर्ता के अनुभव को मॉनिटर करें. इससे यह पक्का किया जा सकेगा कि आईएनपी की परफ़ॉर्मेंस तेज़ी से बेहतर हो रही है (और बना रहे!)
उम्मीद है कि इस दिशा-निर्देश से आपको आईएनपी को ऑप्टिमाइज़ करने में मदद मिलेगी. अगर इस दौरान आपको कोई समस्या आती है, तो आपको मदद मिल सकती है. इसके लिए, Stack Overflow पर interaction-to-next-paint से टैग किया गया सवाल पोस्ट करें.
आईएनपी को वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के तौर पर लॉन्च करते हुए काफ़ी समय हो गया है. हमने साल 2021 में, बेहतर रिस्पॉन्स देने वाली मेट्रिक बनाने के बारे में हमारी पहली पोस्ट तैयार की थी. तब से, हमने समुदाय के सभी शानदार सुझावों को ध्यान में रखा है. साथ ही, एक ऐसी मेट्रिक बनाई है जिसके बारे में हमारा मानना है कि यह डेवलपर को ऐसे अनुभव को बेहतर बनाने में मदद करेगा जिसकी मदद नहीं की जा सकती. इससे वेब को बेहतर बनाने में मदद मिलेगी. इस मेट्रिक को बनाने में हमारी मदद करने के लिए धन्यवाद. साथ ही, रिस्पॉन्स की स्थिति को बेहतर बनाने के लिए आपने जो मेहनत की है उसके लिए धन्यवाद!