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

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

Leena Sohoni

Houssein Djirdeh

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

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

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

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

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

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

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

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

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

ओपन सोर्स वेब फ़्रेमवर्क और टूल के साथ Aurora के साथ मिलकर काम करने का मकसद, डेवलपर को उपयोगकर्ता अनुभव के अलग-अलग पहलुओं को बेहतर बनाने में मदद करना है. जैसे, परफ़ॉर्मेंस, ऐक्सेस, सुरक्षा, और मोबाइल के लिए तैयार होना. इसके लिए, 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 एट्रिब्यूट के साथ स्क्रिप्ट लोड करने के बराबर है. इसका इस्तेमाल उन स्क्रिप्ट के लिए किया जाना चाहिए जिन्हें ब्राउज़र, पेज के इंटरैक्टिव होने के बाद चला सकता है. उदाहरण के लिए, Analytics स्क्रिप्ट. 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 टीम के साथ मिलकर, इसी तरह का एक कॉम्पोनेंट लॉन्च करने की कोशिश कर रहे हैं. हमें उम्मीद है कि सुझावों और राय के आधार पर, हम स्क्रिप्ट कॉम्पोनेंट को और बेहतर बना पाएंगे, ताकि इसका इस्तेमाल और भी तरीकों से किया जा सके.

लोगों का आभार

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