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

Milica Mihajlija

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

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

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

• <script> टैग पर async या defer एट्रिब्यूट का इस्तेमाल करना
• ज़रूरी ऑरिजिन से शुरुआती कनेक्शन बनाना
• लेज़ी लोडिंग
• तीसरे पक्ष की स्क्रिप्ट दिखाने के तरीके को ऑप्टिमाइज़ करना

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

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

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

<script async src="script.js">

<script defer src="script.js">

async और defer एट्रिब्यूट के बीच का अंतर यह है कि ब्राउज़र, स्क्रिप्ट कब लागू करता है.

async

async एट्रिब्यूट वाली स्क्रिप्ट, डाउनलोड होने के बाद और विंडो के लोड इवेंट से पहले, पहले अवसर पर लागू होती हैं. इसका मतलब है कि शायद 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">

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

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

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

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

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

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

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

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

तीसरे पक्ष की स्क्रिप्ट के इस्तेमाल को ऑप्टिमाइज़ करने के लिए, यहां कुछ सुझाई गई रणनीतियां दी गई हैं.

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

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

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

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

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

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

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

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

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

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

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

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