तीसरे पक्ष की JavaScript को बेहतर तरीके से लोड करना

पेज लोड होने में लगने वाले समय को कम करने और उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, तीसरे पक्ष की स्क्रिप्ट का इस्तेमाल करने में होने वाली आम गलतियों से बचें.

अगर किसी तीसरे पक्ष की स्क्रिप्ट आपके पेज लोड को धीमा कर रही है, तो आपके पास परफ़ॉर्मेंस को बेहतर बनाने के दो विकल्प हैं:

  • अगर इससे आपकी साइट को साफ़ तौर पर कोई फ़ायदा नहीं होता है, तो इसे हटा दें.

  • लोड करने की प्रोसेस को ऑप्टिमाइज़ करें.

इस पोस्ट में, तीसरे पक्ष की स्क्रिप्ट की लोड होने की प्रोसेस को ऑप्टिमाइज़ करने के लिए, इन तकनीकों का इस्तेमाल किया गया है:

  1. <script> टैग पर async या defer एट्रिब्यूट का इस्तेमाल करना

  2. ज़रूरी ऑरिजिन से शुरुआती कनेक्शन बनाना

  3. लेज़ी लोडिंग

  4. तीसरे पक्ष की स्क्रिप्ट को दिखाने के तरीके को ऑप्टिमाइज़ करना

async या defer का इस्तेमाल करें

सिंक्रोनस स्क्रिप्ट डीओएम बनाने और रेंडर होने में देरी करती है. इसलिए, आपको तीसरे पक्ष की स्क्रिप्ट को तब तक एसिंक्रोनस रूप से लोड करना चाहिए, जब तक पेज को रेंडर करने से पहले स्क्रिप्ट को चलाना न ज़रूरी हो.

async और defer एट्रिब्यूट की मदद से, ब्राउज़र को पता चलता है कि बैकग्राउंड में स्क्रिप्ट लोड करते समय, एचटीएमएल को पार्स किया जा सकता है और फिर लोड होने पर स्क्रिप्ट को चलाया जा सकता है. इस तरह, स्क्रिप्ट डाउनलोड, डीओएम बनाने और पेज रेंडरिंग को ब्लॉक नहीं करते. नतीजे के तौर पर, उपयोगकर्ता सभी स्क्रिप्ट के लोड होने से पहले ही पेज देख सकते हैं.

<script async src="script.js">

<script defer src="script.js">

async और defer के बीच का अंतर यह है कि वे स्क्रिप्ट को एक्ज़ीक्यूट करना शुरू करते हैं.

async

async एट्रिब्यूट वाली स्क्रिप्ट, डाउनलोड होने के बाद और विंडो के load इवेंट से पहले पहली बार काम करती हैं. इसका मतलब है कि यह हो सकता है कि async स्क्रिप्ट उसी क्रम में एक्ज़ीक्यूट हो जिस क्रम में वे एचटीएमएल में दिखती हैं. इसका मतलब यह भी है कि अगर पार्सर के काम कर रहे होने के दौरान वे डाउनलोड पूरा कर लेते हैं, तो वे DOM बिल्डिंग को बाधित कर सकते हैं.

एक साथ काम नहीं करने वाली प्रोसेस के साथ पार्सर को ब्लॉक करने वाली स्क्रिप्ट का डायग्राम

defer

defer एट्रिब्यूट वाली स्क्रिप्ट, एचटीएमएल पार्स करने के पूरी तरह से खत्म होने के बाद काम करती हैं. हालांकि, DOMContentLoaded इवेंट से पहले ये स्क्रिप्ट लागू होती हैं. defer गारंटी देता है कि स्क्रिप्ट उसी क्रम में एक्ज़ीक्यूट होंगी जिस क्रम में वे एचटीएमएल में दिखती हैं. साथ ही, यह पार्सर को ब्लॉक नहीं करेगी.

डेफ़र एट्रिब्यूट वाली स्क्रिप्ट के साथ पार्सर फ़्लो का डायग्राम

  • अगर लोड करने की प्रक्रिया में स्क्रिप्ट को जल्दी चलाना ज़रूरी है, तो async का इस्तेमाल करें.

  • कम ज़रूरी संसाधनों के लिए defer का इस्तेमाल करें. उदाहरण के लिए, पेज के निचले हिस्से में मौजूद वीडियो प्लेयर.

इन एट्रिब्यूट का इस्तेमाल करने से पेज लोड होने की स्पीड बढ़ सकती है. उदाहरण के लिए, Telegraph ने हाल ही में अपनी सभी स्क्रिप्ट को टाल दिया, जिसमें विज्ञापन और आंकड़े शामिल हैं और विज्ञापन लोड होने के समय में औसतन चार सेकंड का सुधार किया है.

ज़रूरी ऑरिजिन से शुरुआती कनेक्शन बनाएं

तीसरे पक्ष के अहम ऑरिजिन के साथ शुरुआती कनेक्शन जोड़कर 100–500 मि॰से॰ की बचत की जा सकती है.

यहां दो तरह के <link> आपकी मदद कर सकते हैं:

  • preconnect

  • dns-prefetch

preconnect

<link rel="preconnect">, ब्राउज़र को बताता है कि आपका पेज किसी अन्य ऑरिजिन से कनेक्ट करना चाहता है और आपको प्रोसेस जल्द से जल्द शुरू करनी है. जब पहले से कनेक्ट किए गए ऑरिजिन से किसी संसाधन के लिए अनुरोध किया जाता है, तो डाउनलोड तुरंत शुरू हो जाता है.

<link rel="preconnect" href="https://cdn.example.com">

dns-prefetch

<link rel="dns-prefetch>, उन चीज़ों के एक छोटे सबसेट को हैंडल करता है जिन्हें <link rel="preconnect"> मैनेज करता है. कनेक्शन स्थापित करने में डीएनएस लुकअप और टीसीपी हैंडशेक शामिल हैं. साथ ही, सुरक्षित ऑरिजिन के लिए, TLS नेगोशिएशन शामिल हैं. dns-prefetch, ब्राउज़र को साफ़ तौर पर कॉल किए जाने से पहले, सिर्फ़ किसी खास डोमेन के डीएनएस की समस्या को ठीक करने का निर्देश देता है.

preconnect संकेत का इस्तेमाल, सिर्फ़ सबसे ज़रूरी कनेक्शन के लिए किया जाता है. तीसरे पक्ष के कम ज़रूरी डोमेन के लिए, <link rel=dns-prefetch> का इस्तेमाल किया जाता है.

<link rel="dns-prefetch" href="http://example.com">

dns-prefetch के लिए ब्राउज़र सहायता, preconnect सहायता से कुछ अलग है. इसलिए, dns-prefetch उन ब्राउज़र के लिए फ़ॉलबैक के तौर पर काम कर सकता है जो preconnect के साथ काम नहीं करते. इसे सुरक्षित तरीके से लागू करने के लिए, अलग-अलग लिंक टैग का इस्तेमाल करें:

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

तीसरे पक्ष के संसाधनों को लेज़ी-लोड करें

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

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

एक असरदार तरीका यह है कि मुख्य पेज का कॉन्टेंट लोड होने के बाद, तीसरे पक्ष के कॉन्टेंट को लेज़ी लोड करें. इस तरीके का इस्तेमाल विज्ञापन दिखाने के लिए किया जा सकता है.

विज्ञापन कई साइटों के लिए कमाई का एक अहम ज़रिया होते हैं, लेकिन उपयोगकर्ता उस कॉन्टेंट के लिए आते हैं. विज्ञापन को लेज़ी लोड करके और मुख्य कॉन्टेंट को तेज़ी से डिलीवर करके, किसी विज्ञापन के विज्ञापन दिखने से जुड़े आंकड़ों का कुल प्रतिशत बढ़ाया जा सकता है. उदाहरण के लिए, Mediavin ने लेज़ी-लोडिंग विज्ञापनों का इस्तेमाल करना शुरू किया और पेज लोड होने की स्पीड में 200% सुधार हुआ. DoubleClick ने अपने आधिकारिक दस्तावेज़ों में विज्ञापनों को लेज़ी-लोड करने के तरीके के बारे में दिशा-निर्देश दिए हैं.

दूसरा तरीका यह है कि तीसरे पक्ष का कॉन्टेंट सिर्फ़ तब लोड किया जाए, जब उपयोगकर्ता पेज के उस सेक्शन पर नीचे की ओर स्क्रोल करें.

इंटरसेक्शन ऑब्ज़र्वर एक ब्राउज़र एपीआई है, जो आसानी से यह पता लगा लेता है कि कोई एलिमेंट, ब्राउज़र के व्यूपोर्ट में कब आता या बंद करता है. इस तकनीक का इस्तेमाल इस तकनीक को लागू करने के लिए किया जा सकता है. लेज़ीसाइज़, लेज़ी लोडिंग इमेज और iframes के लिए एक लोकप्रिय JavaScript लाइब्रेरी है. यह YouTube एम्बेड और विजेट पर काम करता है. इसमें IntersectionViewer के लिए सहायता भी उपलब्ध है. हालांकि, ऐसा करना ज़रूरी नहीं है.

लेज़ी लोडिंग इमेज और iframe के लिए loading एट्रिब्यूट का इस्तेमाल करना, JavaScript तकनीकों का एक बेहतरीन विकल्प है. हाल ही में, यह Chrome 76 में उपलब्ध हो गया है!

तीसरे पक्ष की स्क्रिप्ट को दिखाने का तरीका ऑप्टिमाइज़ करना

तीसरे पक्ष की सीडीएन होस्टिंग

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

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

जब तीसरे पक्ष के सर्वर की फ़ाइलों का इस्तेमाल किया जाता है, तो कैश मेमोरी में सेव करने का कंट्रोल शायद ही आपके पास होता हो. किसी दूसरे व्यक्ति की कैश मेमोरी में सेव करने की रणनीति पर भरोसा करने से, स्क्रिप्ट को बार-बार नेटवर्क से बेवजह फिर से फ़ेच किया जा सकता है.

तीसरे पक्ष की स्क्रिप्ट को खुद होस्ट करें

तीसरे पक्ष की स्क्रिप्ट को खुद होस्ट करना एक ऐसा विकल्प है जिससे आपको स्क्रिप्ट के लोड होने की प्रोसेस पर ज़्यादा कंट्रोल मिलता है. खुद होस्ट करके ये काम किए जा सकते हैं:

  • डीएनएस लुकअप और दोतरफ़ा यात्रा के समय को कम करें.
  • एचटीटीपी कैश मेमोरी वाले हेडर बेहतर बनाएं.
  • HTTP/2 या नए HTTP/3 का फ़ायदा लें.

उदाहरण के लिए, Casper ने A/B टेस्टिंग स्क्रिप्ट को खुद होस्ट करके, कॉन्टेंट लोड होने में 1.7 सेकंड की छूट दी.

सेल्फ़-होस्टिंग में एक बड़ी समस्या आती है: स्क्रिप्ट पुरानी हो सकती हैं और एपीआई में कोई बदलाव होने या सुरक्षा से जुड़ी कोई समस्या होने पर, उन्हें अपने-आप अपडेट नहीं मिलेगा.

तीसरे पक्ष के सर्वर से स्क्रिप्ट को कैश मेमोरी में सेव करने के लिए, सर्विस वर्कर का इस्तेमाल करना

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