अगर कोई तीसरे पक्ष की स्क्रिप्ट आपके पेज लोड को धीमा कर रही है, तो परफ़ॉर्मेंस को बेहतर बनाने के लिए आपके पास ये दो विकल्प हैं:
- अगर यह आपकी साइट के लिए काम का नहीं है, तो इसे हटा दें.
- लोड होने की प्रोसेस को ऑप्टिमाइज़ करें.
इस पोस्ट में, तीसरे पक्ष की स्क्रिप्ट को लोड करने की प्रोसेस को ऑप्टिमाइज़ करने का तरीका बताया गया है. इसके लिए, इन तकनीकों का इस्तेमाल किया जाता है:
<script>टैग परasyncयाdeferएट्रिब्यूट का इस्तेमाल करना- ज़रूरी ऑरिजिन के साथ पहले से कनेक्शन बनाना
- लेज़ी लोडिंग
- तीसरे पक्ष की स्क्रिप्ट को दिखाने के तरीके को ऑप्टिमाइज़ करना
async या defer का इस्तेमाल करें
सिंक्रोनस स्क्रिप्ट, डीओएम के बनने और रेंडर होने में देरी करती हैं. इसलिए, आपको तीसरे पक्ष की स्क्रिप्ट को हमेशा असिंक्रोनस तरीके से लोड करना चाहिए. ऐसा तब तक करें, जब तक पेज को रेंडर करने से पहले स्क्रिप्ट को चलाना ज़रूरी न हो.
async और defer एट्रिब्यूट, ब्राउज़र को बताते हैं कि वह बैकग्राउंड में स्क्रिप्ट लोड करते समय, एचटीएमएल को पार्स करना जारी रख सकता है. इसके बाद, स्क्रिप्ट लोड होने के बाद उसे लागू कर सकता है. इस तरह, स्क्रिप्ट डाउनलोड करने से डीओएम का निर्माण या पेज रेंडरिंग नहीं रुकती. इससे उपयोगकर्ता को सभी स्क्रिप्ट लोड होने से पहले ही पेज दिखने लगता है.
<script async src="script.js">
<script defer src="script.js">
async और defer एट्रिब्यूट के बीच का अंतर यह है कि ब्राउज़र, स्क्रिप्ट कब लागू करता है.
async
async एट्रिब्यूट वाली स्क्रिप्ट, डाउनलोड होने के बाद और विंडो के लोड इवेंट से पहले, पहले अवसर पर लागू होती हैं. इसका मतलब है कि हो सकता है कि async स्क्रिप्ट, एचटीएमएल में दिखने के क्रम में न चले. इसका यह भी मतलब है कि अगर पार्स करने वाला प्रोग्राम काम कर रहा है और इस दौरान इमेज डाउनलोड हो जाती हैं, तो वे डीओएम बनाने की प्रोसेस में रुकावट डाल सकती हैं.