तीसरे पक्ष की लाइब्रेरी को मैनेज करने के लिए Next.js पैकेज

Houssein Djirdeh

2021 में, Chrome Aurora टीम ने Script कॉम्पोनेंट को बेहतर बनाने के लिए Next.js में तीसरे पक्ष की स्क्रिप्ट की परफ़ॉर्मेंस लोड हो रही है. लॉन्च होने के बाद से, हमने तीसरे पक्ष के संसाधनों को लोड करना आसान बनाने के लिए, अपनी क्षमताओं को बढ़ाया और डेवलपर को तेज़ी से काम करने में मदद करता है.

इस ब्लॉग पोस्ट में, हाल ही में रिलीज़ की गई ज़्यादातर सुविधाओं के बारे में खास जानकारी दी गई है खास तौर पर, @next/third-parties और साथ ही, हमारे रोडमैप पर आगे की जाने वाली पहलों की आउटलाइन भी शामिल की गई है.

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

Next.js साइटों के तीसरे पक्ष के सभी अनुरोधों का 41% स्क्रिप्ट होते हैं. अन्य कॉन्टेंट से अलग करें स्क्रिप्ट के डाउनलोड और एक्ज़ीक्यूट होने में काफ़ी समय लग सकता है. इससे रेंडरिंग ब्लॉक हो सकती है और उपयोगकर्ता का इंटरैक्शन देर से हो सकता है. Chrome का डेटा उपयोगकर्ता अनुभव रिपोर्ट (CrUX) में, Next.js वाली उन साइटों के बारे में जानकारी मिलती है जो तीसरे पक्ष के ज़्यादा पेज लोड करती हैं स्क्रिप्ट में इंटरैक्शन टू नेक्स्ट पेंट की स्थिति कम होती है (आईएनपी) और सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी) पास रेट.

बार चार्ट में, तीसरे पक्षों की लोड की गई संख्या के अनुपात में, आईएनपी और एलसीपी अच्छे स्कोर हासिल करने वाले Next.js के प्रतिशत में कमी दिखाई गई है
दिसंबर 2023 CrUX रिपोर्ट (1,10,823 साइटें)

इस चार्ट में कोरिलेशन दिखता है, लेकिन यह वजह नहीं है. हालांकि, स्थानीय प्रयोगों से इस बात का अतिरिक्त सबूत मिलता है कि तीसरे पक्ष की स्क्रिप्ट पेज की परफ़ॉर्मेंस पर असर पड़ता है. उदाहरण के लिए, नीचे दिया गया चार्ट अलग-अलग लैब की तुलना करता है मेट्रिक, जब कोई Google Tag Manager कंटेनर—जिसमें रैंडम तरीके से 18 चुने गए हों टैग—टैक्सोनॉमी में जोड़ा जाता है, जो Next.js का एक लोकप्रिय उदाहरण है है.

बार चार्ट, जो किसी साइट को Google Tag Manager के साथ और उसके बिना लोड किए जाने पर, अलग-अलग लैब मेट्रिक में अंतर दिखाता है
WebPageTest (मोबाइल 4G - वर्जीनिया अमेरिका)

WebPageTest दस्तावेज़ से यह जानकारी मिलती है कि इन समय को कैसे मापा जाता है. एक नज़र डालने पर, आपको साफ़ तौर पर बताएं कि ये सभी लैब मेट्रिक GTM कंटेनर से प्रभावित हैं. इसके लिए उदाहरण के लिए, टोटल ब्लॉकिंग टाइम (टीबीटी)—एक उपयोगी लैब आईएनपी का अनुमान लगाने वाली प्रॉक्सी—में करीब 20 गुना बढ़ोतरी हुई.

स्क्रिप्ट घटक

Next.js में <Script> कॉम्पोनेंट की शिपिंग करते समय, हमने इसे इस्तेमाल करने के लिए आसान एपीआई की मदद से बनाया गया है, जो पारंपरिक <script> से काफ़ी मिलता-जुलता है एलिमेंट. इसका इस्तेमाल करके, डेवलपर तीसरे पक्ष की स्क्रिप्ट को किसी भी पा सकता है और Next.jss अहम संसाधन लोड होने के बाद स्क्रिप्ट.

<!-- By default, script will load after page becomes interactive -->
<Script src="https://example.com/sample.js" />

<!-- Script is injected server-side and fetched before any page hydration occurs -->
<Script strategy=”beforeInteractive” src="https://example.com/sample.js" />

<!-- Script is fetched later during browser idle time -->
<Script strategy=”lazyOnload” src="https://example.com/sample.js" />

हज़ारों Next.js ऐप्लिकेशन—इसमें लोकप्रिय साइटें भी शामिल हैं, जैसे कि Patreon, Target, और नोट—<Script> कॉम्पोनेंट का इस्तेमाल करें. इसके बावजूद कुछ डेवलपर ने निम्न को लेकर चिंता जताई है चीज़ें:

  • पालन करते समय Next.js ऐप्लिकेशन में <Script> कॉम्पोनेंट कहां जोड़ें इंस्टॉल करने के अलग-अलग निर्देशों का पालन करें. (डेवलपर का अनुभव).
  • अलग-अलग विज्ञापनों के लिए, लोड होने की कौनसी रणनीति सबसे सही होती है तीसरे पक्ष की स्क्रिप्ट (उपयोगकर्ता अनुभव).

इन दोनों समस्याओं को हल करने के लिए, हमने @next/third-parties लॉन्च किया है—a खास लाइब्रेरी में, ऑप्टिमाइज़ किए गए कॉम्पोनेंट और काम की सुविधाओं का सेट उपलब्ध होता है इसे लोकप्रिय तीसरे पक्षों के लिए बनाया गया है.

डेवलपर का अनुभव: तीसरे पक्ष की लाइब्रेरी को मैनेज करना आसान बनाना

Next.js साइटों के एक बड़े हिस्से में तीसरे पक्ष की कई स्क्रिप्ट का इस्तेमाल किया जाता है. साथ ही, Google Tag Manager सबसे ज़्यादा लोकप्रिय है. इसका इस्तेमाल ये लोग करते हैं कुल साइटों का क्रमश: 66%. @next/third-parties, <Script> से ऊपर बनता है कॉम्पोनेंट को बेहतर तरीके से इस्तेमाल करने के लिए, डिज़ाइन किए गए हाई-लेवल रैपर की सुविधा भी दी गई है. इस्तेमाल के सामान्य उदाहरण हैं.

import { GoogleAnalytics } from "@next/third-parties/google";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleTagManager gtmId="GTM-XYZ" />
    </html>
  );
}

Google Analytics—तीसरे पक्ष की एक अन्य स्क्रिप्ट, जिसका काफ़ी इस्तेमाल होता है (Next.js साइटों का 52%)—भी उसका एक खास कॉम्पोनेंट है.

import { GoogleAnalytics } from "@next/third-parties/google";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XYZ" />
    </html>
  );
}

@next/third-parties, आम तौर पर इस्तेमाल होने वाली स्क्रिप्ट को लोड करने की प्रोसेस को आसान बनाता है, लेकिन यह अन्य तृतीय-पक्षों के लिए उपयोगिताएं विकसित करने की हमारी क्षमता को भी बढ़ाता है कैटगरी, जैसे कि एम्बेड करना. उदाहरण के लिए, Google Maps और YouTube पर एम्बेड किए गए वीडियो इसमें इस्तेमाल की गई 8% और 4% की है और हमने उन्हें बनाने के लिए कॉम्पोनेंट भी भेजे हैं इसे लोड करना आसान होता है.

import { GoogleMapsEmbed } from "@next/third-parties/google";
import { YouTubeEmbed } from "@next/third-parties/google";

export default function Page() {
  return (
    <>
      <GoogleMapsEmbed
        apiKey="XYZ"
        height={200}
        width="100%"
        mode="place"
        q="Brooklyn+Bridge,New+York,NY"
      />
      <YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />
    </>
  );
}

उपयोगकर्ता अनुभव: तीसरे पक्ष की लाइब्रेरी को तेज़ी से लोड करने के लिए

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

YouTube पर एम्बेड किए गए वीडियो का उदाहरण लें. जहां कुछ वैकल्पिक तरीकों का इस्तेमाल किया जाता है नेटिव एम्बेड की तुलना में कहीं बेहतर है. फ़िलहाल, <YouTubeEmbed> @next/third-parties में एक्सपोर्ट किए गए कॉम्पोनेंट का इस्तेमाल lite-youtube-embed का इस्तेमाल कर सकते हैं. जब "हैलो, दुनिया" में दिखाया जाता है Next.js तुलना, काफ़ी लोड होती है और तेज़ी से.

यह GIF, YouTube एम्बेड कॉम्पोनेंट और सामान्य YouTube iframe के बीच पेज लोड की तुलना दिखाता है
WebPageTest (मोबाइल 4G - वर्जीनिया अमेरिका)

इसी तरह, Google Maps में हम loading="lazy" को यह सुनिश्चित करने के लिए एम्बेड करें कि मैप केवल तभी लोड हो जब वह व्यूपोर्ट. इसे शामिल करने के लिए यह एक बहुत ही ज़रूरी एट्रिब्यूट लग सकता है—खास तौर पर जब से Google Maps दस्तावेज़ इसे अपने उदाहरण के कोड स्निपेट में शामिल करता है—लेकिन Google Maps को एम्बेड करने वाली Next.js साइटों में से 45% साइटें, loading="lazy" का इस्तेमाल कर रही हैं.

वेब वर्कर में तीसरे पक्ष की स्क्रिप्ट चलाना

हम @next/third-parties में जिस बेहतर तकनीक को आज़मा रहे हैं वह है, इसे किसी वेब वर्कर पर तीसरे पक्ष की स्क्रिप्ट को आसानी से ऑफ़लोड करता है. इन्होंने लोकप्रिय बनाया जैसे कि Partyटाउन जैसी लाइब्रेरी का इस्तेमाल करके, तीसरे पक्ष की स्क्रिप्ट का पेज की परफ़ॉर्मेंस पर काफ़ी असर पड़ सकता है. उन्हें मुख्य थ्रेड से बाहर ले जाया जा रहा है.

नीचे दिया गया ऐनिमेटेड GIF, लंबे टास्क और मुख्य थ्रेड के बीच के फ़र्क़ को दिखाता है GTM कंटेनर में अलग-अलग <Script> रणनीतियां लागू करने के दौरान लगने वाला समय ब्लॉक करना Next.js साइट में. ध्यान दें, केवल कार्यनीति विकल्पों के बीच स्विच करते समय इन स्क्रिप्ट के काम करने के समय में देरी करता है, जिससे वे वेब वर्कर पर ट्रांसफ़र हो जाती हैं मुख्य थ्रेड से अपना समय पूरी तरह हटा देता है.

यह GIF, स्क्रिप्ट की अलग-अलग रणनीतियों के लिए, मुख्य थ्रेड को ब्लॉक करने के समय में अंतर दिखाता है
WebPageTest (मोबाइल 4G - वर्जीनिया अमेरिका)

खास तौर पर, इस उदाहरण में, GTM कंटेनर और इसके किसी वेब वर्कर को जोड़ी गई टैग स्क्रिप्ट में टीबीटी में 92%की कमी आई.

ध्यान दें, अगर इस तकनीक को ध्यान से मैनेज न किया जाए, तो यह बिना किसी रुकावट के तीसरे पक्ष की कई स्क्रिप्ट को तोड़ते हैं, जिससे डीबग करना चुनौती भरा हो जाता है. आने वाले समय में महीनों के दौरान, हम यह पुष्टि करेंगे कि वेब वर्कर में चलाए जाने पर, @next/third-parties सही तरीके से काम करता है. अगर ऐसा है, तो हम को आसान और वैकल्पिक तरीका उपलब्ध कराने पर काम करेंगे, ताकि डेवलपर इसका इस्तेमाल कर सकें तकनीक.

अगले चरण

इस पैकेज को डेवलप करने की प्रक्रिया के दौरान, यह साफ़ तौर पर पता चला कि तीसरे पक्ष के, कॉन्टेंट लोड करने से जुड़े सुझावों को एक ही जगह पर उपलब्ध कराने की ज़रूरत है, ताकि अन्य फ़्रेमवर्क भी उन्हीं तकनीकों का इस्तेमाल करने से फ़ायदा मिल सकता है जिनका इस्तेमाल किया जाता है. इसकी वजह से हम तीसरे पक्ष की ऑडियंस को कैपिटल, एक लाइब्रेरी जो तीसरे पक्ष की, कॉन्टेंट लोड करने की तकनीकों को बताने के लिए JSON का इस्तेमाल करती है. इस तकनीक से, @next/third-parties की बुनियाद के तौर पर काम करता है.

अपने अगले चरणों में, हम दिए गए कॉम्पोनेंट को बेहतर बनाने पर ध्यान देना जारी रखेंगे और साथ ही साथ अन्य क्षेत्रों में समान उपयोगिताएं शामिल करने के अपने प्रयासों को सबसे ज़्यादा इस्तेमाल किए जाने वाले फ़्रेमवर्क और कॉन्टेंट मैनेजमेंट सिस्टम प्लैटफ़ॉर्म (सीएमएस) प्लैटफ़ॉर्म का इस्तेमाल करने में मदद मिलती है. फ़िलहाल, हम Nuxt के साथ मिलकर काम कर रहे हैं साथ ही, तीसरे पक्ष की ऐसी ही सुविधाएं जारी करने की योजना बना रहा है. आने वाले समय में उनके ईकोसिस्टम में बहुत कुछ बदलाव हो सकता है.

आप जिस तीसरे पक्ष का इस्तेमाल अपने Next.js ऐप्लिकेशन में करते हैं, अगर वह 'तीसरे पक्ष' के साथ काम करता है, तो @next/third-parties, पैकेज इंस्टॉल करें और इसे आज़माएं! हमें आपके सुझाव, शिकायत या राय का इंतज़ार है GitHub.