Next.js में, तीसरे पक्ष की स्क्रिप्ट लोड होने के लिए ऑप्टिमाइज़ करना

Next.js के स्क्रिप्ट कॉम्पोनेंट के पीछे के विज़न को समझें. यह तीसरे पक्ष की स्क्रिप्ट को लोड करने के लिए, पहले से मौजूद समाधान उपलब्ध कराता है.

Leena Sohoni

Houssein Djirdeh

मोबाइल और डेस्कटॉप पर, वेबसाइटों से मिलने वाले करीब 45% अनुरोध, तीसरे पक्ष से होते हैं. इनमें से 33% अनुरोध स्क्रिप्ट होते हैं. तीसरे पक्ष की स्क्रिप्ट के साइज़, इंतज़ार के समय, और लोड होने पर साइट की परफ़ॉर्मेंस पर काफ़ी असर पड़ सकता है. Next.js स्क्रिप्ट कॉम्पोनेंट में, सबसे सही तरीके और डिफ़ॉल्ट सेटिंग पहले से मौजूद होती हैं. इससे डेवलपर को अपने ऐप्लिकेशन में तीसरे पक्ष की स्क्रिप्ट इस्तेमाल करने में मदद मिलती है. साथ ही, परफ़ॉर्मेंस से जुड़ी संभावित समस्याओं को भी आसानी से हल किया जा सकता है.

तीसरे पक्ष की स्क्रिप्ट और परफ़ॉर्मेंस पर उनका असर

तीसरे पक्ष की स्क्रिप्ट की मदद से, वेब डेवलपर सामान्य सुविधाओं को लागू करने और डेवलपमेंट में लगने वाले समय को कम करने के लिए, मौजूदा समाधानों का फ़ायदा ले सकते हैं. हालांकि, आम तौर पर इन स्क्रिप्ट के क्रिएटर्स को, इन्हें इस्तेमाल करने वाली वेबसाइट की परफ़ॉर्मेंस पर पड़ने वाले असर की परवाह नहीं होती. ये स्क्रिप्ट, इनका इस्तेमाल करने वाले डेवलपर के लिए ब्लैकबॉक्स के तौर पर भी काम करती हैं.

स्क्रिप्ट, तीसरे पक्ष के अनुरोधों की अलग-अलग कैटगरी में वेबसाइटों से डाउनलोड किए गए तीसरे पक्ष के बाइट की ज़्यादा संख्या के लिए ज़िम्मेदार होती हैं. डिफ़ॉल्ट रूप से, ब्राउज़र दस्तावेज़ में मौजूद स्क्रिप्ट की प्राथमिकता तय करता है. इस वजह से, उपयोगकर्ता अनुभव के लिए ज़रूरी स्क्रिप्ट को खोजने या उन्हें लागू करने में देरी हो सकती है.

पेज को रेंडर करने के लिए, लेआउट के लिए ज़रूरी तीसरे पक्ष की लाइब्रेरी को पहले लोड किया जाना चाहिए. शुरुआती रेंडरिंग के लिए ज़रूरी नहीं होने वाले तीसरे पक्षों को बाद में लोड किया जाना चाहिए, ताकि वे मुख्य थ्रेड पर अन्य प्रोसेसिंग को ब्लॉक न करें. Lighthouse में दो ऑडिट होते हैं, जिनकी मदद से रेंडरिंग को रोकने वाली या मुख्य थ्रेड को ब्लॉक करने वाली स्क्रिप्ट को फ़्लैग किया जा सकता है.

अपने पेज के संसाधन लोड होने के क्रम पर ध्यान देना ज़रूरी है, ताकि ज़रूरी संसाधनों में देरी न हो और गैर-ज़रूरी संसाधन, ज़रूरी संसाधनों को ब्लॉक न करें.

तीसरे पक्ष के असर को कम करने के लिए, सबसे सही तरीके मौजूद हैं. हालांकि, हो सकता है कि हर व्यक्ति को यह पता न हो कि तीसरे पक्ष के हर टूल के लिए, इन तरीकों को कैसे लागू किया जाए. यह मुश्किल हो सकता है, क्योंकि:

• वेबसाइटें औसतन 21 से 23 अलग-अलग तीसरे पक्षों का इस्तेमाल करती हैं. इनमें मोबाइल और डेस्कटॉप पर स्क्रिप्ट भी शामिल हैं. हर एक के लिए, इस्तेमाल और सुझाव अलग-अलग हो सकते हैं.
• कई तीसरे पक्षों को लागू करने का तरीका अलग-अलग हो सकता है. यह इस बात पर निर्भर करता है कि किसी खास फ़्रेमवर्क या यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी का इस्तेमाल किया गया है या नहीं.
• तीसरे पक्ष की नई लाइब्रेरी अक्सर लॉन्च की जाती हैं.
• एक ही तीसरे पक्ष के लिए कारोबार की अलग-अलग ज़रूरतें होने की वजह से, डेवलपर के लिए उसके इस्तेमाल को स्टैंडर्ड बनाना मुश्किल हो जाता है.

तीसरे पक्ष की स्क्रिप्ट पर ऑरोरा का फ़ोकस

ओपन सोर्स वेब फ़्रेमवर्क और टूल के साथ Aurora की कोलैबरेशन का एक हिस्सा है. वह मज़बूत डिफ़ॉल्ट और राय बताने वाले टूल उपलब्ध कराता है, ताकि डेवलपर को उपयोगकर्ता अनुभव के पहलुओं, जैसे कि परफ़ॉर्मेंस, सुलभता, सुरक्षा, और मोबाइल की तैयारी को बेहतर बनाने में मदद मिल सके. साल 2021 में, हमने फ़्रेमवर्क स्टैक के उपयोगकर्ता अनुभव और उनकी वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी वाली मेट्रिक को बेहतर बनाने पर फ़ोकस किया था.

फ़्रेमवर्क की परफ़ॉर्मेंस को बेहतर बनाने के हमारे लक्ष्य को हासिल करने की दिशा में सबसे अहम चरणों में से एक है Next.js में तीसरे पक्ष की स्क्रिप्ट के सही लोड होने के क्रम पर रिसर्च करना. Next.js जैसे फ़्रेमवर्क, काम के डिफ़ॉल्ट विकल्प और सुविधाएं देने के लिए खास तौर पर बनाए गए हैं. इनकी मदद से, डेवलपर तीसरे पक्ष के साथ-साथ संसाधनों को बेहतर तरीके से लोड कर पाते हैं. हमने एचटीटीपी संग्रह और Lighthouse के डेटा का ज़्यादा से ज़्यादा अध्ययन किया, ताकि यह पता लगाया जा सके कि अलग-अलग फ़्रेमवर्क में कौनसे तीसरे पक्ष, रेंडरिंग को सबसे ज़्यादा ब्लॉक करते हैं.

किसी ऐप्लिकेशन में इस्तेमाल की गई तीसरे पक्ष की स्क्रिप्ट को मुख्य थ्रेड ब्लॉक करने की समस्या को हल करने के लिए, हमने स्क्रिप्ट कॉम्पोनेंट बनाया है. यह कॉम्पोनेंट, क्रम से चलने की सुविधाओं को शामिल करता है, ताकि डेवलपर को तीसरे पक्ष की स्क्रिप्ट लोड करने के लिए बेहतर कंट्रोल मिल सकें.

फ़्रेमवर्क कॉम्पोनेंट के बिना, तीसरे पक्ष की स्क्रिप्ट को क्रम से लगाना

रेंडरिंग को रोकने वाली स्क्रिप्ट के असर को कम करने के लिए, उपलब्ध दिशा-निर्देशों में तीसरे पक्ष की स्क्रिप्ट को असरदार तरीके से लोड करने और उनका क्रम तय करने के लिए ये तरीके बताए गए हैं:

1. <script> टैग के साथ async या defer एट्रिब्यूट का इस्तेमाल करें. इससे ब्राउज़र को यह पता चलता है कि दस्तावेज़ पार्सर को ब्लॉक किए बिना, तीसरे पक्ष की गै़र-ज़रूरी स्क्रिप्ट लोड करें. पेज के शुरुआती लोड या उपयोगकर्ता के पहले इंटरैक्शन के लिए ज़रूरी नहीं होने वाली स्क्रिप्ट को ग़ैर-ज़रूरी माना जा सकता है.

      <script src="https://example.com/script1.js" defer></script>
      <script src="https://example.com/script2.js" async></script>
   

2. प्री-कनेक्ट और dns-प्रीफ़ेच का इस्तेमाल करके, ज़रूरी ऑरिजिन से जल्दी कनेक्शन बनाएं. इससे ज़रूरी स्क्रिप्ट जल्द से जल्द डाउनलोड हो जाएंगी.

      <head>
          <link rel="preconnect" href="http://PreconnThis.com">
          <link rel="dns-prefetch" href="http://PrefetchThis.com">
      </head>
   

3. तीसरे पक्ष के रिसॉर्स और एम्बेड को धीरे-धीरे लोड करें. ऐसा तब करें, जब मुख्य पेज का कॉन्टेंट लोड हो जाए या जब उपयोगकर्ता पेज के उस हिस्से तक स्क्रोल कर जाए जहां वे शामिल हैं.

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" />

रणनीति वाले एट्रिब्यूट में तीन वैल्यू हो सकती हैं.

1. beforeInteractive: इस विकल्प का इस्तेमाल उन ज़रूरी स्क्रिप्ट के लिए किया जा सकता है जिन्हें पेज के इंटरैक्टिव होने से पहले लागू करना चाहिए. Next.js यह पक्का करता है कि ऐसी स्क्रिप्ट, सर्वर पर शुरुआती एचटीएमएल में इंजेक्ट की जाएं और खुद को बंडल करने वाली अन्य JavaScript से पहले लागू की जाएं. इस रणनीति के लिए, सहमति मैनेजमेंट, बॉट का पता लगाने वाली स्क्रिप्ट या अहम कॉन्टेंट को रेंडर करने के लिए ज़रूरी हेल्पर लाइब्रेरी का इस्तेमाल किया जा सकता है.

2. afterInteractive: यह डिफ़ॉल्ट रणनीति है. यह defer एट्रिब्यूट के साथ स्क्रिप्ट लोड करने के बराबर है. इसका इस्तेमाल उन स्क्रिप्ट के लिए किया जाना चाहिए जिन्हें पेज के इंटरैक्टिव होने के बाद ब्राउज़र चलाया जा सकता है. उदाहरण के लिए, आंकड़ों वाली स्क्रिप्ट. Next.js, इन स्क्रिप्ट को क्लाइंट-साइड पर इंजेक्ट करता है. ये स्क्रिप्ट, पेज के हाइड्रेट होने के बाद चलती हैं. इसलिए, जब तक कुछ और नहीं बताया जाता, तब तक स्क्रिप्ट कॉम्पोनेंट का इस्तेमाल करके तय की गई तीसरे पक्ष की सभी स्क्रिप्ट, Next.js के ज़रिए बाद में लोड की जाती हैं. इससे, एक बेहतर डिफ़ॉल्ट विकल्प मिलता है.

3. lazyOnload: अगर ब्राउज़र कुछ समय से इस्तेमाल में नहीं है, तो इस विकल्प का इस्तेमाल कम प्राथमिकता वाली स्क्रिप्ट को लेज़ी-लोड करने के लिए किया जा सकता है. पेज के इंटरैक्टिव होने के तुरंत बाद, ऐसी स्क्रिप्ट से मिलने वाली सुविधाओं की ज़रूरत नहीं होती. उदाहरण के लिए, चैट या सोशल मीडिया प्लग-इन.

डेवलपर, रणनीति बताकर Next.js को बता सकते हैं कि उनका ऐप्लिकेशन स्क्रिप्ट का इस्तेमाल कैसे करता है. इससे फ़्रेमवर्क, स्क्रिप्ट को लोड करने के लिए ऑप्टिमाइज़ेशन और सबसे सही तरीके लागू कर सकता है. साथ ही, लोड करने का सबसे सही क्रम भी पक्का कर सकता है.

स्क्रिप्ट घटक का उपयोग करके, डेवलपर देर से लोड होने वाले तृतीय-पक्षों के लिए ऐप्लिकेशन में कहीं भी तृतीय-पक्ष स्क्रिप्ट को रख सकते हैं और महत्वपूर्ण स्क्रिप्ट के लिए दस्तावेज़ के स्तर पर रख सकते हैं. इसका मतलब है कि स्क्रिप्ट का इस्तेमाल करने वाले कॉम्पोनेंट के साथ, स्क्रिप्ट कॉम्पोनेंट को एक ही जगह पर रखा जा सकता है. हाइड्रेशन के बाद, स्क्रिप्ट को शुरुआत में रेंडर किए गए दस्तावेज़ के हेड में या बॉडी के सबसे नीचे इंजेक्ट किया जाएगा. यह इस बात पर निर्भर करता है कि किस रणनीति का इस्तेमाल किया गया है.

असर का आकलन करना

हमने दो डेमो ऐप्लिकेशन बनाने के लिए, Next.js कॉमर्स ऐप्लिकेशन और स्टार्टर ब्लॉग के टेंप्लेट का इस्तेमाल किया. इन ऐप्लिकेशन की मदद से, तीसरे पक्ष की स्क्रिप्ट शामिल करने के असर को मेज़र किया जा सका. Google Tag Manager और सोशल मीडिया एम्बेड के लिए, आम तौर पर इस्तेमाल होने वाले तीसरे पक्षों को पहले इन ऐप्लिकेशन के पेजों पर सीधे तौर पर और फिर स्क्रिप्ट कॉम्पोनेंट के ज़रिए शामिल किया गया था. इसके बाद, हमने WebPageTest पर इन पेजों की परफ़ॉर्मेंस की तुलना की.

Next.js कॉमर्स ऐप्लिकेशन में तीसरे पक्ष की स्क्रिप्ट

डेमो के लिए, कॉमर्स ऐप्लिकेशन टेंप्लेट में तीसरे पक्ष की स्क्रिप्ट जोड़ी गई थीं, जैसा कि यहां बताया गया है.

नीचे दी गई तुलना, Next.js कॉमर्स स्टार्टर-किट के दोनों वर्शन में हुई प्रोग्रेस को दिखाती है. जैसा कि देखा गया है, सही लोडिंग रणनीति के साथ स्क्रिप्ट कॉम्पोनेंट चालू होने पर, एलसीपी करीब 1 सेकंड पहले होता है.

Next.js ब्लॉग में तीसरे पक्ष की स्क्रिप्ट

डेमो ब्लॉग ऐप्लिकेशन में तीसरे पक्ष की स्क्रिप्ट जोड़ी गई थीं, जैसा कि नीचे बताया गया है.

वीडियो में दिखाया गया है कि स्क्रिप्ट कॉम्पोनेंट के बिना, पेज पर फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) 0.9 सेकंड में होता है. वहीं, स्क्रिप्ट कॉम्पोनेंट के साथ यह 0.4 सेकंड में होता है.

स्क्रिप्ट कॉम्पोनेंट के लिए आगे क्या है

afterInteractive और lazyOnload के लिए रणनीति के विकल्पों की मदद से, रेंडर ब्लॉक करने वाली स्क्रिप्ट को बेहतर तरीके से कंट्रोल किया जा सकता है. हालांकि, हम ऐसे अन्य विकल्प भी एक्सप्लोर कर रहे हैं जिनसे स्क्रिप्ट कॉम्पोनेंट की उपयोगिता बढ़ जाएगी.

वेब वर्कर का इस्तेमाल करना

वेब वर्कर्स का इस्तेमाल, बैकग्राउंड थ्रेड पर अलग-अलग स्क्रिप्ट चलाने के लिए किया जा सकता है. इससे मुख्य थ्रेड को यूज़र इंटरफ़ेस के टास्क प्रोसेस करने और परफ़ॉर्मेंस को बेहतर बनाने के लिए खाली किया जा सकता है. मुख्य थ्रेड के बजाय, यूज़र इंटरफ़ेस (यूआई) के काम करने के बजाय, वेब वर्कर, JavaScript प्रोसेसिंग को ऑफ़लोड करने के लिए सबसे सही विकल्प होते हैं. ग्राहक सहायता या मार्केटिंग के लिए इस्तेमाल की जाने वाली स्क्रिप्ट, जो आम तौर पर यूज़र इंटरफ़ेस (यूआई) के साथ इंटरैक्ट नहीं करतीं. इन्हें बैकग्राउंड थ्रेड पर लागू किया जा सकता है. तीसरे पक्ष की लाइब्रेरी, जैसे कि PartyTown का इस्तेमाल करके, ऐसी स्क्रिप्ट को वेब वर्कर्स में अलग किया जा सकता है.

Next.js स्क्रिप्ट कॉम्पोनेंट को लागू करने के मौजूदा तरीके के साथ, हमारा सुझाव है कि इन स्क्रिप्ट को मुख्य थ्रेड पर टाल दें. इसके लिए, रणनीति को afterInteractive या lazyOnload पर सेट करें. आने वाले समय में, हम एक नया रणनीति विकल्प, 'worker' पेश करने का सुझाव दे रहे हैं. इससे Next.js वेब कर्मियों पर स्क्रिप्ट चलाने के लिए PartyTown या कस्टम समाधान का इस्तेमाल कर पाएगा. हम इस RFC के बारे में डेवलपर से टिप्पणियों का स्वागत करते हैं.

सीएलएस को कम करना

तीसरे पक्ष के एम्बेड किए गए कॉन्टेंट, जैसे कि विज्ञापन, वीडियो या सोशल मीडिया फ़ीड एम्बेड, लेज़ी लोड होने पर लेआउट में बदलाव कर सकते हैं. इससे उपयोगकर्ता अनुभव और पेज के कुल लेआउट शिफ़्ट (सीएलएस) मेट्रिक पर असर पड़ता है. जिस कंटेनर में एम्बेड लोड होगा उसका साइज़ तय करके, सीएलएस को कम किया जा सकता है.

स्क्रिप्ट कॉम्पोनेंट का इस्तेमाल, ऐसे एम्बेड को लोड करने के लिए किया जा सकता है जिनसे लेआउट में बदलाव हो सकता है. हम इसे बेहतर बनाकर, कॉन्फ़िगरेशन के विकल्प उपलब्ध कराने पर विचार कर रहे हैं. इससे सीएलएस को कम करने में मदद मिलेगी. इसे स्क्रिप्ट कॉम्पोनेंट में या साथ में काम करने वाले कॉम्पोनेंट के तौर पर उपलब्ध कराया जा सकता है.

रैपर कॉम्पोनेंट

आम तौर पर, Google Analytics या Google Tag Manager (GTM) जैसी लोकप्रिय तीसरे पक्ष की स्क्रिप्ट शामिल करने के लिए, सिंटैक्स और लोड करने की रणनीति तय होती है. इन्हें हर तरह की स्क्रिप्ट के लिए, अलग-अलग रैपर कॉम्पोनेंट में शामिल किया जा सकता है. डेवलपर के लिए, ऐप्लिकेशन के हिसाब से एट्रिब्यूट (जैसे, ट्रैकिंग आईडी) का सिर्फ़ एक छोटा सेट उपलब्ध होगा. रैपर कॉम्पोनेंट से डेवलपर को इन कामों में मदद मिलेगी:

1. इससे उन्हें लोकप्रिय स्क्रिप्ट टैग शामिल करने में आसानी होगी.
2. यह पक्का करना कि फ़्रेमवर्क, सबसे सही रणनीति का इस्तेमाल करता है.

नतीजा

तीसरे पक्ष की स्क्रिप्ट, आम तौर पर डेटा इस्तेमाल करने वाली वेबसाइट में खास सुविधाएं शामिल करने के लिए बनाई जाती हैं. हमारा सुझाव है कि आप ग़ैर-ज़रूरी स्क्रिप्ट को बाद में चलाएं, ताकि उनका असर कम हो. Next.js स्क्रिप्ट कॉम्पोनेंट, डिफ़ॉल्ट रूप से ऐसा करता है. डेवलपर को यह भरोसा होता है कि शामिल की गई स्क्रिप्ट, अहम सुविधाओं में तब तक देरी नहीं करेंगी, जब तक वे beforeInteractive रणनीति को साफ़ तौर पर लागू नहीं करते. Next.js स्क्रिप्ट कॉम्पोनेंट की तरह, फ़्रेमवर्क डेवलपर इन सुविधाओं को दूसरे फ़्रेमवर्क में भी बना सकते हैं. हम Nuxt.js टीम की मदद से, इसके मिलते-जुलते कॉम्पोनेंट को भेजने पर लगातार काम कर रहे हैं. हमें उम्मीद है कि सुझावों और राय के आधार पर, हम स्क्रिप्ट कॉम्पोनेंट को और बेहतर बना पाएंगे, ताकि इसका इस्तेमाल और भी तरीकों से किया जा सके.

लोगों का आभार

इस पोस्ट पर सुझाव/राय देने के लिए, कारा एरिकसन, जैनिक्लास राल्फ़, केटी हेंपेनियस, फ़िलिप वाल्टन, जेरेमी वॉगनर, और ऐडी ओस्मानी को धन्यवाद.