जावास्क्रिप्ट प्रोग्रामिंग भाषा वेब पेजों को गतिशील सामग्री प्रदर्शित करने में मदद करती है। उदाहरण के लिए, वर्डप्रेस वेबसाइटों पर, जावास्क्रिप्ट का उपयोग ऑडियो और वीडियो को एम्बेड करने के लिए किया जाता है। इसका उपयोग इमेज गैलरी, इंटरेक्टिव मेनू, काउंटडाउन टाइमर और बहुत कुछ प्रदर्शित करने के लिए भी किया जाता है।
Javascript फ़ाइलें फ़ाइल एक्सटेंशन .js का उपयोग करती हैं और एक विशिष्ट वर्डप्रेस वेबसाइट पर, Javascript फ़ाइलें वर्डप्रेस थीम और सक्रिय किए गए वर्डप्रेस प्लगइन्स द्वारा पृष्ठों में डाली जाती हैं। उदाहरण के लिए, आपकी थीम के होम पेज स्लाइडर को सही ढंग से काम करने के लिए स्लाइडर.जेएस नामक फ़ाइल की आवश्यकता हो सकती है, जबकि आपके संपर्क फ़ॉर्म पेज को फॉर्म.जेएस नामक फ़ाइल की आवश्यकता हो सकती है।
मेरा मानना है कि आधुनिक वर्डप्रेस वेबसाइटों के लिए जावास्क्रिप्ट आवश्यक है। दुर्भाग्य से, यह वेबसाइट को धीमा भी कर सकता है यदि इसे सही तरीके से अनुकूलित नहीं किया गया है।
हाइपरटेक्स्ट ट्रांसफर प्रोटोकॉल के पहले संस्करणों में, जावास्क्रिप्ट वेबसाइटों को धीमा कर सकता है क्योंकि पृष्ठ को सही ढंग से प्रदर्शित करने के लिए प्रत्येक जावास्क्रिप्ट फ़ाइल को डाउनलोड और निष्पादित किया जाना था। इस समस्या से निपटने के लिए एक लोकप्रिय अनुकूलन तकनीक एक ब्राउज़र द्वारा किए जाने वाले HTTP अनुरोधों की संख्या को कम करने के लिए कई जावास्क्रिप्ट फ़ाइलों को संयोजित करना है। इस तकनीक को कभी-कभी Javascript एकत्रीकरण के रूप में संदर्भित किया जाता है।
इस लेख में, मैं समझाऊंगा कि क्यों कई वेबसाइट मालिक WordPress में बाहरी Javascript को मिलाते हैं और कुछ उपयोगी वर्डप्रेस प्लगइन्स साझा करें जिनका उपयोग इस कार्य को करने के लिए किया जा सकता है। मैं इस बारे में भी बात करूंगा कि अधिकांश वेबसाइट स्वामियों के लिए बाहरी Javascript फ़ाइलों को संयोजित करना अब आवश्यक क्यों नहीं है।
Wordpress में बाहरी Javascript फ़ाइलों को क्यों मिलाएं?
जबकि जावास्क्रिप्ट फ़ंक्शन को सीधे SCRIPT टैग का उपयोग करके HTML में जोड़ा जा सकता है, इसके बजाय जावास्क्रिप्ट कोड को बाहरी फ़ाइल में सहेजना आम बात है। ऐसा करना अधिक व्यावहारिक है क्योंकि यह कोड को अलग करता है और कई पृष्ठों द्वारा जावास्क्रिप्ट कार्यों को कॉल करने की अनुमति देता है।
वेब पेज के लिए आवश्यक प्रत्येक Javascript फ़ाइल को पेज रेंडरिंग प्रक्रिया के दौरान ब्राउज़र द्वारा डाउनलोड करना होता है।
| पृष्ठ प्रतिपादन | जब कोई वेब पेज देखता है, तो ब्राउजर कोड की प्रत्येक लाइन को क्रम से प्रोसेस करके पेज बनाता है। इसे पेज रेंडरिंग के रूप में जाना जाता है। |
| HTTP अनुरोध | सर्वर पर किसी फ़ाइल तक पहुँचने के अनुरोध को HTTP अनुरोध कहा जाता है। इसलिए, ब्राउज़र को प्रत्येक जावास्क्रिप्ट फ़ाइल के लिए एक HTTP अनुरोध करना पड़ता है जो पृष्ठ के लिए आवश्यक है। |
जब फ़ाइलें क्रमिक क्रम में डाउनलोड की जाती हैं, तो HTTP अनुरोधों की एक बड़ी संख्या वेब पेज को लोड करने में लगने वाले समय को बढ़ा सकती है। इसलिए वर्डप्रेस में बाहरी Javascript फ़ाइलों को मिलाकर, आप पेज रेंडरिंग के दौरान किए जाने वाले HTTP अनुरोधों की संख्या को बहुत कम कर सकते हैं।
कुछ खोज इंजन बाहरी Javascript को दो फ़ाइलों में संयोजित करने की अनुशंसा करते हैं।
| महत्वपूर्ण Javascript कार्य (फ़ाइल 1) | पहली Javascript फ़ाइल में महत्वपूर्ण कार्य हैं जो प्रारंभिक पृष्ठ लोड को सही ढंग से प्रस्तुत करने के लिए आवश्यक हैं। |
| कम महत्वपूर्ण Javascript फ़ंक्शन (फ़ाइल 2) | दूसरी Javascript फ़ाइल में कम महत्वपूर्ण कार्य हैं जिन्हें पृष्ठ लोड होने के बाद कॉल किया जा सकता है। |
यदि किसी वेब पेज को सही ढंग से प्रदर्शित करने के लिए नौ जावास्क्रिप्ट फाइलों की आवश्यकता होती है, तो वर्डप्रेस में बाहरी जेएस फाइलों के संयोजन से आपको जावास्क्रिप्ट कोड के लिए HTTP अनुरोधों की कुल संख्या नौ से केवल दो तक कम करने में मदद मिल सकती है। बाहरी सीएसएस फाइलों को भी जोड़ा जा सकता है, जिससे पेज के HTTP अनुरोधों की संख्या और भी कम हो जाती है।
क्या मेरी वर्डप्रेस साइट तेज हो जाएगी यदि मैं बाहरी Javascript फाइलों को मिला दूं?
हाइपरटेक्स्ट ट्रांसफर प्रोटोकॉल में सुधार के कारण, जब तक आपकी वेब होस्टिंग कंपनी के पास HTTP / 2 के लिए समर्थन नहीं है, तब तक जावास्क्रिप्ट फ़ाइलों और CSS फ़ाइलों को संयोजित करना आवश्यक नहीं है।
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 फ़ाइलें डाउनलोड करने में अधिक समय लगता है।
मैं जावास्क्रिप्ट के साथ उपयोग करने की अनुशंसा करता हूं दो तकनीकें हैं minification और defer पार्सिंग।
| छोटा करें | मिनीफिकेशन व्हॉट्सएप और टिप्पणियों जैसे अनावश्यक पात्रों को हटाना शामिल है। इसके परिणामस्वरूप Javascript फ़ाइल छोटी हो जाती है। |
| पार्सिंग स्थगित करें | जावास्क्रिप्ट कोड पेज रेंडरिंग प्रक्रिया को धीमा कर देता है। स्थगित करें . नामक दो तकनीकें और Async इस समस्या को हल करने के लिए इस्तेमाल किया जा सकता है। |
जावास्क्रिप्ट पेज रेंडरिंग प्रक्रिया को धीमा क्यों करता है, इसकी बेहतर समझ के लिए कृपया वर्डप्रेस में जावास्क्रिप्ट पार्सिंग को स्थगित करने के बारे में मेरा लेख पढ़ें।
WordPress में बाहरी Javascript को कैसे संयोजित करें
यदि आपकी वेब होस्टिंग कंपनी अभी भी HTTP 1.1 का उपयोग करती है, तब भी वर्डप्रेस में बाहरी Javascript फ़ाइलों और CSS फ़ाइलों को संयोजित करने की अनुशंसा की जाती है।
फ़ाइलों के संयोजन से पहले और बाद में प्रदर्शन परीक्षण चलाना सुनिश्चित करें ताकि आप जान सकें कि पृष्ठ लोडिंग समय कैसे प्रभावित हुआ है। आप GTmetrix, Google PageSpeed Insights और Pingdom वेबसाइट स्पीड टेस्ट का उपयोग करके ऐसा कर सकते हैं।
स्वतः अनुकूलित करें
Autooptimize WordPress उपयोगकर्ताओं के लिए उपलब्ध सबसे प्रभावी अनुकूलन प्लगइन्स में से एक है। यह HTML और फ़ाइल संयोजन और Javascript और CSS के लिए minification के लिए minification का समर्थन करता है। रेंडर-ब्लॉकिंग को रोकने के लिए जावास्क्रिप्ट फ़ाइलों को एग्रीगेट के बजाय स्थगित किया जा सकता है और Google फ़ॉन्ट्स के लिए भी ऑप्टिमाइज़ेशन विकल्प हैं।
मैंने कई वर्डप्रेस वेबसाइटों पर ऑटोऑप्टिमाइज़ का उपयोग किया है क्योंकि यह हमेशा पेज लोडिंग समय में सुधार करता है।
एसेट क्लीनअप
एसेट क्लीनअप एक उच्च-कॉन्फ़िगर करने योग्य अनुकूलन वर्डप्रेस प्लगइन है जो जावास्क्रिप्ट और सीएसएस के मिनिफिकेशन, संयोजन और डिफरिंग का समर्थन करता है। यह आपको HTML को साफ करने देता है और फोंट के प्रबंधन और पृष्ठ लोडिंग समय पर उनके प्रभाव को कम करने के लिए कई उपकरण प्रदान करता है।
एसेट क्लीनअप की एक विशेषता जो सबसे अलग है वह है जावास्क्रिप्ट और सीएसएस मैनेजर। इससे आप यह निर्दिष्ट कर सकते हैं कि आपकी वेबसाइट पर कौन से पृष्ठ Javascript और CSS फ़ाइलें लोड की गई हैं।
WP Super Minify
WP Super Minify केवल आपको Javascript को कंप्रेस करने और CSS को कंप्रेस करने का विकल्प देकर चीजों को थोड़ा अलग तरीके से करता है। चुने जाने पर, WP Super Minify आपकी फ़ाइलों को मिलाएगा, छोटा करेगा और कैश करेगा।
यदि आप एक सरल अनुकूलन समाधान की तलाश में हैं जो काम करता है, तो यह आपके लिए प्लगइन हो सकता है।
WordPress Cache Plugin का उपयोग करके बाहरी Javascript फ़ाइलों को संयोजित करना
सर्वश्रेष्ठ वर्डप्रेस कैशिंग प्लगइन्स में वेबसाइट के प्रदर्शन को बेहतर बनाने में आपकी मदद करने के लिए कई अतिरिक्त अनुकूलन उपकरण शामिल हैं। इसलिए इस बात की बहुत अधिक संभावना है कि आपका मौजूदा वर्डप्रेस कैशिंग समाधान आपको बाहरी जावास्क्रिप्ट और सीएसएस फाइलों को संयोजित करने की अनुमति देता है।
WP रॉकेट में, उदाहरण के लिए, जावास्क्रिप्ट और CSS फाइलों को छोटा और संयोजित करने के विकल्प हैं। जावास्क्रिप्ट फ़ाइलों को रेंडर-ब्लॉकिंग को रोकने के लिए भी स्थगित किया जा सकता है।
मेरी सिफारिश है कि अपने पसंदीदा वर्डप्रेस कैशिंग प्लगइन का उपयोग करके फ़ाइल संयोजन का उपयोग करके पृष्ठ लोडिंग समय का परीक्षण करें और फिर परिणामों की तुलना स्टैंडअलोन जावास्क्रिप्ट ऑप्टिमाइज़ेशन समाधानों जैसे कि ऑटोप्टिमाइज़ और एसेट क्लीनअप से करें।
अंतिम विचार
मुझे आशा है कि आपने बाहरी Javascript फ़ाइलों के संयोजन पर इस नज़र का आनंद लिया होगा। जैसा कि आपने देखा है, यदि आपका वेब होस्ट HTTP / 2 का समर्थन करता है, तो अब जावास्क्रिप्ट फ़ाइलों को एकत्रित करना आवश्यक नहीं है क्योंकि समानांतर में फ़ाइलों को डाउनलोड करना अधिक प्रभावी है।
यदि आपका वेब होस्ट केवल HTTP/1.1 के लिए समर्थन प्रदान करता है, तो आप पृष्ठ लोडिंग समय को कम करने के लिए वर्डप्रेस में बाहरी जावास्क्रिप्ट को जोड़ सकते हैं।
अनुशंसित पढ़ें:वर्डप्रेस में अप्रयुक्त सीएसएस को हटा दें
पढ़ने के लिए धन्यवाद।
केविन