डेफर और एसिंक्स का उपयोग करके वर्डप्रेस में जावास्क्रिप्ट के पार्सिंग को कैसे टालें

जब आगंतुकों के लिए उपयोगकर्ता अनुभव को बढ़ाने, खोज इंजन पर आपकी वेबसाइट की दृश्यता में सुधार करने और आपकी साइट के जैविक ट्रैफ़िक को बढ़ाने की बात आती है, तो फास्ट-लोडिंग वर्डप्रेस साइटें गंभीर लाभ प्रदान करती हैं।

एक वेब पेज में HTML, CSS, Javascript और इमेज होते हैं, और पेज लोड समय को कम करने के लिए इनमें से प्रत्येक को ऑप्टिमाइज़ करना पड़ता है। छवियों का पृष्ठ आकार पर सबसे बड़ा प्रभाव पड़ता है इसलिए वर्डप्रेस छवि अनुकूलन प्लगइन का उपयोग करके छवि फ़ाइल आकार को कम करना महत्वपूर्ण है।

पेज के प्रदर्शन को और बेहतर बनाने के लिए, आप वर्डप्रेस में जावास्क्रिप्ट की पार्सिंग को स्थगित कर सकते हैं जिसका अर्थ है कि आप ब्राउज़र को जावास्क्रिप्ट लोड होने से पहले पृष्ठ सामग्री और छवियों को लोड करने की सलाह दे सकते हैं। इस उपाय को करने का अर्थ है कि प्रपत्र और स्लाइडर्स जैसे जावास्क्रिप्ट तत्वों को लोड होने में कुछ सेकंड अतिरिक्त लग सकते हैं, लेकिन यह भुगतान करने के लिए एक छोटी सी कीमत है क्योंकि पेज लोडिंग समय में काफी सुधार हुआ है।

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

इस लेख में, मैं समझाऊंगा कि जावास्क्रिप्ट फ़ाइलों की लोडिंग को स्थगित करने के क्या लाभ हैं और आपको पांच उपयोगी वर्डप्रेस प्लगइन्स दिखाते हैं जो आपके लिए प्रक्रिया को सरल करेगा।

मैं आपको इस विषय की पूरी समझ प्राप्त करने के लिए पूरे लेख को पढ़ने के लिए प्रोत्साहित करता हूं, लेकिन यदि आप एक नौसिखिया हैं, तो आपको इस लेख से एक बात दूर रखनी चाहिए कि स्थगित करें और Async आपकी वेबसाइट के पृष्ठ लोडिंग समय में उल्लेखनीय रूप से सुधार कर सकता है।

WordPress में Javascript पार्सिंग को स्थगित करने के विभिन्न तरीके (Defer और Async के साथ)

जावास्क्रिप्ट ने खुद को वर्डप्रेस वेबसाइटों के एक महत्वपूर्ण बिल्डिंग ब्लॉक के रूप में स्थापित किया है, जिसका उपयोग बटन, फॉर्म, मीडिया गैलरी, ऑडियो, वीडियो, काउंटडाउन टाइमर, सोशल मीडिया टाइमलाइन और बहुत कुछ प्रदर्शित करने के लिए किया जा रहा है।

दुर्भाग्य से, जावास्क्रिप्ट भी एक मुख्य कारण है कि वेब पेज धीरे-धीरे लोड होते हैं क्योंकि ब्राउज़र को पेज के HTML मार्कअप को पार्स करना जारी रखने से पहले प्रत्येक स्क्रिप्ट को रोकना, डाउनलोड करना और निष्पादित करना होता है।

पार्सिंग वह प्रक्रिया है जिसमें ब्राउज़र विश्लेषण करता है और पृष्ठ के कोड को उस प्रारूप में परिवर्तित करता है जिसे वह निष्पादित कर सकता है। कोई भी कोड जो इस प्रक्रिया को रोकता है उसे "रेंडर-ब्लॉकिंग" कहा जाता है क्योंकि यह विज़िटर के लिए पेज को रेंडर करने की प्रक्रिया में देरी कर रहा है।

रेंडर-ब्लॉकिंग संसाधन एक सामान्य कारण है कि एक वर्डप्रेस वेबसाइट धीरे-धीरे लोड हो रही है। रेंडर-ब्लॉकिंग को रोकने के लिए क्रिटिकल सीएसएस को इनलाइन प्रदर्शित किया जा सकता है, लेकिन बाद में डेफर का उपयोग करके जावास्क्रिप्ट लोडिंग को स्थगित करना बेहतर है। या Async जावास्क्रिप्ट कोड को पेज रेंडरिंग को ब्लॉक करने से रोकने के लिए।

अप्रयुक्त जावास्क्रिप्ट कोड को हटाना और जावास्क्रिप्ट निष्पादन समय को कम करना भी एक अच्छा अभ्यास है। ऐसा करने का एक तरीका है मिनीफिकेशन नामक प्रक्रिया के माध्यम से बड़ी Javascript फ़ाइलों के आकार को कम करना , जो प्रत्येक Javascript फ़ाइल से रिक्त स्थान और अनावश्यक कोड को हटा देता है।

Google पेजस्पीड इनसाइट्स और जीटीमेट्रिक्स जैसी वेबसाइट बेंचमार्किंग सेवाओं के लिए सबसे महत्वपूर्ण मेट्रिक्स में से एक फर्स्ट कंटेंटफुल पेंट है, जो आगंतुकों को पहली सामग्री प्रदर्शित करने में लगने वाला समय है। Google बताता है कि 0 से 1.8 सेकंड का एक अच्छा समय और 1.8 से 3 सेकंड का समय मध्यम होना चाहिए। 3 सेकंड से ऊपर की कोई भी चीज़ धीमी मानी जाती है।

आपको बस एक वेबसाइट बेंचमार्किंग सेवा में एक पृष्ठ का URL दर्ज करना है ताकि वह जावास्क्रिप्ट और सीएसएस फाइलें देख सकें जो पृष्ठ के रेंडर को रोक रही हैं। जैसा कि आप नीचे दिए गए स्क्रीनशॉट से देख सकते हैं, रेंडर-ब्लॉकिंग CSS और Javascript फ़ाइलों को डाउनलोड होने में कुछ सेकंड लग सकते हैं, इसलिए यदि आप इन संसाधनों को समाप्त कर सकते हैं, तो आपके पृष्ठ काफ़ी तेज़ी से लोड होंगे।

रेंडर-ब्लॉकिंग Javascript फ़ाइलों को समाप्त करने का सबसे प्रभावी तरीका स्थगित . का उपयोग करना है और async गुण। इन बूलियन विशेषताओं का उपयोग केवल स्क्रिप्ट HTML तत्व के साथ किया जा सकता है जब बाहरी फ़ाइलों को कॉल करने के लिए SRC विशेषता का उपयोग किया जाता है।

<script src="javascript.js"></script>

जावास्क्रिप्ट फ़ाइल

<script defer src="javascript.js"></script>

जावास्क्रिप्ट फ़ाइल स्थगित के साथ

<script async src="javascript.js"></script>

JAsync के साथ अवास्क्रिप्ट फ़ाइल

जब आप HTML स्क्रिप्ट तत्व में defer या async विशेषता जोड़ते हैं, तो आप ब्राउज़र को उसी समय फ़ाइल डाउनलोड करने की सलाह देते हैं जब पृष्ठ को पार्स किया जाता है। defer के साथ, पृष्ठ को पूरी तरह से पार्स किए जाने के बाद फ़ाइल को निष्पादित किया जाता है।

इसके विपरीत, async विशेषता एक एसिंक्रोनस ऑपरेशन है जो फ़ाइल को डाउनलोड होते ही निष्पादित करता है। इस प्रकार, async वाले पृष्ठ को पार्स करने का कुल समय थोड़ा अधिक होगा क्योंकि ब्राउज़र फ़ाइल को निष्पादित करने के लिए HTML को संक्षिप्त रूप से पार्स करना बंद कर देगा।

यदि आप defer और async दोनों को निर्दिष्ट करना चाहते हैं, तो ब्राउज़र async का उपयोग करेंगे।

दस्तावेज़ ऑब्जेक्ट मॉडल को समझने के लिए एक महत्वपूर्ण मानक है, जिसे अक्सर DOM के रूप में जाना जाता है। DOM एक संपूर्ण दस्तावेज़ का प्रतिनिधित्व करता है, जैसे कि XML फ़ाइल या HTML पृष्ठ, एकल ऑब्जेक्ट के रूप में। सिर, शरीर और शीर्षलेख जैसे महत्वपूर्ण तत्वों को DOM की शाखाओं के रूप में माना जा सकता है।

यदि किसी Javascript फ़ाइल को किसी अन्य फ़ाइल या स्वयं DOM से जानकारी की आवश्यकता नहीं है, तो यह async पद्धति का उपयोग करने के लिए उपयुक्त हो सकती है क्योंकि आपके पृष्ठ के महत्वपूर्ण तत्व जल्दी प्रदर्शित होंगे। बस इस बात से अवगत रहें कि यदि फ़ाइल अभी तक लोड नहीं की गई जानकारी का अनुरोध कर रही है, तो async आपकी वेबसाइट में त्रुटियाँ पैदा कर सकता है।

यदि किसी Javascript फ़ाइल को जानकारी की आवश्यकता है, तो स्थगित करें पसंदीदा विकल्प है क्योंकि यह सुनिश्चित करता है कि फ़ाइल निष्पादित होने से पहले सभी सामग्री को सही तरीके से पुनर्प्राप्त किया जाए।

defer और async का लक्ष्य पेज रेंडरिंग के अवरोध को कम करना है और आप जिस भी तरीके का उपयोग करते हैं, पेज लोडिंग समय में आपको एक बड़ा सुधार दिखाई देगा।

डेफर और एसिंक्स का उपयोग कब करना है, इसकी अधिक व्यापक व्याख्या के लिए मैं ज़ेल ल्यू के लेख "कैसे और कब Async और Defer विशेषताओं का उपयोग करें" पढ़ने की सलाह देता हूं।

WordPress Plugin का उपयोग करके Javascript की पार्सिंग को कैसे टालें

आपकी वेबसाइट पर अधिकांश Javascript कॉल आपके वर्डप्रेस थीम और सक्रिय वर्डप्रेस प्लगइन्स से आएंगे, इसलिए स्क्रिप्ट तत्वों में मैन्युअल रूप से defer और async विशेषताओं को जोड़ना अव्यावहारिक है।

वर्डप्रेस में जावास्क्रिप्ट की पार्सिंग को स्थगित करने के लिए एक प्रदर्शन वर्डप्रेस प्लगइन का उपयोग करना बेहतर है और आपकी वेबसाइट पर डिफर या एसिंक्स को लागू करने की प्रक्रिया को सरल बनाना है।

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

इसलिए, आपकी वेबसाइट के लिए सही कॉन्फ़िगरेशन सेटिंग्स और सर्वोत्तम प्रदर्शन खोजने के लिए परीक्षण और त्रुटि आवश्यक है।

• वेबसाइट बैकअप - अनुकूलन वर्डप्रेस प्लगइन सक्रिय करने से पहले अपनी वेबसाइट का बैकअप लें
• प्रदर्शन का परीक्षण करें - अपनी वेबसाइट पर प्रमुख पृष्ठों के प्रदर्शन का परीक्षण करें और हर बार जब आप अनुकूलन कॉन्फ़िगरेशन सेटिंग बदलते हैं
• अपनी वेबसाइट की समीक्षा करें - जांचें कि आपकी कॉन्फ़िगरेशन बदलने के बाद आपकी वेबसाइट का कोई हिस्सा टूटा नहीं है

यदि आप जावास्क्रिप्ट को पार्स करते समय किसी भी बड़ी समस्या का सामना करते हैं, तो प्लगइन की डिफ़ॉल्ट सेटिंग्स पर वापस लौटें। प्लग इन को अनइंस्टॉल भी किया जा सकता है यदि यह आपकी वेबसाइट के अनुरूप काम नहीं कर रहा है।

1. अपने आप ऑप्टिमाइज़ करें

ऑटोप्टीमाइज़ एक बहुमुखी वर्डप्रेस ऑप्टिमाइज़ेशन समाधान है जो आपको जावास्क्रिप्ट, सीएसएस और एचटीएमएल को एकत्रित और छोटा करने की अनुमति देता है। प्रदर्शन को बेहतर बनाने के लिए अनुकूलित सामग्री को कैश किया जाता है। यह कैश जल्दी से बहुत बड़ा हो सकता है, इसलिए मैं आपको कैशे को स्वचालित रूप से साफ़ करने के लिए Autoclear Autooptimize Cache का उपयोग करने के लिए प्रोत्साहित करता हूं।

हालाँकि ऑटोप्टिमाइज़ फ़ाइल एकत्रीकरण के लिए जाना जाता है, इसका उपयोग जावास्क्रिप्ट फ़ाइलों के पार्सिंग को स्थगित करने के लिए भी किया जा सकता है ताकि वे रेंडर-ब्लॉकिंग न हों। जावास्क्रिप्ट और सीएसएस कोड को इनलाइन भी प्रदर्शित किया जा सकता है और छवियों, Google फ़ॉन्ट्स, इमोजी आदि के लिए अतिरिक्त अनुकूलन विकल्प हैं।

2. एसिंक्स जावास्क्रिप्ट प्लगइन

ऑटोऑप्टिमाइज़ के निर्माता द्वारा विकसित, एसिंक जावास्क्रिप्ट आपको एसिंक्स लागू करने और अपनी वेबसाइट पर जावास्क्रिप्ट फाइलों को स्थगित करने की अनुमति देता है। यह आपको प्रत्येक Javascript फ़ाइल पर पूर्ण नियंत्रण देता है, जिससे आप jQuery, विशिष्ट Javascript फ़ाइलें, वर्डप्रेस प्लगइन्स और वर्डप्रेस थीम को बाहर कर सकते हैं। यदि आप चाहें, तो आप यह निर्दिष्ट कर सकते हैं कि कौन सी Javascript फ़ाइलें async और कौन सी स्थगित करनी हैं।

Async Javascript की सबसे अच्छी विशेषताओं में से एक सेटअप विज़ार्ड है जो आपकी वेबसाइट के लिए सभी संभावित कॉन्फ़िगरेशन सेटिंग्स के लिए GTmetrix पर प्रदर्शन परीक्षण चलाता है। यह एक अच्छा समय बचाने वाला है क्योंकि परिणाम दिखाते हैं कि प्रत्येक कॉन्फ़िगरेशन के साथ आपकी वेबसाइट कितनी तेज़ होगी, लेकिन यह सुनिश्चित करने के लिए हर बार अपनी वेबसाइट की जांच करना सुनिश्चित करें कि आपकी वेबसाइट का कोई पहलू तोड़ा नहीं गया है।

3. परफ़मैटर्स

Perfmatters एक प्रीमियम वर्डप्रेस प्रदर्शन टूलबॉक्स है जो दर्जनों अद्वितीय प्रदर्शन सुविधाओं का दावा करता है। प्रति वर्ष $24.95 से खुदरा बिक्री, प्लगइन आपको अपनी वेबसाइट पर Javascript फ़ाइलों (सभी JS फ़ाइलों) के पार्सिंग को स्थगित करने देता है। jQuery फ़ाइलों को deferrals में शामिल किया जा सकता है और आप विशिष्ट Javascript फ़ाइलों को भी बाहर कर सकते हैं। एक और बढ़िया विकल्प जो आपको देता है वह है Javascript Delay, जो केवल Javascript फ़ाइलों को लोड करेगा जब उपयोगकर्ता सहभागिता होगी।

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

मेरी पसंदीदा विशेषता स्क्रिप्ट प्रबंधक है क्योंकि यह आपको अपनी वेबसाइट के प्रत्येक पृष्ठ के लिए जावास्क्रिप्ट और सीएसएस फ़ाइलों को सक्षम और अक्षम करने की अनुमति देता है। यह पृष्ठों के आकार को काफी कम कर देगा क्योंकि वर्डप्रेस डेवलपर्स को आपकी वेबसाइट पर जावास्क्रिप्ट और सीएसएस फाइलों को लोड करने की बुरी आदत है, भले ही वे केवल कुछ पृष्ठों पर ही आवश्यक हों।

4. एसेट क्लीनअप

एसेट क्लीनअप एक सुविधा संपन्न ऑप्टिमाइज़ेशन वर्डप्रेस प्लगइन है जो आपको जावास्क्रिप्ट और सीएसएस फाइलों के पार्सिंग को छोटा, संयोजित और स्थगित करने देता है। इसका CSS और JS मैनेजर Perfmatter के स्क्रिप्ट मैनेजर के समान काम करता है, जिससे आप यह निर्दिष्ट कर सकते हैं कि कोई फ़ाइल किसी विशेष पृष्ठ पर लोड की गई है या नहीं। आप कोर वर्डप्रेस सेटिंग्स को अक्षम भी कर सकते हैं, एचटीएमएल कोड को साफ कर सकते हैं, Google फ़ॉन्ट्स को अनुकूलित कर सकते हैं, और बहुत कुछ कर सकते हैं।

एसेट क्लीनअप प्रो के लिए एकल लाइसेंस €42.36 प्रति वर्ष पर रीटेल होता है। अपग्रेड करने से आप कोड को इनलाइन रख सकते हैं और एसिंक्स निर्दिष्ट कर सकते हैं और पेज-दर-पेज आधार पर जावास्क्रिप्ट फाइलों के लिए स्थगित कर सकते हैं। यह एक प्लगइन प्रबंधक को भी अनलॉक करता है और आपको इस पर अधिक नियंत्रण देता है कि आपकी वेबसाइट पर संपत्ति कैसे लोड की जाती है।

5. HTTP/2 पुश प्रीलोड

HTTP / 2 पुश प्रीलोड आपको एन्क्यू लोडिंग फ़ंक्शन का उपयोग करके अपने HTTP2 समर्थित सर्वर पर जावास्क्रिप्ट और सीएसएस फ़ाइलों को पुश और प्रीलोड करने देता है। इसे सभी फाइलों पर लागू किया जा सकता है या आप प्रत्येक संसाधन को अलग से कॉन्फ़िगर करना चुन सकते हैं। संसाधन प्रकारों में स्क्रिप्ट, शैली, ऑडियो, एम्बेड, फ़ेच, फ़ॉन्ट, छवि, ऑब्जेक्ट और वीडियो शामिल हैं।

जब आप किसी Javascript फ़ाइल का URL दर्ज करते हैं, तो आप async, स्थगित या हटाना चुन सकते हैं। HTTP / 2 पुश प्रीलोड आपको नियमों को परिभाषित करने की अनुमति देता है कि यह सेटिंग कब लागू होगी। आप सभी पृष्ठों के लिए, मोबाइल या डेस्कटॉप के लिए, विशिष्ट पोस्ट और पृष्ठों के लिए, श्रेणियों, खोज पृष्ठों, WooCommerce पृष्ठों और अधिक के लिए संसाधन के लिए Javascript नियमों को परिभाषित कर सकते हैं।

अंतिम विचार

जावास्क्रिप्ट वेबसाइटों में गतिशील सामग्री और इंटरैक्टिव तत्वों को जोड़ने का पसंदीदा तरीका बना हुआ है। कई वर्डप्रेस थीम और प्लगइन्स जावास्क्रिप्ट का उपयोग करते हैं, यह महत्वपूर्ण है कि वर्डप्रेस में जावास्क्रिप्ट की पार्सिंग को स्थगित करें और यह सुनिश्चित करने के लिए defer और async का उपयोग करें कि पृष्ठ शीघ्रता से प्रस्तुत हों और पृष्ठ रेंडरिंग के अवरोध को कम करें।

आपको कई वर्डप्रेस प्लगइन्स में defer और async लागू करने की कार्यक्षमता मिल जाएगी, हालांकि इस आलेख में मैंने जिन समाधानों का उल्लेख किया है, वे आपको अपनी जावास्क्रिप्ट फ़ाइलों पर अधिक नियंत्रण प्रदान करते हैं।

अपनी वेबसाइट पर, मैं फ़ाइल एकत्रीकरण के लिए ऑटोप्टिमाइज़ का उपयोग करता हूं और जावास्क्रिप्ट डिफरल के लिए एसिंक जावास्क्रिप्ट का उपयोग करता हूं। मैं Async Javascript से खुश हूं, हालांकि HTTP/2 पुश प्रीलोड कई वेबसाइट स्वामियों के लिए एक बेहतर विकल्प हो सकता है क्योंकि यह आपको बेहतर नियंत्रण देता है कि ऑप्टिमाइज़ेशन सेटिंग्स कहाँ लागू की जाती हैं।

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

मैं आपको जावास्क्रिप्ट पार्सिंग को स्थगित करने के लिए इन सभी वर्डप्रेस प्लगइन्स का परीक्षण करने और सर्वोत्तम कॉन्फ़िगरेशन सुनिश्चित करने के लिए कई परीक्षण करने के लिए प्रोत्साहित करता हूं।

शुभकामनाएँ।

केविन