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