जानें कि नई INP मेट्रिक, JavaScript फ़्रेमवर्क और लाइब्रेरी का इस्तेमाल करके बनाई गई साइटों के अनुभव पर कैसे असर डालती है.
Chrome ने हाल ही में Chrome UX रिपोर्ट में, रिस्पॉन्सिवनेस की नई मेट्रिक को एक्सपेरिमेंट के तौर पर लॉन्च किया है. इस मेट्रिक को अब इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) के तौर पर जाना जाता है. इससे यह पता चलता है कि पेज पर उपयोगकर्ता के इंटरैक्शन का जवाब देने में, पेज को कुल कितना समय लगा. आज हम इस बारे में अहम जानकारी शेयर करना चाहते हैं कि आधुनिक JavaScript फ़्रेमवर्क का इस्तेमाल करके बनाई गई वेबसाइटें, इस मेट्रिक के हिसाब से कहां हैं. हम इस बारे में चर्चा करना चाहते हैं कि फ़्रेमवर्क के लिए INP क्यों ज़रूरी है. साथ ही, यह भी बताना चाहते हैं कि Aurora और फ़्रेमवर्क, रिस्पॉन्सिवनेस को ऑप्टिमाइज़ करने के लिए कैसे काम कर रहे हैं.
बैकग्राउंड
Chrome, वेबसाइटों के लोड होने में लगने वाले समय का आकलन करने के लिए, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी (CWV) के हिस्से के तौर पर, पेज पर मौजूद लिंक को क्लिक करके उस पर पहुंचने में लगने वाले समय (FID) का इस्तेमाल करता है. एफ़आईडी, उपयोगकर्ता के पहले इंटरैक्शन से लेकर ब्राउज़र के इंटरैक्शन से जुड़े इवेंट हैंडलर को प्रोसेस करने तक के इंतज़ार के समय को मेज़र करता है. इसमें इवेंट हैंडलर को प्रोसेस करने, एक ही पेज पर बाद के इंटरैक्शन को प्रोसेस करने या इवेंट कॉलबैक के चलने के बाद अगले फ़्रेम को पेंट करने में लगने वाला समय शामिल नहीं होता. हालांकि, पेज के लाइफ़साइकल के दौरान, रिस्पॉन्सिवनेस, उपयोगकर्ता अनुभव के लिए ज़रूरी है. ऐसा इसलिए, क्योंकि पेज लोड होने के बाद उपयोगकर्ता करीब 90% समय उस पर बिताते हैं.
INP मेट्रिक से यह पता चलता है कि उपयोगकर्ता के इंटरैक्शन का जवाब देने में, वेब पेज को कितना समय लगता है. यह समय, इंटरैक्शन शुरू होने से लेकर स्क्रीन पर अगला फ़्रेम पेंट होने तक का होता है. हमें उम्मीद है कि आईएनपी की मदद से, पेज के लाइफ़साइकल में सभी इंटरैक्शन के लिए, कुल इंतज़ार का समय मेज़र किया जा सकेगा. हमारा मानना है कि INP से, वेब पेजों के लोड होने और रनटाइम रिस्पॉन्सिवनेस का ज़्यादा सटीक अनुमान मिलेगा.
FID सिर्फ़ पहले इंटरैक्शन के इनपुट में लगने वाले समय को मेज़र करता है. इसलिए, हो सकता है कि वेब डेवलपर ने सीडब्ल्यूवी को बेहतर बनाने की प्रोसेस के तहत, बाद के इंटरैक्शन को पहले से ऑप्टिमाइज़ न किया हो. इसलिए, साइटों को इस मेट्रिक में अच्छा परफ़ॉर्म करने के लिए, ज़्यादा मेहनत करनी होगी. खास तौर पर, उन साइटों को जिन्हें इंटरैक्टिव बनाने के लिए ज़्यादा काम करना पड़ता है.
फ़्रेमवर्क की भूमिका
कई वेबसाइटें इंटरैक्टिविटी देने के लिए JavaScript का इस्तेमाल करती हैं. इसलिए, INP स्कोर पर मुख्य तौर पर, मुख्य थ्रेड पर प्रोसेस किए गए JavaScript की संख्या का असर पड़ेगा. JavaScript फ़्रेमवर्क, आधुनिक फ़्रंट-एंड वेब डेवलपमेंट का एक ज़रूरी हिस्सा हैं. ये डेवलपर को, JavaScript कोड को रूट करने, इवेंट मैनेज करने, और अलग-अलग हिस्सों में बांटने के लिए अहम एब्स्ट्रैक्शन उपलब्ध कराते हैं. इसलिए, इनका इस्तेमाल करने वाली वेबसाइटों के रिस्पॉन्सिवनेस और उपयोगकर्ता अनुभव को ऑप्टिमाइज़ करने में इनकी अहम भूमिका होती है.
हो सकता है कि फ़्रेमवर्क ने पहले वेबसाइटों के लिए एफ़आईडी को बेहतर बनाकर, बेहतर रिस्पॉन्स के लिए कदम उठाए हों. हालांकि, अब उन्हें रिस्पॉन्सिवनेस मेट्रिक के उपलब्ध डेटा का विश्लेषण करना होगा और पहचाने गए किसी भी अंतर को ठीक करने के लिए काम करना होगा. आम तौर पर, INP का पास रेट कम होता है. साथ ही, मेज़रमेंट प्रोसेस में अंतर होने की वजह से, कोड को ज़्यादा ऑप्टिमाइज़ करना पड़ता है. इस टेबल में इसकी वजह बताई गई है.
Chrome की Aurora टीम, ओपन-सोर्स वेब फ़्रेमवर्क के साथ काम करती है. इससे डेवलपर को उपयोगकर्ता अनुभव के अलग-अलग पहलुओं को बेहतर बनाने में मदद मिलती है. इनमें परफ़ॉर्मेंस और वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक शामिल हैं. INP के लॉन्च के साथ, हम फ़्रेमवर्क पर आधारित वेबसाइटों के लिए, सीडब्ल्यूवी मेट्रिक में होने वाले बदलाव के लिए तैयार हैं. हमने CrUX रिपोर्ट में, एक्सपेरिमेंट के तौर पर उपलब्ध रिस्पॉन्सिवनेस मेट्रिक के आधार पर डेटा इकट्ठा किया है. फ़्रेमवर्क पर आधारित वेबसाइटों के लिए, आईएनपी मेट्रिक पर आसानी से स्विच करने के लिए, हम अहम जानकारी और कार्रवाई के आइटम शेयर करेंगे.
पेज के रिस्पॉन्स के बारे में बताने वाली एक्सपेरिमेंटल मेट्रिक का डेटा
अगर आईएनपी 200 मिलीसेकंड से कम या उसके बराबर है, तो इसका मतलब है कि पेज पर रिस्पॉन्स मिलने में कम समय लग रहा है. जून 2023 की CrUX रिपोर्ट के डेटा और CWV टेक्नोलॉजी रिपोर्ट से, हमें लोकप्रिय JavaScript फ़्रेमवर्क के लिए रिस्पॉन्सिवनेस के बारे में यह जानकारी मिलती है.
इस टेबल में, हर फ़्रेमवर्क पर मौजूद ऑरिजिन का प्रतिशत दिखाया गया है. साथ ही, यह भी बताया गया है कि इन ऑरिजिन का रिस्पॉन्सिवनेस स्कोर कितना है. ये आंकड़े उत्साह बढ़ाने वाले हैं, लेकिन हमें लगता है कि इसमें काफ़ी सुधार किया जा सकता है.
JavaScript का INP पर क्या असर पड़ता है?
फ़ील्ड में मौजूद INP वैल्यू, लैब में रिकॉर्ड किए गए कुल ब्लॉकिंग समय (टीबीटी) से मेल खाती हैं. इसका मतलब यह हो सकता है कि लंबे समय तक मुख्य थ्रेड को ब्लॉक करने वाली कोई भी स्क्रिप्ट, INP के लिए खराब होगी. किसी भी इंटरैक्शन के बाद, ज़्यादा JavaScript लागू होने से मुख्य थ्रेड लंबे समय तक ब्लॉक हो सकता है. साथ ही, उस इंटरैक्शन के जवाब में देरी हो सकती है. स्क्रिप्ट को ब्लॉक करने की कुछ सामान्य वजहें ये हैं:
ऑप्टिमाइज़ नहीं किया गया JavaScript: बेकार कोड या कोड को अलग-अलग करने और लोड करने की खराब रणनीतियों की वजह से, JavaScript का साइज़ बड़ा हो सकता है. साथ ही, मुख्य थ्रेड को लंबे समय तक ब्लॉक किया जा सकता है. कोड को अलग-अलग हिस्सों में बांटने, प्रोग्रेसिव लोडिंग, और लंबे टास्क को अलग-अलग हिस्सों में बांटने से, जवाब मिलने में लगने वाले समय को काफ़ी हद तक कम किया जा सकता है.
तीसरे पक्ष की स्क्रिप्ट: तीसरे पक्ष की स्क्रिप्ट, कभी-कभी किसी इंटरैक्शन को प्रोसेस करने के लिए ज़रूरी नहीं होती हैं. उदाहरण के लिए, विज्ञापन स्क्रिप्ट. ये मुख्य थ्रेड को ब्लॉक कर सकती हैं और ग़ैर-ज़रूरी देरी कर सकती हैं. ज़रूरी स्क्रिप्ट को प्राथमिकता देने से, तीसरे पक्ष की स्क्रिप्ट के बुरे असर को कम करने में मदद मिल सकती है.
एक से ज़्यादा इवेंट हैंडलर: हर इंटरैक्शन से जुड़े कई इवेंट हैंडलर, एक-दूसरे के साथ इंटरफ़ेयर कर सकते हैं. साथ ही, इनकी वजह से प्रोसेस में देरी भी हो सकती है. इनमें से कुछ टास्क ज़रूरी नहीं होते और इन्हें वेब वर्कर्स पर या ब्राउज़र के खाली होने पर शेड्यूल किया जा सकता है.
इवेंट मैनेज करने पर फ़्रेमवर्क का ओवरहेड: फ़्रेमवर्क में, इवेंट मैनेज करने के लिए अतिरिक्त सुविधाएं/सिंटैक्स हो सकते हैं. उदाहरण के लिए, Vue, एलिमेंट में इवेंट सुनने वाले टूल अटैच करने के लिए v-on का इस्तेमाल करता है, जबकि Angular, उपयोगकर्ता इवेंट हैंडलर को रैप करता है. इन सुविधाओं को लागू करने के लिए, वैनिला JavaScript के अलावा फ़्रेमवर्क कोड की ज़रूरत होती है.
हाइड्रेशन: JavaScript फ़्रेमवर्क का इस्तेमाल करते समय, यह आम बात है कि सर्वर किसी पेज के लिए शुरुआती एचटीएमएल जनरेट करता है. इसके बाद, उसे इवेंट हैंडलर और ऐप्लिकेशन स्टेटस के साथ जोड़ना होता है, ताकि वह वेब ब्राउज़र में इंटरैक्टिव हो सके. हम इस प्रोसेस को हाइड्रेशन कहते हैं. लोड के दौरान यह प्रोसेस ज़्यादा समय ले सकती है. यह इस बात पर निर्भर करता है कि JavaScript को लोड होने और हाइड्रेशन की प्रोसेस पूरी होने में कितना समय लगता है. इससे, पेजों को इंटरैक्टिव दिखाने में भी मदद मिलती है, भले ही वे इंटरैक्टिव न हों. आम तौर पर, पेज लोड होने के दौरान या धीरे-धीरे (उदाहरण के लिए, उपयोगकर्ता के इंटरैक्शन पर) हाइड्रेशन अपने-आप होता है. साथ ही, टास्क शेड्यूल करने की वजह से, आईएनपी या प्रोसेसिंग में लगने वाले समय पर असर पड़ सकता है. React जैसी लाइब्रेरी में,
useTransitionका फ़ायदा लिया जा सकता है, ताकि किसी कॉम्पोनेंट का कुछ हिस्सा अगले फ़्रेम में रेंडर हो जाए और ज़्यादा खर्च वाले साइड-इफ़ेक्ट, आने वाले फ़्रेम के लिए छोड़ दिए जाएं. इस बात को ध्यान में रखते हुए, ट्रांज़िशन में होने वाले ऐसे अपडेट जो क्लिक जैसे ज़्यादा ज़रूरी अपडेट देते हैं, वे INP के लिए अच्छा पैटर्न हो सकते हैं.प्रीफ़ेच करना: सही तरीके से प्रीफ़ेच करने पर, बाद में नेविगेट करने के लिए ज़रूरी संसाधनों को तेज़ी से प्रीफ़ेच करने से परफ़ॉर्मेंस बेहतर हो सकती है. हालांकि, अगर एसपीए रूट को सिंक्रोनस तरीके से प्रीफ़ेच और रेंडर किया जाता है, तो INP पर बुरा असर पड़ सकता है. इसकी वजह यह है कि रेंडर करने की यह प्रोसेस, एक ही फ़्रेम में पूरी हो जाती है और इसमें ज़्यादा समय लगता है. इसकी तुलना, अपने रूट को पहले से लोड न करने और इसके बजाय ज़रूरी काम (उदाहरण के लिए,
fetch()) शुरू करने और पेंट को अनब्लॉक करने से करें. हमारा सुझाव है कि आप इस बात की फिर से जांच करें कि प्रीफ़ेच करने के लिए आपके फ़्रेमवर्क का तरीका, सबसे अच्छा यूज़र एक्सपीरियंस (यूएक्स) दे रहा है या नहीं. साथ ही, यह भी देखें कि इससे INP पर क्या असर पड़ सकता है.
अब से, अच्छा INP स्कोर पाने के लिए, डेवलपर को पेज पर हर इंटरैक्शन के बाद लागू होने वाले कोड की समीक्षा करने पर ध्यान देना होगा. साथ ही, उन्हें फ़र्स्ट पार्टी और थर्ड पार्टी, दोनों तरह की स्क्रिप्ट के लिए, चंक करने, फिर से हाइड्रेट करने, लोड करने की रणनीतियों, और हर render() अपडेट के साइज़ को ऑप्टिमाइज़ करना होगा.
Aurora और फ़्रेमवर्क, INP से जुड़ी समस्याओं को कैसे हल कर रहे हैं?
Aurora, फ़्रेमवर्क के साथ काम करता है. इसके लिए, वह आम समस्याओं के लिए पहले से मौजूद समाधान देने के लिए, सबसे सही तरीकों को शामिल करता है. हमने Next.js, Nuxt.js, Gatsby, और Angular के साथ मिलकर ऐसे समाधान पर काम किया है जो परफ़ॉर्मेंस को ऑप्टिमाइज़ करने के लिए, फ़्रेमवर्क में बेहतर डिफ़ॉल्ट विकल्प उपलब्ध कराते हैं. इस संदर्भ में, हमारे काम की हाइलाइट यहां दी गई हैं:
React और Next.js: Next.js स्क्रिप्ट कॉम्पोनेंट, तीसरे पक्ष की स्क्रिप्ट के लोड होने में लगने वाले समय की वजह से होने वाली समस्याओं को हल करने में मदद करता है. Next.js में ज़्यादा जानकारी वाले चंक की सुविधा जोड़ी गई है, ताकि शेयर किए गए कोड के लिए छोटे साइज़ के चंक इस्तेमाल किए जा सकें. इससे, सभी पेजों पर डाउनलोड किए जाने वाले, इस्तेमाल न किए गए सामान्य कोड की संख्या कम करने में मदद मिलती है. हम Next.js के साथ भी काम कर रहे हैं, ताकि INP डेटा को उनकी Analytics सेवा के हिस्से के तौर पर उपलब्ध कराया जा सके.
Angular: Aurora, सर्वर-साइड रेंडरिंग और हाइड्रेशन में सुधार करने के लिए, Angular की टीम के साथ साझेदारी कर रहा है. हम INP को बेहतर बनाने के लिए, इवेंट मैनेज करने और बदलाव का पता लगाने की सुविधा को बेहतर बनाने पर भी काम कर रहे हैं.
Vue और Nuxt.js: हम मिलकर काम करने के तरीकों को एक्सप्लोर कर रहे हैं. खास तौर पर, स्क्रिप्ट लोड करने और रेंडर करने के लिए.
फ़्रेमवर्क, INP को बेहतर बनाने के बारे में कैसे सोच रहे हैं?
React और Next.js
React.js टाइम स्लाइसिंग की सुविधा, startTransition और Suspense की मदद से लागू की जाती है. इसकी मदद से, चुनिंदा या प्रोग्रेसिव हाइड्रेशन के लिए ऑप्ट-इन किया जा सकता है. इसका मतलब है कि हाइड्रेशन, सिंक्रोनस ब्लॉक नहीं है. इसे छोटे-छोटे हिस्सों में किया जाता है, जिन्हें किसी भी समय रोका जा सकता है.
इससे, INP को बेहतर बनाने में मदद मिलेगी. साथ ही, ट्रांज़िशन के दौरान कीस्ट्रोक, कर्सर घुमाने पर होने वाले इफ़ेक्ट, और क्लिक का जवाब ज़्यादा तेज़ी से दिया जा सकेगा. इससे, React ऐप्लिकेशन को रिस्पॉन्सिव बनाए रखने में भी मदद मिलती है. भले ही, बड़े ट्रांज़िशन हों, जैसे कि अपने-आप पूरा होने की सुविधा.
Next.js ने नया रूटिंग फ़्रेमवर्क लागू किया है, जो रूट ट्रांज़िशन के लिए डिफ़ॉल्ट रूप से startTransition का इस्तेमाल करता है. इससे Next.js साइट के मालिक, React टाइम-स्लाइसिंग का इस्तेमाल कर सकते हैं. साथ ही, रूट ट्रांज़िशन की रिस्पॉन्सिविटी को बेहतर बना सकते हैं.
Angular
Angular टीम कई आइडिया एक्सप्लोर कर रही है, जिनसे INP में भी मदद मिलेगी:
- ज़ोनलेस: इससे बंडल के शुरुआती साइज़ और ज़रूरी कोड का साइज़ कम हो जाता है. यह कोड, ऐप्लिकेशन के कुछ भी रेंडर करने से पहले लोड होना चाहिए.
- हाइड्रेशन: आइलैंड-स्टाइल हाइड्रेशन, ताकि इंटरैक्शन के लिए ऐप्लिकेशन को ज़्यादा से ज़्यादा चालू न करना पड़े.
- सीडी के ओवरहेड को कम करना: उदाहरण के लिए, बदलाव का पता लगाने की प्रोसेस को कम खर्चीला बनाएं, ऐप्लिकेशन की कम जांच करने के तरीके खोजें, और बदलाव के बारे में रिऐक्टिव सिग्नल का फ़ायदा लें.
- ज़्यादा बारीकियों के साथ कोड को बांटना: शुरुआती बंडल को छोटा बनाएं.
- लोड होने की जानकारी देने वाले इंडिकेटर के लिए बेहतर सहायता:: उदाहरण के लिए, एसएसआर (सर्वर साइड रेंडरिंग) के फिर से रेंडर होने के दौरान, रूट नेविगेशन के दौरान, और लैज़ी लोडिंग ऑपरेशन के दौरान.
- प्रोफ़ाइलिंग टूल: इंटरैक्शन की लागत को समझने के लिए बेहतर डेवलपर टूल. खास तौर पर, कुछ इंटरैक्शन के लिए बदलाव का पता लगाने की लागत के बारे में.
इन सुधारों की मदद से, हम उन अलग-अलग समस्याओं को हल कर सकते हैं जिनकी वजह से वेबसाइट की परफ़ॉर्मेंस और उपयोगकर्ता अनुभव खराब होता है. साथ ही, फ़्रेमवर्क पर आधारित वेबसाइटों के लिए, सीडब्ल्यूवी मेट्रिक और नई आईएनपी मेट्रिक को बेहतर बनाया जा सकता है.
नतीजा
हमें उम्मीद है कि आने वाले समय में, INP स्कोर से वेबसाइटों को बेहतर तरीके से जवाब देने और परफ़ॉर्मेंस को बेहतर बनाने में मदद मिलेगी. हम 2023 में फ़्रेमवर्क डेवलपर के लिए, ज़्यादा काम की सलाह देने के लिए, मौजूदा INP गाइड को बेहतर बनाएंगे. हम ऐसा इन तरीकों से करेंगे:
- फ़्रेमवर्क और वेब डेवलपर के लिए, INP पर फ़ील्ड डेटा को आसानी से ऐक्सेस करने के लिए चैनल बनाना.
- ऐसी सुविधाएं बनाने के लिए फ़्रेमवर्क के साथ काम करें जो डिफ़ॉल्ट रूप से INP को बेहतर बनाएंगी.
फ़्रेमवर्क का इस्तेमाल करके, INP को ऑप्टिमाइज़ करने की प्रोसेस शुरू करने वाले लोगों के सुझाव, शिकायत या राय का हमें इंतज़ार रहेगा.