वर्डप्रेस में JavaScript को कुशलतापूर्वक डिफर करें: Defer और Async तकनीकों से गति बढ़ाएं

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

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

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

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

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

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

वर्डप्रेस में जावास्क्रिप्ट पार्सिंग को डिफर करने के विभिन्न तरीके (Defer और Async के साथ)

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

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

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

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

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

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

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

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

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

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

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

Defer के साथ जावास्क्रिप्ट फाइल

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

Async के साथ जावास्क्रिप्ट फाइल

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

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

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

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

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

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

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

मैं Zell Liew के लेख "How and when to use Async and Defer attributes" को पढ़ने की सलाह देता हूं ताकि defer और async का उपयोग कब करना है, इसकी अधिक व्यापक व्याख्या मिल सके।

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

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

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

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

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

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

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

1. Autoptimize

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

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

AUTOPTIMIZE डाउनलोड करें

2. Async JavaScript Plugin

Autoptimize के निर्माता द्वारा विकसित, Async JavaScript आपको अपनी वेबसाइट पर जावास्क्रिप्ट फाइलों पर async और defer लागू करने की अनुमति देता है। यह आपको हर जावास्क्रिप्ट फाइल पर पूर्ण नियंत्रण देता है, जिससे आप jQuery, विशिष्ट जावास्क्रिप्ट फाइलों, वर्डप्रेस प्लगइन्स और वर्डप्रेस थीम को बाहर कर सकते हैं। यदि आप पसंद करते हैं, तो आप ठीक से निर्दिष्ट कर सकते हैं कि किन जावास्क्रिप्ट फाइलों को async करना है और किन्हें defer करना है।

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

ASYNC JAVASCRIPT डाउनलोड करें

3. Perfmatters

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

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

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

आधिकारिक वेबसाइट

4. Asset CleanUp

Asset CleanUp एक सुविधा-संपन्न अनुकूलन वर्डप्रेस प्लगइन है जो आपको जावास्क्रिप्ट और CSS फाइलों को मिनिफाई, संयोजित और पार्सिंग को डिफर करने देता है। इसका CSS और JS मैनेजर Perfmatters के स्क्रिप्ट मैनेजर के समान तरीके से काम करता है, जिससे आप निर्दिष्ट कर सकते हैं कि कोई फाइल किसी विशेष पेज पर लोड होती है या नहीं। आप कोर वर्डप्रेस सेटिंग्स को भी अक्षम कर सकते हैं, HTML कोड को साफ़ कर सकते हैं, Google Fonts को अनुकूलित कर सकते हैं, और बहुत कुछ।

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

ASSET CLEANUP डाउनलोड करें ASSET CLEANUP PRO

5. HTTP/2 Push Preload

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

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

HTTP/2 PUSH PRELOAD डाउनलोड करें

अंतिम विचार

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

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

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

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

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

शुभकामनाएं।

Kevin