Next.js के स्क्रिप्ट कॉम्पोनेंट के विज़न को समझें, जो तीसरे पक्ष की स्क्रिप्ट को लोड करने की प्रोसेस को ऑप्टिमाइज़ करने के लिए एक बिल्ट-इन समाधान देता है.
मोबाइल और डेस्कटॉप पर दिखने वाली वेबसाइटों से मिलने वाले करीब 45% अनुरोध, तीसरे पक्ष के होते हैं. इनमें से 33% अनुरोध स्क्रिप्ट के लिए होते हैं. तीसरे पक्ष की स्क्रिप्ट का साइज़, इंतज़ार का समय, और लोड होने से साइट की परफ़ॉर्मेंस पर काफ़ी असर पड़ सकता है. Next.js स्क्रिप्ट कॉम्पोनेंट में सबसे सही तरीके और डिफ़ॉल्ट तरीके शामिल होते हैं. इसकी मदद से, डेवलपर अपने ऐप्लिकेशन में तीसरे पक्ष की स्क्रिप्ट पेश कर सकते हैं. साथ ही, परफ़ॉर्मेंस की समस्याओं को आसानी से हल कर सकते हैं.
तीसरे पक्ष की स्क्रिप्ट और परफ़ॉर्मेंस पर उनका असर
तीसरे पक्ष की स्क्रिप्ट की मदद से, वेब डेवलपर मौजूदा समाधानों का फ़ायदा लेकर, सामान्य सुविधाओं को लागू कर सकते हैं और डेवलपमेंट में लगने वाले समय को कम कर सकते हैं. हालांकि, इन स्क्रिप्ट को बनाने वालों को आम तौर पर, इस्तेमाल करने वाली वेबसाइट पर परफ़ॉर्मेंस के असर के बारे में सोचने का कोई इंसेंटिव नहीं मिलता. ये स्क्रिप्ट, उन डेवलपर के लिए ब्लैकबॉक्स भी होती हैं जो इनका इस्तेमाल करते हैं.
स्क्रिप्ट में, तीसरे पक्ष के अनुरोधों की अलग-अलग कैटगरी के हिसाब से, वेबसाइटों से डाउनलोड की गई तीसरे पक्ष की बड़ी संख्या शामिल होती है. डिफ़ॉल्ट रूप से ब्राउज़र, स्क्रिप्ट को उस जगह के हिसाब से प्राथमिकता देता है जहां वे दस्तावेज़ में मौजूद हैं. इससे उपयोगकर्ता अनुभव के लिए ज़रूरी स्क्रिप्ट को खोजने या उन पर काम करने में देरी हो सकती है.
पेज को रेंडर करने के लिए, लेआउट के लिए ज़रूरी तीसरे पक्ष की लाइब्रेरी को जल्दी लोड किया जाना चाहिए. तीसरे पक्ष की जो शुरुआती रेंडर ज़रूरी नहीं है उन्हें कुछ समय के लिए रोका जाना चाहिए, ताकि वे मुख्य थ्रेड पर दूसरी प्रोसेसिंग को ब्लॉक न करें. Lighthouse में रेंडर-ब्लॉकिंग या मुख्य थ्रेड ब्लॉक करने वाली स्क्रिप्ट को फ़्लैग करने के लिए दो ऑडिट होते हैं.
अपने पेज पर संसाधन लोड होने के क्रम को ध्यान में रखना ज़रूरी है, ताकि अहम संसाधनों को देर से लोड न किया जा सके. साथ ही, गैर-ज़रूरी संसाधन, अहम संसाधनों को ब्लॉक न करें.
हालांकि, तीसरे पक्ष के असर को कम करने के सबसे सही तरीके हैं. हालांकि, ज़रूरी नहीं है कि सभी लोगों को यह पता हो कि तीसरे पक्ष के हर ऐप्लिकेशन के लिए, इन तरीकों को कैसे लागू किया जाए. यह मुश्किल हो सकता है, क्योंकि:
- औसतन, वेबसाइटें, मोबाइल और डेस्कटॉप पर, 21 से 23 अलग-अलग तीसरे पक्षों का इस्तेमाल करती हैं. इनमें स्क्रिप्ट भी शामिल हैं. हर प्रॉडक्ट के लिए, इस्तेमाल और सुझाव अलग-अलग हो सकते हैं.
- तीसरे पक्षों को लागू करने का तरीका, इस आधार पर अलग-अलग हो सकता है कि किसी खास फ़्रेमवर्क या यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी का इस्तेमाल किया गया है या नहीं.
- तीसरे पक्ष की नई लाइब्रेरी समय-समय पर उपलब्ध कराई जाती हैं.
- एक ही तीसरे पक्ष की कारोबार की शर्तों में अलग-अलग होने की वजह से, डेवलपर के लिए इसके इस्तेमाल का स्टैंडर्ड तय करना मुश्किल हो जाता है.
तीसरे पक्ष की स्क्रिप्ट पर ऑरोरा का फ़ोकस
ओपन सोर्स वेब फ़्रेमवर्क और टूल के साथ Aurora के मिलकर काम करने का एक हिस्सा, डिफ़ॉल्ट और बेहतर टूल उपलब्ध कराना है. इससे डेवलपर को उपयोगकर्ता अनुभव के पहलुओं को बेहतर बनाने में मदद मिलती है, जैसे कि परफ़ॉर्मेंस, सुलभता, सुरक्षा, और मोबाइल रेडीनेस स्कोर. साल 2021 में, हमारा ध्यान फ़्रेमवर्क स्टैक से उपयोगकर्ता अनुभव और वेबसाइट की परफ़ॉर्मेंस की जानकारी वाली मेट्रिक को बेहतर बनाने पर था.
फ़्रेमवर्क की परफ़ॉर्मेंस को बेहतर बनाने के हमारे लक्ष्य को हासिल करने की दिशा में, यह सबसे अहम कदम है. इसके लिए, Next.js में तीसरे पक्ष की स्क्रिप्ट के लोड होने के सबसे सही क्रम पर रिसर्च करना शामिल है. Next.js जैसे फ़्रेमवर्क को खास तौर पर उपयोगकर्ताओं को बेहतर डिफ़ॉल्ट बनाने और सुविधाएं उपलब्ध कराने के लिए बनाया गया है. इनसे डेवलपर को तीसरे पक्ष के साथ-साथ, संसाधनों को बेहतर तरीके से लोड करने में मदद मिलती है. हमने एचटीटीपी संग्रह और लाइटहाउस डेटा का बारीकी से अध्ययन किया. इससे यह पता लगाया जा सका कि कौनसे तीसरे पक्ष, अलग-अलग फ़्रेमवर्क में सबसे ज़्यादा रेंडरिंग ब्लॉक करते हैं.
किसी ऐप्लिकेशन में इस्तेमाल की जाने वाली मुख्य थ्रेड को ब्लॉक करने वाली तीसरे पक्ष की स्क्रिप्ट की समस्या को हल करने के लिए, हमने स्क्रिप्ट कॉम्पोनेंट बनाया है. कॉम्पोनेंट, सीक्वेंसिंग सुविधाओं को शामिल करता है, ताकि डेवलपर को तीसरे पक्ष की स्क्रिप्ट लोड होने के दौरान बेहतर कंट्रोल मिल सके.
फ़्रेमवर्क कॉम्पोनेंट के बिना, तीसरे पक्ष की स्क्रिप्ट को क्रम से लगाना
रेंडर-ब्लॉक करने वाली स्क्रिप्ट के असर को कम करने के लिए, उपलब्ध दिशा-निर्देश में ये तरीके बताए गए हैं: तीसरे पक्ष की स्क्रिप्ट को बेहतर तरीके से लोड करने और क्रम से लगाने के लिए:
asyncयाdeferएट्रिब्यूट का इस्तेमाल<script>टैग के साथ करें. यह एट्रिब्यूट, ब्राउज़र को दस्तावेज़ पार्सर को ब्लॉक किए बिना, तीसरे पक्ष के गै़र-ज़रूरी स्क्रिप्ट लोड करने के लिए कहता है. शुरुआती पेज लोड के लिए स्क्रिप्ट की ज़रूरत नहीं होती या उपयोगकर्ता के पहले इंटरैक्शन को ग़ैर-ज़रूरी माना जा सकता है.<script src="https://example.com/script1.js" defer></script> <script src="https://example.com/script2.js" async></script>प्रीकनेक्ट और dns-प्रीकनेक्ट का इस्तेमाल करके, ज़रूरी ऑरिजिन से शुरुआती कनेक्शन बनाएं. इससे ज़रूरी स्क्रिप्ट को पहले डाउनलोड किया जा सकता है.
<head> <link rel="preconnect" href="http://PreconnThis.com"> <link rel="dns-prefetch" href="http://PrefetchThis.com"> </head>मुख्य पेज का कॉन्टेंट लोड होने के बाद या उपयोगकर्ता के पेज के उस हिस्से तक स्क्रोल करने के बाद, जहां उन्हें शामिल किया गया है, तीसरे पक्ष के रिसॉर्स और एम्बेड किए गए आइटम लेज़ी-लोड.
Next.js स्क्रिप्ट कॉम्पोनेंट
Next.js स्क्रिप्ट कॉम्पोनेंट, सिलसिलेवार स्क्रिप्ट के लिए ऊपर दिए गए तरीकों को लागू करता है. साथ ही, डेवलपर के लिए एक टेंप्लेट उपलब्ध कराता है, ताकि वे लोड होने की रणनीति तय कर सकें. सही रणनीति तय करने के बाद, यह अन्य ज़रूरी संसाधनों को ब्लॉक किए बिना बेहतर तरीके से लोड होगी.
स्क्रिप्ट कॉम्पोनेंट, एचटीएमएल <script> टैग पर काम करता है और रणनीति एट्रिब्यूट का इस्तेमाल करके, तीसरे पक्ष की स्क्रिप्ट के लिए लोड होने की प्राथमिकता सेट करने का विकल्प देता है.
// Example for beforeInteractive:
<Script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserverEntry%2CIntersectionObserver" strategy="beforeInteractive" />
// Example for afterInteractive (default):
<Script src="https://example.com/samplescript.js" />
// Example for lazyonload:
<Script src="https://connect.facebook.net/en_US/sdk.js" strategy="lazyOnload" />
रणनीति एट्रिब्यूट में तीन वैल्यू हो सकती हैं.
beforeInteractive: इस विकल्प का इस्तेमाल उन ज़रूरी स्क्रिप्ट के लिए किया जा सकता है जिन्हें पेज के इंटरैक्टिव होने से पहले ही लागू किया जाना चाहिए. Next.js यह पक्का करता है कि ऐसी स्क्रिप्ट को सर्वर पर शुरुआती एचटीएमएल में इंजेक्ट किया जाए और दूसरे सेल्फ़-बंडल किए गए JavaScript से पहले एक्ज़ीक्यूट किया जाए. सहमति मैनेजमेंट, बॉट की पहचान करने वाली स्क्रिप्ट या अहम कॉन्टेंट को रेंडर करने के लिए ज़रूरी हेल्पर लाइब्रेरी, इस रणनीति का इस्तेमाल कर सकते हैं.afterInteractive: यह डिफ़ॉल्ट रणनीति लागू होती है. यह डेफ़र एट्रिब्यूट वाली स्क्रिप्ट को लोड करने के बराबर है. इसका इस्तेमाल उन स्क्रिप्ट के लिए किया जाना चाहिए जिन्हें पेज के इंटरैक्टिव होने के बाद ब्राउज़र चलाया जा सकता है—उदाहरण के लिए, Analytics स्क्रिप्ट. Next.js इन स्क्रिप्ट को क्लाइंट-साइड पर इंजेक्ट करता है और पेज के हाइड्रेट होने के बाद चलता है. इसलिए, जब तक अलग से निर्देश नहीं दिए जाते, तब तक स्क्रिप्ट कॉम्पोनेंट का इस्तेमाल करके तय की गई तीसरे पक्ष की सभी स्क्रिप्ट को Next.js में टाल दिया जाता है. इस तरह, एक मज़बूत डिफ़ॉल्ट सेटिंग मिलती है.lazyOnload: इस विकल्प का इस्तेमाल, कम प्राथमिकता वाली स्क्रिप्ट को लेज़ी-लोड करने के लिए किया जा सकता है. ऐसा तब किया जाता है, जब ब्राउज़र का कुछ समय के लिए इस्तेमाल न किया जा रहा हो. पेज के इंटरैक्टिव होने के तुरंत बाद, इस तरह की स्क्रिप्ट से मिलने वाले फ़ंक्शन की ज़रूरत नहीं होती है. उदाहरण के लिए, चैट या सोशल मीडिया प्लग-इन.
डेवलपर, रणनीति के बारे में बताकर Next.js को यह बता सकते हैं कि उनका ऐप्लिकेशन स्क्रिप्ट का इस्तेमाल कैसे करता है. इससे फ़्रेमवर्क, स्क्रिप्ट को लोड करने के लिए ऑप्टिमाइज़ेशन और सबसे सही तरीके लागू कर पाता है. साथ ही, यह पक्का करता है कि लोड होने का क्रम सबसे सही हो.
स्क्रिप्ट कॉम्पोनेंट का इस्तेमाल करके, डेवलपर तीसरे पक्ष की स्क्रिप्ट को ऐप्लिकेशन में कहीं भी डाल सकते हैं. साथ ही, वे तीसरे पक्षों को देर से लोड करने के लिए, तीसरे पक्ष की स्क्रिप्ट को दस्तावेज़ के लेवल पर भी डाल सकते हैं. इसका मतलब है कि स्क्रिप्ट का इस्तेमाल करने वाले कॉम्पोनेंट के साथ-साथ, स्क्रिप्ट कॉम्पोनेंट भी मौजूद हो सकता है. हाइड्रेशन के बाद, इस्तेमाल की गई रणनीति के आधार पर स्क्रिप्ट को शुरू में रेंडर किए गए दस्तावेज़ के सबसे ऊपर या मुख्य हिस्से में इंजेक्ट किया जाएगा.
प्रभाव को मापना
हमने Next.js कॉमर्स ऐप्लिकेशन और स्टार्टर ब्लॉग के लिए टेंप्लेट का इस्तेमाल करके, दो डेमो ऐप्लिकेशन बनाए. इनसे तीसरे पक्ष की स्क्रिप्ट को शामिल करने से पड़ने वाले असर को मेज़र करने में मदद मिली. Google Tag Manager के लिए आम तौर पर इस्तेमाल होने वाले तीसरे पक्ष और सोशल मीडिया एम्बेड, इन ऐप्लिकेशन के पेजों पर पहले सीधे और फिर स्क्रिप्ट कॉम्पोनेंट के ज़रिए शामिल किए जाते थे. इसके बाद, हमने WebPageTest पर इन पेजों के परफ़ॉर्मेंस की तुलना की.
Next.js कॉमर्स ऐप्लिकेशन में तीसरे पक्ष की स्क्रिप्ट
नीचे दिए गए डेमो के लिए, तीसरे पक्ष की स्क्रिप्ट को कॉमर्स ऐप्लिकेशन टेंप्लेट में जोड़ा गया.
नीचे दी गई तुलना, Next.js commerce Starter-kit के दोनों वर्शन की विज़ुअल प्रोग्रेस को दिखाती है. जैसा कि देखा गया है, एलसीपी करीब एक सेकंड पहले शुरू होता है. इसमें स्क्रिप्ट कॉम्पोनेंट को लोड करने के लिए सही रणनीति के साथ चालू किया जाता है.
Next.js ब्लॉग में तीसरे पक्ष की स्क्रिप्ट
डेमो ब्लॉग ऐप्लिकेशन में तीसरे पक्ष की स्क्रिप्ट जोड़ी गई हैं, जैसा कि नीचे दिया गया है.
| पहला हिस्सा | बाद में |
|---|---|
| एसिंक्रोनस के साथ Google Tag Manager | रणनीति वाला स्क्रिप्ट कॉम्पोनेंट = चारों स्क्रिप्ट में से हर एक के लिए लेज़िऑनलोड |
| एसिंक्रोनस के साथ Twitter फ़ॉलो बटन | |
| YouTube पर, 'सदस्यता लें' बटन, जो एसिंक्रोनस या डेफ़र नहीं किया जाता है | |
| LinkedIn को फ़ॉलो करने के लिए, एसिंक्रोनस या डेफ़र न करने वाला बटन |
जैसा कि वीडियो में दिखाया गया है, फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी), पेज पर स्क्रिप्ट कॉम्पोनेंट के बिना 0.9 सेकंड पर और स्क्रिप्ट कॉम्पोनेंट के साथ 0.4 सेकंड पर होता है.
स्क्रिप्ट कॉम्पोनेंट में अगला क्या होगा
afterInteractive और lazyOnload के लिए रणनीति वाले विकल्प, रेंडर ब्लॉक करने वाली स्क्रिप्ट पर अहम कंट्रोल उपलब्ध कराते हैं. साथ ही, हम ऐसे अन्य विकल्पों का भी पता लगा रहे हैं जिनसे स्क्रिप्ट कॉम्पोनेंट की उपयोगिता बढ़ सकती है.
वेब वर्कर का इस्तेमाल करना
वेब वर्कर का इस्तेमाल, बैकग्राउंड थ्रेड पर अलग-अलग स्क्रिप्ट चलाने के लिए किया जा सकता है. यह मुख्य थ्रेड को खाली कर सकता है, ताकि प्रोसेसिंग के यूज़र इंटरफ़ेस के टास्क को हैंडल किया जा सके और परफ़ॉर्मेंस को बेहतर बनाया जा सके. वेब वर्कर, JavaScript की प्रोसेसिंग को ऑफ़लोड करने के लिए सबसे सही होते हैं, न कि मुख्य थ्रेड से अलग, यूज़र इंटरफ़ेस (यूआई) के काम करने की. ग्राहक सहायता या मार्केटिंग के लिए इस्तेमाल की जाने वाली स्क्रिप्ट, आम तौर पर यूज़र इंटरफ़ेस (यूआई) के साथ इंटरैक्ट नहीं करती हैं. इसलिए, बैकग्राउंड थ्रेड पर उन्हें चलाने का बेहतर विकल्प हो सकता है. तीसरे पक्ष की एक छोटी लाइब्रेरी—PartyTown—का इस्तेमाल, ऐसी स्क्रिप्ट को किसी वेब वर्कर में अलग करने के लिए किया जा सकता है.
मौजूदा समय में Next.js स्क्रिप्ट कॉम्पोनेंट लागू होने के साथ, हमारा सुझाव है कि रणनीति को afterInteractive या lazyOnload पर सेट करके, इन स्क्रिप्ट को मुख्य थ्रेड पर कुछ समय के लिए रोकें. आने वाले समय में, हम एक नया रणनीति विकल्प, 'worker' पेश करने का सुझाव दे रहे हैं. इससे Next.js, PartyTown या वेब वर्कर पर स्क्रिप्ट चलाने के लिए कस्टम समाधान का इस्तेमाल कर पाएगा. हम इस आरएफ़सी पर, डेवलपर की टिप्पणियों का स्वागत करते हैं.
सीएलएस को कम करना
लेज़ी लोड होने पर, तीसरे पक्ष के एम्बेड, जैसे कि विज्ञापन, वीडियो या सोशल मीडिया फ़ीड एम्बेड करने पर, लेआउट शिफ़्ट हो सकता है. इससे, पेज के उपयोगकर्ता अनुभव और कुल लेआउट शिफ़्ट (सीएलएस) मेट्रिक पर असर पड़ता है. जिस कंटेनर में एम्बेड लोड होगा उसका साइज़ बताकर, सीएलएस को कम किया जा सकता है.
स्क्रिप्ट कॉम्पोनेंट का इस्तेमाल एम्बेड लोड करने के लिए किया जा सकता है, जिनकी वजह से लेआउट शिफ़्ट हो सकता है. हम इसे बेहतर बनाने के बारे में सोच रहे हैं, ताकि कॉन्फ़िगरेशन के विकल्प उपलब्ध करा सकें. इससे सीएलएस को कम करने में मदद मिलेगी. इसे स्क्रिप्ट कॉम्पोनेंट में या कंपैनियन कॉम्पोनेंट के तौर पर उपलब्ध कराया जा सकता है.
रैपर के कॉम्पोनेंट
Google Analytics या Google Tag Manager (GTM) जैसे तीसरे पक्ष की लोकप्रिय स्क्रिप्ट को शामिल करने के लिए, सिंटैक्स और लोड करने की रणनीति आम तौर पर ठीक की जाती है. हर तरह की स्क्रिप्ट के लिए, इन्हें अलग-अलग रैपर कॉम्पोनेंट में कंप्रेस किया जा सकता है. डेवलपर के लिए, ऐप्लिकेशन के लिए खास तौर पर बने एट्रिब्यूट (जैसे कि ट्रैकिंग आईडी) का एक छोटा सेट ही उपलब्ध होगा. रैपर कॉम्पोनेंट से डेवलपर को इन कामों में मदद मिलेगी:
- उनकी मदद से, लोकप्रिय स्क्रिप्ट टैग को आसानी से शामिल किया जा सकता है.
- यह पक्का करें कि फ़्रेमवर्क, सबसे बेहतर रणनीति का इस्तेमाल करता हो.
नतीजा
आम तौर पर, तीसरे पक्ष की स्क्रिप्ट इसलिए बनाई जाती हैं, ताकि इस्तेमाल करने वाली वेबसाइट में खास सुविधाएं शामिल की जा सकें. हम गैर-ज़रूरी स्क्रिप्ट के असर को कम करने के लिए उन्हें कुछ समय के लिए रोकने का सुझाव देते हैं. Next.js स्क्रिप्ट कॉम्पोनेंट डिफ़ॉल्ट रूप से ऐसा करता है. डेवलपर को इस बात का भरोसा होता है कि जब तक वे स्क्रिप्ट को साफ़ तौर पर beforeInteractive रणनीति को लागू नहीं करते, तब तक स्क्रिप्ट के अहम फ़ंक्शन में कोई देरी नहीं होगी. Next.js स्क्रिप्ट कॉम्पोनेंट की तरह, फ़्रेमवर्क डेवलपर अन्य फ़्रेमवर्क में भी इन सुविधाओं को बनाने के बारे में सोच सकते हैं. हम Nuxt.js टीम के साथ ऐसे ही कॉम्पोनेंट की लैंडिंग पर लगातार काम कर रहे हैं. सुझावों के आधार पर, हम स्क्रिप्ट कॉम्पोनेंट को और बेहतर बनाने की कोशिश कर रहे हैं, ताकि इस्तेमाल के अन्य उदाहरणों को शामिल किया जा सके.
लोगों का आभार
इस पोस्ट पर सुझाव देने के लिए, कारा एरिकसन, जेनिकलास राल्फ़, केटी हेम्पेनियस, फ़िलिप वॉल्टन, जेरेमी वैगनर, और एडी ओस्मानी का धन्यवाद.