Next.js स्क्रिप्ट कॉम्पोनेंट के पीछे के विज़न को समझें. इसमें तीसरे पक्ष की स्क्रिप्ट के लोड होने को ऑप्टिमाइज़ करने के लिए, पहले से मौजूद समाधान मिलता है.
मोबाइल और डेस्कटॉप पर, वेबसाइटों से मिलने वाले करीब 45% अनुरोध, तीसरे पक्ष से होते हैं. इनमें से 33% अनुरोध स्क्रिप्ट होते हैं. तीसरे पक्ष की स्क्रिप्ट के साइज़, इंतज़ार के समय, और लोड होने की वजह से, साइट की परफ़ॉर्मेंस पर काफ़ी असर पड़ सकता है. Next.js स्क्रिप्ट कॉम्पोनेंट में पहले से मौजूद सबसे सही तरीके बताए गए हैं और ये डिफ़ॉल्ट रूप से उपलब्ध हैं. इनसे डेवलपर को अपने ऐप्लिकेशन में तीसरे पक्ष की स्क्रिप्ट जोड़ने में आसानी होती है. साथ ही, परफ़ॉर्मेंस से जुड़ी संभावित समस्याओं को हल करने में भी मदद मिलती है.
तीसरे पक्ष की स्क्रिप्ट और परफ़ॉर्मेंस पर उनका असर
तीसरे पक्ष की स्क्रिप्ट की मदद से, वेब डेवलपर मौजूदा समाधानों का इस्तेमाल करके सामान्य सुविधाओं को लागू कर सकते हैं और डेवलपमेंट में लगने वाला समय कम कर सकते हैं. हालांकि, इन स्क्रिप्ट को बनाने वालों को आम तौर पर, इस्तेमाल की जा रही वेबसाइट पर परफ़ॉर्मेंस के असर से फ़ायदा नहीं होता. ये स्क्रिप्ट, इनका इस्तेमाल करने वाले डेवलपर के लिए ब्लैकबॉक्स के तौर पर भी काम करती हैं.
स्क्रिप्ट, तीसरे पक्ष के अनुरोधों की अलग-अलग कैटगरी में वेबसाइटों को डाउनलोड किए जाने वाले तीसरे पक्ष के बाइट की बड़ी संख्या में होती हैं. डिफ़ॉल्ट रूप से, ब्राउज़र, स्क्रिप्ट को उनके दस्तावेज़ में होने की मौजूदा जगह के आधार पर प्राथमिकता देता है. इस वजह से, उपयोगकर्ता अनुभव के लिए ज़रूरी स्क्रिप्ट को खोजने या लागू करने में देरी हो सकती है.
पेज को रेंडर करने के लिए, लेआउट के लिए ज़रूरी तीसरे पक्ष की लाइब्रेरी को जल्दी लोड किया जाना चाहिए. जिन तीसरे पक्षों की शुरुआती रेंडर करने की ज़रूरत नहीं है उन्हें टाला जाना चाहिए, ताकि वे मुख्य थ्रेड पर अन्य प्रोसेसिंग को ब्लॉक न करें. रेंडर ब्लॉक करने वाले या मुख्य थ्रेड को ब्लॉक करने वाली स्क्रिप्ट को फ़्लैग करने के लिए, Lighthouse में दो ऑडिट मौजूद हैं.
अपने पेज के संसाधन लोड होने के क्रम पर ध्यान देना ज़रूरी है, ताकि ज़रूरी संसाधनों में देरी न हो और गैर-ज़रूरी संसाधन, ज़रूरी संसाधनों को ब्लॉक न करें.
तीसरे पक्षों के असर को कम करने के लिए, सबसे सही तरीके उपलब्ध हैं. हालांकि, यह ज़रूरी नहीं है कि हर व्यक्ति को यह पता हो कि तीसरे पक्ष के जिन प्रॉडक्ट का इस्तेमाल हो रहा है उन पर उन्हें कैसे लागू किया जाए. यह मुश्किल हो सकता है, क्योंकि:
- वेबसाइटें औसतन 21 से 23 अलग-अलग तीसरे पक्षों का इस्तेमाल करती हैं. इनमें मोबाइल और डेस्कटॉप पर स्क्रिप्ट भी शामिल हैं. हर कैटगरी के लिए, इस्तेमाल और सुझाव अलग-अलग हो सकते हैं.
- किसी खास फ़्रेमवर्क या यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी का इस्तेमाल किया गया है या नहीं, इसके आधार पर कई तीसरे पक्षों को लागू करने में अंतर हो सकता है.
- तीसरे पक्ष की नई लाइब्रेरी अक्सर पेश की जाती हैं.
- एक ही तीसरे पक्ष से जुड़ी कारोबार की अलग-अलग ज़रूरतें होने पर, डेवलपर के लिए इसके इस्तेमाल के लिए स्टैंडर्ड तय करना मुश्किल हो जाता है.
तीसरे पक्ष की स्क्रिप्ट पर ऑरोरा का फ़ोकस
ओपन सोर्स वेब फ़्रेमवर्क और टूल के साथ Aurora की कोलैबरेशन का एक हिस्सा है. वह मज़बूत डिफ़ॉल्ट और राय बताने वाले टूल उपलब्ध कराता है, ताकि डेवलपर को उपयोगकर्ता अनुभव के पहलुओं, जैसे कि परफ़ॉर्मेंस, सुलभता, सुरक्षा, और मोबाइल की तैयारी को बेहतर बनाने में मदद मिल सके. साल 2021 में, हमने फ़्रेमवर्क के स्टैक को उपयोगकर्ता अनुभव और उनकी वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी वाली मेट्रिक को बेहतर बनाने पर ध्यान दिया.
फ़्रेमवर्क की परफ़ॉर्मेंस को बेहतर बनाने के हमारे लक्ष्य को हासिल करने की दिशा में सबसे अहम चरणों में से एक है Next.js में तीसरे पक्ष की स्क्रिप्ट के सही लोड होने के क्रम पर रिसर्च करना. Next.js जैसे फ़्रेमवर्क को ज़रूरी डिफ़ॉल्ट और सुविधाएं देने के लिए खास जगह तय की गई है. इनसे डेवलपर को तीसरे पक्ष के साथ-साथ संसाधनों को बेहतर तरीके से लोड करने में मदद मिलती है. हमने एचटीटीपी संग्रह और लाइटहाउस से जुड़े डेटा का बहुत ज़्यादा अध्ययन किया. इसमें हमने यह पता लगाया कि तीसरे पक्ष ने अलग-अलग फ़्रेमवर्क पर सबसे ज़्यादा रेंडरिंग को ब्लॉक किया है.
किसी ऐप्लिकेशन में इस्तेमाल की जाने वाली तीसरे पक्ष की स्क्रिप्ट को मुख्य थ्रेड में ब्लॉक करने की समस्या को हल करने के लिए, हमने स्क्रिप्ट कॉम्पोनेंट बनाया है. यह कॉम्पोनेंट, क्रम से जुड़ी सुविधाओं को इकट्ठा करता है, ताकि डेवलपर को तीसरे पक्ष की स्क्रिप्ट लोड करने के लिए बेहतर कंट्रोल दिया जा सके.
फ़्रेमवर्क कॉम्पोनेंट के बिना, तीसरे पक्ष की स्क्रिप्ट का क्रम तय करना
रेंडर ब्लॉक करने वाली स्क्रिप्ट के असर को कम करने के लिए, उपलब्ध दिशा-निर्देश में तीसरे पक्ष की स्क्रिप्ट को बेहतर तरीके से लोड करने और क्रम से लगाने के लिए, ये तरीके बताए गए हैं:
<script>टैग के साथasyncयाdeferएट्रिब्यूट का इस्तेमाल करें. ये टैग, ब्राउज़र को दस्तावेज़ पार्सर को ब्लॉक किए बिना, तीसरे पक्ष की गै़र-ज़रूरी स्क्रिप्ट को लोड करने के लिए कहते हैं. शुरुआती पेज लोड के लिए ज़रूरी स्क्रिप्ट या पहले उपयोगकर्ता इंटरैक्शन को गैर-ज़रूरी माना जा सकता है.<script src="https://example.com/script1.js" defer></script> <script src="https://example.com/script2.js" async></script>प्रीकनेक्ट और डीएनएस-प्रीफ़िक्स का इस्तेमाल करके, ज़रूरी ऑरिजिन से शुरुआती कनेक्शन बनाएं. इससे अहम स्क्रिप्ट जल्द से जल्द डाउनलोड हो जाएंगी.
<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://cdnjs.cloudflare.com/polyfill/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: यह लागू की गई डिफ़ॉल्ट रणनीति है और यह डेफ़र एट्रिब्यूट वाली स्क्रिप्ट लोड करने के बराबर है. इसका इस्तेमाल उन स्क्रिप्ट के लिए किया जाना चाहिए जिन्हें पेज के इंटरैक्टिव होने के बाद ब्राउज़र चलाया जा सकता है. उदाहरण के लिए, आंकड़ों वाली स्क्रिप्ट. Next.js ये स्क्रिप्ट क्लाइंट-साइड पर लगाता है और ये पेज के हाइड्रेट होने के बाद चलते हैं. इसलिए, जब तक कुछ अलग से न बताया गया हो, स्क्रिप्ट कॉम्पोनेंट का इस्तेमाल करके तय की गई सभी तीसरे पक्ष की स्क्रिप्ट, Next.js से टाल दी जाती हैं. इस वजह से, यह एक मज़बूत डिफ़ॉल्ट सेटिंग बनाती है.lazyOnload: इस विकल्प का इस्तेमाल, कम प्राथमिकता वाली स्क्रिप्ट को लेज़ी-लोड करने के लिए किया जा सकता है. ऐसा तब होता है, जब ब्राउज़र कुछ समय से इस्तेमाल में न हो. पेज के इंटरैक्टिव होने के तुरंत बाद, ऐसी स्क्रिप्ट से मिलने वाली सुविधाओं की ज़रूरत नहीं होती. उदाहरण के लिए, चैट या सोशल मीडिया प्लग-इन.
डेवलपर, रणनीति तय करके Next.js को बता सकते हैं कि उनका ऐप्लिकेशन स्क्रिप्ट का इस्तेमाल कैसे करता है. इससे फ़्रेमवर्क, स्क्रिप्ट लोड करने के लिए ऑप्टिमाइज़ेशन और सबसे सही तरीकों को लागू कर पाता है. साथ ही, यह पक्का कर पाता है कि लोड होने का क्रम सही से हो.
स्क्रिप्ट घटक का उपयोग करके, डेवलपर देर से लोड होने वाले तृतीय-पक्षों के लिए ऐप्लिकेशन में कहीं भी तृतीय-पक्ष स्क्रिप्ट को रख सकते हैं और महत्वपूर्ण स्क्रिप्ट के लिए दस्तावेज़ के स्तर पर रख सकते हैं. इसका मतलब है कि स्क्रिप्ट का इस्तेमाल करके, स्क्रिप्ट कॉम्पोनेंट को कॉम्पोनेंट के साथ रखा जा सकता है. हाइड्रेशन के बाद इस्तेमाल की गई रणनीति के आधार पर, स्क्रिप्ट को शुरुआत में रेंडर किए गए दस्तावेज़ के हेड में या मुख्य भाग के निचले हिस्से में डाला जाएगा.
असर का आकलन करना
हमने Next.js कॉमर्स ऐप्लिकेशन और स्टार्टर ब्लॉग के लिए टेंप्लेट का इस्तेमाल करके, दो डेमो ऐप्लिकेशन बनाए. इनसे तीसरे पक्ष की स्क्रिप्ट को शामिल करने के असर का आकलन करने में मदद मिली. Google Tag Manager और सोशल मीडिया एम्बेड करने के लिए, आम तौर पर इस्तेमाल होने वाले तीसरे पक्षों को इन ऐप्लिकेशन के पेजों पर पहले सीधे तौर पर और फिर स्क्रिप्ट कॉम्पोनेंट की मदद से शामिल किया जाता था. इसके बाद, हमने WebPageTest पर इन पेजों की परफ़ॉर्मेंस की तुलना की.
Next.js कॉमर्स ऐप्लिकेशन में तीसरे पक्ष की स्क्रिप्ट
नीचे दिए गए तरीके से डेमो के लिए, कॉमर्स ऐप्लिकेशन टेंप्लेट में तीसरे पक्ष की स्क्रिप्ट जोड़ी गई.
नीचे दी गई तुलना, Next.js कॉमर्स स्टार्टर-किट के दोनों वर्शन में हुई प्रोग्रेस को दिखाती है. जैसा कि देखा गया है, एलसीपी करीब 1 सेकंड पहले शुरू होता है. ऐसा तब होता है, जब स्क्रिप्ट कॉम्पोनेंट सही तरीके से लोड होने की रणनीति के साथ चालू होता है.
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 टैग मैनेजर (GTM) जैसे तीसरे पक्ष की लोकप्रिय स्क्रिप्ट को शामिल करने का सिंटैक्स और लोडिंग की रणनीति आम तौर पर ठीक हो जाती है. हर तरह की स्क्रिप्ट के लिए, इन्हें अलग-अलग रैपर कॉम्पोनेंट में एनकैप्सुलेट किया जा सकता है. डेवलपर के लिए ऐप्लिकेशन-विशिष्ट विशेषताओं (जैसे ट्रैकिंग आईडी) का केवल एक कम से कम सेट उपलब्ध होगा. रैपर कॉम्पोनेंट से डेवलपर को ये काम करने में मदद मिलेगी:
- उनके लिए लोकप्रिय स्क्रिप्ट टैग को शामिल करना आसान बनाया जा रहा है.
- यह पक्का करना कि फ़्रेमवर्क, हुड के तहत सबसे बेहतर रणनीति का इस्तेमाल करता है.
नतीजा
तीसरे पक्ष की स्क्रिप्ट, आम तौर पर इस्तेमाल की जा रही वेबसाइट में खास सुविधाओं को शामिल करने के लिए बनाई जाती हैं. हमारा सुझाव है कि गै़र-ज़रूरी स्क्रिप्ट के असर को कम करने के लिए, उन्हें टाल दें. Next.js स्क्रिप्ट कॉम्पोनेंट डिफ़ॉल्ट रूप से ऐसा करता है. डेवलपर को यह भरोसा होता है कि शामिल की गई स्क्रिप्ट, अहम सुविधाओं में तब तक देरी नहीं करेंगी, जब तक वे beforeInteractive रणनीति को साफ़ तौर पर लागू नहीं करते. Next.js स्क्रिप्ट कॉम्पोनेंट की तरह ही, फ़्रेमवर्क के डेवलपर अन्य फ़्रेमवर्क में भी इन सुविधाओं को बना सकते हैं. हम Nuxt.js टीम की मदद से, इसी तरह का कॉम्पोनेंट लाने के लिए लगातार काम कर रहे हैं. सुझावों के आधार पर, हम स्क्रिप्ट कॉम्पोनेंट को और बेहतर बनाने की कोशिश करते हैं, ताकि इस्तेमाल के अन्य उदाहरण शामिल किए जा सकें.
लोगों का आभार
इस पोस्ट पर सुझाव देने के लिए, कैरा एरिकसन, जैनिक्लस राल्फ़, केटी हेम्पेनियस, फ़िलिप वॉल्टन, जेरेमी वैगनर, और एडी उस्मानी का धन्यवाद.