JavaScript प्रोग्रामिंग भाषा वेब पेजों को डायनामिक सामग्री प्रदर्शित करने में मदद करती है। WordPress वेबसाइटों पर, उदाहरण के लिए, JavaScript का उपयोग ऑडियो और वीडियो एम्बेड करने के लिए किया जाता है। इसका उपयोग छवि दीर्घाओं, इंटरैक्टिव मेनू, काउंटडाउन टाइमर और बहुत कुछ प्रदर्शित करने के लिए भी किया जाता है।
JavaScript फाइलें .js फ़ाइल एक्सटेंशन का उपयोग करती हैं और एक सामान्य WordPress वेबसाइट पर, JavaScript फाइलें WordPress थीम और सक्रिय WordPress प्लगइन्स द्वारा पेजों में डाली जाती हैं। उदाहरण के लिए, आपके थीम के होम पेज स्लाइडर को सही ढंग से काम करने के लिए slider.js नामक फाइल की आवश्यकता हो सकती है, जबकि आपके संपर्क फ़ॉर्म पेज को form.js नामक फाइल की आवश्यकता हो सकती है।
मेरा मानना है कि JavaScript आधुनिक WordPress वेबसाइटों के लिए आवश्यक है। दुर्भाग्य से, यदि इसे सही ढंग से अनुकूलित नहीं किया गया तो यह वेबसाइट को धीमा भी कर सकता है।
हाइपरटेक्स्ट ट्रांसफर प्रोटोकॉल के पहले संस्करणों में, JavaScript वेबसाइटों को धीमा कर सकता है क्योंकि प्रत्येक JavaScript फाइल को पेज को सही ढंग से प्रदर्शित करने के लिए डाउनलोड और निष्पादित किया जाना था। इस समस्या से निपटने के लिए एक लोकप्रिय अनुकूलन तकनीक एकाधिक JavaScript फाइलों को संयोजित करना है ताकि ब्राउज़र को जितने HTTP अनुरोध करने हों, उनकी संख्या कम हो जाए। इस तकनीक को कभी-कभी JavaScript एग्रीगेशन कहा जाता है।
इस लेख में, मैं बताऊंगा कि कई वेबसाइट मालिक WordPress में बाहरी JavaScript को संयोजित क्यों करते हैं और कुछ उपयोगी WordPress प्लगइन्स साझा करूंगा जिनका उपयोग इस कार्य को करने के लिए किया जा सकता है। मैं यह भी बताऊंगा कि अधिकांश वेबसाइट मालिकों के लिए बाहरी JavaScript फाइलों को संयोजित करना अब आवश्यक नहीं है।
WordPress में बाहरी JavaScript फाइलों को संयोजित क्यों करें?
जबकि JavaScript फंक्शन को SCRIPT टैग का उपयोग करके सीधे HTML में जोड़ा जा सकता है, JavaScript कोड को बाहरी फाइल में सहेजना आम बात है। यह करना अधिक व्यावहारिक है क्योंकि यह कोड को अलग करता है और JavaScript फंक्शन को कई पेजों द्वारा कॉल करने की अनुमति देता है।
एक वेब पेज के लिए आवश्यक प्रत्येक JavaScript फाइल को पेज रेंडरिंग प्रक्रिया के दौरान ब्राउज़र द्वारा डाउनलोड किया जाना चाहिए।
| पेज रेंडरिंग | जब कोई वेब पेज देखता है, तो ब्राउज़र कोड की प्रत्येक लाइन को क्रम में प्रोसेस करके पेज बनाता है। इसे पेज रेंडरिंग के रूप में जाना जाता है। |
| HTTP अनुरोध | सर्वर पर एक फाइल तक पहुंचने का अनुरोध HTTP अनुरोध कहलाता है। इसलिए, ब्राउज़र को पेज के लिए आवश्यक प्रत्येक JavaScript फाइल के लिए एक HTTP अनुरोध करना पड़ता है। |
जब फाइलें क्रमिक क्रम में डाउनलोड होती हैं, तो बड़ी संख्या में HTTP अनुरोध वेब पेज लोड होने में लगने वाले समय को बढ़ा सकते हैं। इसलिए WordPress में बाहरी JavaScript फाइलों को संयोजित करके, आप पेज रेंडरिंग के दौरान किए जाने वाले HTTP अनुरोधों की संख्या को काफी कम कर सकते हैं।
कुछ सर्च इंजन बाहरी JavaScript को दो फाइलों में संयोजित करने की सलाह देते हैं।
| महत्वपूर्ण JavaScript फंक्शन (फाइल 1) | पहली JavaScript फाइल में महत्वपूर्ण फंक्शन होते हैं जो प्रारंभिक पेज लोड को सही ढंग से रेंडर करने के लिए आवश्यक होते हैं। |
| कम महत्वपूर्ण JavaScript फंक्शन (फाइल 2) | दूसरी JavaScript फाइल में कम महत्वपूर्ण फंक्शन होते हैं जिन्हें पेज लोड होने के बाद कॉल किया जा सकता है। |
यदि एक वेब पेज को सही ढंग से प्रदर्शित करने के लिए नौ JavaScript फाइलों की आवश्यकता होती है, तो WordPress में बाहरी JS फाइलों को संयोजित करने से JavaScript कोड के लिए कुल HTTP अनुरोधों की संख्या नौ से घटाकर केवल दो की जा सकती है। बाहरी CSS फाइलों को भी संयोजित किया जा सकता है, जिससे पेज के HTTP अनुरोधों की संख्या और भी कम हो जाती है।
क्या मेरी WordPress साइट तेज़ होगी यदि मैं बाहरी JavaScript फाइलों को संयोजित करता हूँ?
हाइपरटेक्स्ट ट्रांसफर प्रोटोकॉल में सुधार के कारण, अब JavaScript फाइलों और CSS फाइलों को संयोजित करना आवश्यक नहीं है जब तक कि आपकी वेब होस्टिंग कंपनी HTTP/2 के लिए समर्थन नहीं करती।
HTTP/1.0 और HTTP/1.1 में, प्रत्येक JavaScript और CSS फाइल को क्रमिक क्रम में डाउनलोड किया जाना था। इसका मतलब था कि अगली फाइल डाउनलोड शुरू होने से पहले एक फाइल को पूरी तरह से डाउनलोड करना पड़ता था। HTTP/2 प्रोटोकॉल, जिसे 2015 में लॉन्च किया गया था, ने समानांतर डाउनलोड की अनुमति देकर इस समस्या को हल किया। चूंकि सभी बाहरी संसाधनों को एक ही समय में डाउनलोड किया जा सकता है, इसलिए यदि HTTP/2 उपलब्ध है तो फाइलों को संयोजित करने का कोई लाभ नहीं है।
HTTP/2 वर्तमान में 95.6% इंटरनेट ब्राउज़रों द्वारा समर्थित है। 6 जनवरी 2022 तक, HTTP/2 का उपयोग सभी ऑनलाइन वेबसाइटों के 46.9% द्वारा किया जाता है, हालांकि आप नीचे दिए गए ग्राफ से देख सकते हैं कि इंटरनेट पर सबसे लोकप्रिय वेबसाइटों में यह आंकड़ा काफी अधिक है।
यदि आपके वेब होस्ट में HTTP/2 के लिए समर्थन है, तो फाइलों को संयोजित करना आपकी वेबसाइट को धीमा कर सकता है क्योंकि संयुक्त JavaScript फाइलें उन फाइलों से बड़ी होती हैं जिन्हें उन्होंने एग्रीगेट किया था। ऐसा इसलिए है क्योंकि ब्राउज़र को कई छोटी JavaScript फाइलों को एक ही समय में डाउनलोड करने की तुलना में दो बड़ी JavaScript फाइलों को डाउनलोड करने में अधिक समय लगता है।
दो तकनीकें जो मैं JavaScript के साथ उपयोग करने की सलाह देता हूं वे हैं मिनिफिकेशन और डिफर पार्सिंग।
| मिनिफाई | मिनिफिकेशन में अनावश्यक वर्णों जैसे व्हाइटस्पेस और टिप्पणियों को हटाना शामिल है। इसके परिणामस्वरूप JavaScript फाइल छोटी होती है। |
| डिफर पार्सिंग | JavaScript कोड पेज रेंडरिंग प्रक्रिया को धीमा कर देता है। इस मुद्दे को संबोधित करने के लिए डिफर और Async नामक दो तकनीकों का उपयोग किया जा सकता है। |
WordPress में JavaScript पार्सिंग को डिफर करने के बारे में बेहतर समझ के लिए मेरा लेख पढ़ें कि JavaScript पेज रेंडरिंग प्रक्रिया को क्यों धीमा करता है।
WordPress में बाहरी JavaScript को कैसे संयोजित करें
यदि आपकी वेब होस्टिंग कंपनी अभी भी HTTP 1.1 का उपयोग करती है, तो WordPress में बाहरी JavaScript फाइलों और CSS फाइलों को संयोजित करने की सिफारिश की जाती है।
फाइलों को संयोजित करने से पहले और बाद में प्रदर्शन टेस्ट चलाना सुनिश्चित करें ताकि आप जान सकें कि पेज लोडिंग समय कैसे प्रभावित हुआ है। आप GTmetrix, Google PageSpeed Insights और Pingdom Website Speed Test का उपयोग करके ऐसा कर सकते हैं।
Autoptimize
Autoptimize WordPress उपयोगकर्ताओं के लिए उपलब्ध सबसे प्रभावी अनुकूलन प्लगइन्स में से एक है। यह HTML के लिए मिनिफिकेशन और JavaScript और CSS के लिए फाइल संयोजन और मिनिफिकेशन का समर्थन करता है। JavaScript फाइलों को रेंडर-ब्लॉकिंग रोकने के लिए एग्रीगेट करने के बजाय डिफर भी किया जा सकता है और Google Fonts के लिए भी अनुकूलन विकल्प हैं।
मैंने कई WordPress वेबसाइटों पर Autoptimize का उपयोग किया है क्योंकि यह हमेशा पेज लोडिंग समय में सुधार करता है।
Asset CleanUp
Asset CleanUp एक अत्यधिक कॉन्फ़िगर करने योग्य अनुकूलन WordPress प्लगइन है जो JavaScript और CSS के मिनिफिकेशन, संयोजन और डिफरिंग का समर्थन करता है। यह आपको HTML को साफ करने और फॉन्ट प्रबंधित करने और पेज लोडिंग समय पर उनके प्रभाव को कम करने के लिए कई टूल भी देता है।
Asset CleanUp की एक खास विशेषता JavaScript और CSS मैनेजर है। यह आपको यह निर्दिष्ट करने देता है कि आपकी वेबसाइट पर किन पेजों पर JavaScript और CSS फाइलें लोड होती हैं।
WP Super Minify
WP Super Minify थोड़ा अलग काम करता है और केवल आपको JavaScript को कंप्रेस करने और CSS को कंप्रेस करने का विकल्प देता है। जब चुना जाता है, तो WP Super Minify आपकी फाइलों को संयोजित, मिनिफाई और कैश करेगा।
यदि आप एक साधारण अनुकूलन समाधान ढूंढ रहे हैं जो बस काम करता है, तो यह प्लगइन आपके लिए हो सकता है।
WordPress कैश प्लगइन का उपयोग करके बाहरी JavaScript फाइलों को संयोजित करना
सबसे अच्छे WordPress कैशिंग प्लगइन्स में आपकी वेबसाइट प्रदर्शन को बेहतर बनाने में मदद करने के लिए कई अतिरिक्त अनुकूलन टूल शामिल हैं। इसलिए इस बात की बहुत संभावना है कि आपका मौजूदा WordPress कैशिंग समाधान आपको बाहरी JavaScript और CSS फाइलों को संयोजित करने की अनुमति देता है।
उदाहरण के लिए, WP Rocket में JavaScript और CSS फाइलों को मिनिफाई और संयोजित करने के विकल्प हैं। JavaScript फाइलों को रेंडर-ब्लॉकिंग रोकने के लिए डिफर भी किया जा सकता है।
मेरी सिफारिश है कि अपने पसंदीदा WordPress कैशिंग प्लगइन का उपयोग करके फाइल संयोजन का उपयोग करके पेज लोडिंग समय का परीक्षण करें और फिर परिणामों की तुलना Autoptimize और Asset CleanUp जैसे स्टैंडअलोन JavaScript अनुकूलन समाधानों से करें।
अंतिम विचार
मुझे उम्मीद है कि आपको बाहरी JavaScript फाइलों को संयोजित करने पर यह नज़र पसंद आई होगी। जैसा कि आपने देखा, यदि आपका वेब होस्ट HTTP/2 का समर्थन करता है तो JavaScript फाइलों को एग्रीगेट करना अब आवश्यक नहीं है क्योंकि फाइलों को समानांतर में डाउनलोड करना अधिक प्रभावी है।
यदि आपका वेब होस्ट केवल HTTP/1.1 के लिए समर्थन प्रदान करता है, तो आप WordPress में बाहरी JavaScript को संयोजित करके पेज लोडिंग समय कम कर सकते हैं।
अनुशंसित पढ़ें: WordPress में अनुपयोगी CSS हटाएं
पढ़ने के लिए धन्यवाद।
Kevin
