अगर किसी तीसरे पक्ष की स्क्रिप्ट आपके पेज लोड को धीमा रख रही है, तो आपके पास परफ़ॉर्मेंस को बेहतर बनाने के दो विकल्प हैं:
- अगर इससे आपकी साइट को साफ़ तौर पर कोई फ़ायदा नहीं होता है, तो इसे हटा दें.
- लोड करने की प्रोसेस को ऑप्टिमाइज़ करें.
इस पोस्ट में, यहां दी गई तकनीकों की मदद से तीसरे पक्ष की स्क्रिप्ट की लोड होने की प्रोसेस को ऑप्टिमाइज़ करने का तरीका बताया गया है:
<script>टैग परasyncयाdeferएट्रिब्यूट का इस्तेमाल करना- ज़रूरी ऑरिजिन से शुरुआती कनेक्शन बनाना
- लेज़ी लोडिंग
- तीसरे पक्ष की स्क्रिप्ट को दिखाने के तरीके को ऑप्टिमाइज़ करना
async या defer का इस्तेमाल करें
सिंक्रोनस स्क्रिप्ट से डीओएम बनाने और उसे रेंडर करने में देरी होती है. इसलिए, आपको तीसरे पक्ष की स्क्रिप्ट को तब तक एसिंक्रोनस रूप से लोड करना चाहिए, जब तक पेज को रेंडर करने से पहले स्क्रिप्ट को चलाना न ज़रूरी हो.
async और defer एट्रिब्यूट, ब्राउज़र को बताते हैं कि बैकग्राउंड में स्क्रिप्ट लोड करते समय, एचटीएमएल को पार्स किया जा सकता है. इसके बाद, स्क्रिप्ट लोड होने पर उसे एक्ज़ीक्यूट किया जा सकता है. इस तरह, स्क्रिप्ट डाउनलोड डीओएम बनाने या पेज रेंडर करने को ब्लॉक नहीं करते हैं. इससे सभी स्क्रिप्ट के लोड होने से पहले ही उपयोगकर्ता पेज देख लेता है.
<script async src="script.js">
<script defer src="script.js">
जब ब्राउज़र स्क्रिप्ट को चलाता है, तब async और defer एट्रिब्यूट में अंतर होता है.
async
async एट्रिब्यूट वाली स्क्रिप्ट, डाउनलोड होने के पहले मौके पर और विंडो के load इवेंट से पहले काम करती हैं. इसका मतलब है कि
यह मुमकिन है कि async स्क्रिप्ट उस क्रम में न चलें जिसमें
वे एचटीएमएल में दिखती हैं. इसका यह भी मतलब है कि पार्सर के काम करने के दौरान डाउनलोड पूरा हो जाने पर, वे डीओएम बिल्डिंग को बाधित कर सकते हैं.
async वाली स्क्रिप्ट अब भी एचटीएमएल पार्स करने की
सुविधा को ब्लॉक कर सकती हैं.defer
defer एट्रिब्यूट वाली स्क्रिप्ट, एचटीएमएल पार्स करने के पूरी तरह से खत्म होने के बाद एक्ज़ीक्यूट होती हैं, लेकिन DOMContentLoaded इवेंट से पहले. defer यह पक्का करता है कि स्क्रिप्ट उसी क्रम में चलें जिस क्रम में वे एचटीएमएल में दिखती हैं. साथ ही, यह पार्सर को ब्लॉक नहीं करती.
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="preconnect"> क्या हैंडल करता है, इसके एक छोटे सबसेट को <link rel="dns-prefetch> हैंडल करता है. कनेक्शन स्थापित करने में डीएनएस लुकअप और टीसीपी हैंडशेक शामिल हैं. साथ ही, सुरक्षित ऑरिजिन के लिए, 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% सुधार देखा. Google Ad Manager में विज्ञापनों को लेज़ी लोड करने के तरीके से जुड़े दस्तावेज़ मौजूद हैं.
तीसरे पक्ष का कॉन्टेंट सिर्फ़ तब लोड किया जा सकता है, जब उपयोगकर्ता पहली बार पेज के उस सेक्शन पर स्क्रोल करें.
इंटरसेक्शन ऑब्ज़र्वर एक ब्राउज़र एपीआई है, जो इस बात का बेहतर तरीके से पता लगा लेता है कि कोई एलिमेंट, ब्राउज़र के व्यूपोर्ट में कब आता या बंद होता है. इस तकनीक का इस्तेमाल करने के लिए भी इसका इस्तेमाल किया जा सकता है. लेज़ीसाइज़, लेज़ी लोडिंग इमेज और iframes के लिए एक लोकप्रिय JavaScript लाइब्रेरी है.
यह YouTube एम्बेड और
विजेट पर काम करता है.
इसमें इंटरसेक्शन ऑब्ज़र्वर के लिए वैकल्पिक सहायता भी होती है.
लेज़ी लोडिंग इमेज और iframe के लिए loading एट्रिब्यूट का इस्तेमाल करना, JavaScript तकनीकों का एक अच्छा विकल्प है. हाल ही में, यह Chrome 76 में उपलब्ध हो गया है!
तीसरे पक्ष की स्क्रिप्ट को दिखाने का तरीका ऑप्टिमाइज़ करना
तीसरे पक्ष की स्क्रिप्ट के इस्तेमाल को ऑप्टिमाइज़ करने के लिए, यहां कुछ रणनीतियां सुझाई गई हैं.
तीसरे पक्ष की सीडीएन होस्टिंग
तीसरे पक्ष के वेंडर, आम तौर पर उन JavaScript फ़ाइलों के यूआरएल उपलब्ध कराते हैं जिन्हें वे होस्ट करते हैं. आम तौर पर, ये उन्हें कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन) पर उपलब्ध कराते हैं. इस तरीके का फ़ायदा यह है कि आप तुरंत शुरू कर सकते हैं. बस यूआरएल को कॉपी करके चिपकाएं और इसके लिए आपको अलग से कोई रखरखाव नहीं करना पड़ता. तीसरे पक्ष का वेंडर, सर्वर कॉन्फ़िगरेशन और स्क्रिप्ट के अपडेट मैनेज करता है.
हालांकि, उनका ऑरिजिन आपके बाकी संसाधनों के ऑरिजिन से अलग नहीं है, इसलिए सार्वजनिक सीडीएन से फ़ाइलों को लोड करना, नेटवर्क की लागत के साथ आता है. ब्राउज़र को डीएनएस लुकअप करने, नया एचटीटीपी कनेक्शन बनाने, और सुरक्षित ऑरिजिन पर वेंडर के सर्वर के साथ एसएसएल हैंडशेक करने की ज़रूरत होती है.
जब तीसरे पक्ष के सर्वर की फ़ाइलों का इस्तेमाल किया जाता है, तो कैश मेमोरी में सेव किए गए डेटा को मैनेज करने का कंट्रोल शायद ही आपके पास हो. किसी और की कैश मेमोरी में सेव करने की रणनीति पर भरोसा करने से, स्क्रिप्ट को बार-बार नेटवर्क से बेवजह फिर से फ़ेच किया जा सकता है.
तीसरे पक्ष की स्क्रिप्ट को खुद होस्ट करें
तीसरे पक्ष की स्क्रिप्ट को खुद होस्ट करना एक ऐसा विकल्प है जिससे आपको स्क्रिप्ट लोड होने की प्रोसेस पर ज़्यादा कंट्रोल मिलता है. खुद होस्ट करके ये काम किए जा सकते हैं:
- डीएनएस लुकअप और दोतरफ़ा यात्रा के समय को कम करें.
- एचटीटीपी कैश मेमोरी वाले हेडर बेहतर बनाएं.
- HTTP/2 या नए HTTP/3 का फ़ायदा लें.
उदाहरण के लिए, Casper ने A/B टेस्टिंग स्क्रिप्ट को खुद होस्ट करके, लोड होने में 1.7 सेकंड की छूट दी.
सेल्फ़-होस्टिंग में एक बड़ी समस्या आती है: हालांकि, स्क्रिप्ट पुरानी हो सकती हैं और एपीआई में कोई बदलाव होने या सुरक्षा से जुड़ी कोई समस्या होने पर, उन्हें अपने-आप अपडेट नहीं मिलेंगे.
तीसरे पक्ष के सर्वर से स्क्रिप्ट को कैश मेमोरी में सेव करने के लिए, सर्विस वर्कर का इस्तेमाल करना
सेल्फ़-होस्टिंग के बजाय, तीसरे पक्ष के सर्वर से स्क्रिप्ट को कैश मेमोरी में सेव करने के लिए, सर्विस वर्कर का इस्तेमाल किया जा सकता है. इससे आपको डेटा को कैश मेमोरी में सेव करने की सुविधा पर बेहतर कंट्रोल मिलता है. साथ ही, तीसरे पक्ष के सीडीएन के फ़ायदों को बनाए रखा जा सकता है.
आपके पास यह कंट्रोल करने का विकल्प है कि स्क्रिप्ट को नेटवर्क से कितनी बार फिर से फ़ेच किया जाए. साथ ही, लोड होने की ऐसी रणनीति बनाएं जो तीसरे पक्ष के ग़ैर-ज़रूरी संसाधनों के अनुरोधों को तब तक थ्रॉटल न करे, जब तक उपयोगकर्ता पेज पर किसी अहम इंटरैक्शन पर न पहुंच जाए.
preconnect के साथ, शुरुआती कनेक्शन बनाए जा सकते हैं.
साथ ही, नेटवर्क की लागत कम की जा सकती है.