वर्डप्रेस में रेंडर-ब्लॉकिंग जावास्क्रिप्ट और सीएसएस: इसे ठीक करने के लिए 5 प्लगइन्स

यह बहुत पहले की बात नहीं है जब Google ने घोषणा की थी कि लोड होने में तीन सेकंड से अधिक समय लेने वाली वेबसाइट SEO के अनुकूल नहीं हैं।

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

एक वर्डप्रेस वेबसाइट चलाने का मतलब है कि एक महत्वपूर्ण संख्या में स्क्रिप्ट जो आपकी साइट को सुलभ बनाने के लिए एक ही समय में चलती हैं।

हालांकि, लोड करने के लिए ये सभी आइटम हमेशा आवश्यक नहीं होते हैं। यदि आपने कभी अपनी वेबसाइट के प्रदर्शन की जाँच की है गूगल पृष्ठ गति इनसाइट्स, आपने संभवतः रेंडर-ब्लॉकिंग JavaScript और CSS विकल्प देखा होगा जो इसकी गति को प्रभावित करता है।

आज हम इन बाहरी फ़ाइलों के बारे में बात करने जा रहे हैं और आपको उन तरीकों के बारे में बता रहे हैं जिनसे आप अपनी साइट को बेहतर बनाने के लिए इन्हें हटा सकते हैं।

 

रेंडर-ब्लॉकिंग जावास्क्रिप्ट और CSS क्या है?

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

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

जब कोई वेबसाइट विज़िटर आपकी वेबसाइट खोलता है, तो इंटरनेट ब्राउज़र HTML से पहले आवश्यक JavaScript और CSS फ़ाइलों को पहले लोड करता है।

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

यहां ट्रिक यह है कि आप कुछ स्क्रिप्ट्स को बिना किसी समस्या के लोड करना स्थगित कर सकते हैं, जो विज़िटर आपके पृष्ठ को खोलने पर देखते हैं।

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

दूसरे शब्दों में, उपयोगकर्ता द्वारा पृष्ठ को नीचे स्क्रॉल करने से पहले ब्राउज़र केवल उस अनुभाग के लिए आवश्यक फ़ाइलें लोड करते हैं। वेबपेजों के इस क्षेत्र को ATF कहा जाता है जो फोल्ड के ऊपर होता है। अन्य भाग जिन्हें देखने में सक्षम होने के लिए उपयोगकर्ताओं को नीचे स्क्रॉल करने की आवश्यकता होती है, वह गैर-एटीएफ अनुभाग है।

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

 

रेंडर-ब्लॉकिंग JavaScript और CSS खोजें

इस समस्या के बारे में पता लगाने का सबसे आसान तरीका Google PageSpeed ​​Insights का उपयोग करके गति परीक्षण करना है. एक बार जब आप पृष्ठ पर जाते हैं, तो आपको केवल आवश्यक फ़ील्ड में अपना URL पता दर्ज करना होता है और फिर 'विश्लेषण' बटन पर क्लिक करना होता है।

यदि आपके पास यह समस्या पृष्ठ पर चल रही है, तो आपको एक सुझाव दिखाई देगा जो आपको ऊपरी-तह सामग्री में रेंडर-अवरुद्ध जावास्क्रिप्ट और सीएसएस को हटाने के लिए कहता है।

सबसे अच्छा यही होगा कि आप उसे न भूलें वेबसाइटों का स्कोर कहीं 70 से 90 के बीच, और यहां तक ​​कि शीर्ष प्रदर्शन करने वाले भी शायद ही कभी 100 के पास एक संख्या प्राप्त करते हैं। इसलिए आपको कभी भी अपनी साइट को 100 तक पहुंचने के लिए मजबूर नहीं करना चाहिए। उपयोगकर्ता अनुभव को प्रभावित किए बिना उच्चतम स्कोर प्राप्त करने के लिए जितना हो सके उतना करें। नकारात्मक रूप से।

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

 

रेंडर-ब्लॉकिंग JavaScript और CSS को ठीक करें

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

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

रेंडर-ब्लॉकिंग CSS को खत्म करना अधिक चुनौतीपूर्ण है क्योंकि आप ATF सामग्री को लोड करने के लिए आवश्यक कोड में देरी कर सकते हैं। प्रक्रिया थोड़ी जटिल है और इसके लिए वेब विकास की अच्छी समझ की आवश्यकता है।

फिर भी, हम उन औसत उपयोगकर्ताओं को संबोधित कर रहे हैं जो अपनी वेबसाइट स्वयं चलाते हैं।

हम सभी जानते हैं कि वर्डप्रेस एक मॉड्यूलर प्रणाली है जो औसत उपयोगकर्ताओं को कोड की एक भी पंक्ति लिखे बिना सब कुछ बदलने की अनुमति देती है। इस समस्या को ठीक करना भी समान है, और आप उपयुक्त प्लगइन स्थापित करके समस्या का त्वरित समाधान कर सकते हैं।

 

रेंडर-ब्लॉकिंग जावास्क्रिप्ट और सीएसएस को ठीक करने के लिए सर्वश्रेष्ठ वर्डप्रेस प्लगइन्स

अगले अनुच्छेदों में, हम पाँच का परिचय देंगे शीर्ष-प्रदर्शन वाले वर्डप्रेस प्लगइन्स जो इस समस्या को सबसे गहराई से हल करने में आपकी मदद करते हैं।

चेतावनी: निम्न में से किसी भी उपकरण का उपयोग करने से पहले, डेटा की किसी भी संभावित हानि को रोकने के लिए अपनी वेबसाइट का बैकअप लेना सुनिश्चित करें।

 

Autoptimize

RSI Autoptimize प्लगइन स्पष्ट रूप से Google पेजस्पीड इनसाइट्स जैसे वेबसाइट विश्लेषण टूल द्वारा सुझाई गई समस्याओं का समाधान करने के लिए बनाया गया है। यह वेबसाइट के प्रदर्शन के अन्य पहलुओं पर ज्यादा ध्यान दिए बिना जावास्क्रिप्ट और सीएसएस फाइलों की डिलीवरी में सुधार करता है।

यदि आप बुनियादी अनुकूलन सुविधाओं की तलाश कर रहे हैं, तो यह प्लगइन आपको वह देगा जिसकी आपको आवश्यकता है। इस टूल का एक अच्छा हिस्सा यह है कि यह आपकी वेबसाइट की छवियों को अनुकूलित वेबपी प्रारूप में परिवर्तित करता है।

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

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

 

WP Rocket

WP Rocket वर्डप्रेस ऑप्टिमाइज़ेशन टूल के बीच एक जाना-पहचाना नाम है जो आपको जावास्क्रिप्ट और सीएसएस संशोधन, आलसी लोडिंग सेटिंग्स जैसे विभिन्न पहलुओं में सहायता करता है। WP रॉकेट की सेटअप प्रक्रिया बहुत सरल है, लेकिन आपको यह समझने में मुश्किल हो सकती है कि इंटरफ़ेस पर चीजें कैसे की जाती हैं।

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

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

मुख्य प्लगइन की कीमत $49 प्रति वर्ष है जो एक वर्ष के समर्थन के साथ आता है। इसके अलावा, आप कई पा सकते हैं मुफ्त अतिरिक्त वर्डप्रेस पर कोर प्लगइन के लिए भी।

 

रैबिटलोडर

रैबिटलोडर एक अत्याधुनिक वर्डप्रेस प्रदर्शन अनुकूलन प्लगइन है जिसे वेबसाइट को तेज़, सुचारू और अधिक कुशलता से चलाने के लिए डिज़ाइन किया गया है।

व्यापक रूप से प्रशंसित WP रॉकेट के समान, RabbitLoader न केवल आपकी साइट के प्रदर्शन को नई ऊंचाइयों पर ले जाता है, बल्कि कुछ नवीन सुविधाएँ भी पेश करता है जो इसे गेम में अन्य खिलाड़ियों से अलग करती हैं।

कैशिंग जादू: RabbitLoader एक गतिशील कैशिंग प्रणाली की पेशकश करके इसे एक पायदान ऊपर ले जाता है जो आपकी साइट पर परिवर्तनों के लिए वास्तविक समय में अनुकूलित होता है, यह सुनिश्चित करता है कि आपके विज़िटर हमेशा गति से समझौता किए बिना नवीनतम सामग्री देखते हैं।

छवि अनुकूलन: छवियाँ किसी वेबसाइट को काफी धीमा कर सकती हैं, लेकिन RabbitLoader की छवि अनुकूलन सुविधा गेम-चेंजर है। यह गुणवत्ता से समझौता किए बिना छवियों को स्वचालित रूप से संपीड़ित और इष्टतम आकार में आकार देता है, जिससे यह सुनिश्चित होता है कि आपकी साइट दृश्य अपील का त्याग किए बिना जल्दी से लोड हो जाती है।

लोड करते हुए आलस आना: WP रॉकेट और RabbitLoader दोनों छवियों और iframes के लिए आलसी लोडिंग की पेशकश करते हैं, लेकिन RabbitLoader विलंबित जावास्क्रिप्ट लोडिंग की पेशकश करके आगे बढ़ता है।

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

 

W3 कुल कैश

W3 कुल कैश एक मजबूत प्रदर्शन बढ़ाने वाला है जो न केवल कैशिंग समस्याओं को संभालता है बल्कि स्क्रिप्ट और स्टाइल शीट के कारण होने वाली समस्याओं को भी संभालता है।

आप पहले प्लगइन की सेटिंग्स से न्यूनतम विकल्प को सक्षम करके और इसे मैन्युअल मोड पर सेट करके रेंडर-ब्लॉकिंग जावास्क्रिप्ट और सीएसएस को आसानी से हटा सकते हैं।

इसके बाद, आपको 'रेंडर-ब्लॉकिंग रिसोर्सेस' टैब पर क्लिक करना चाहिए और स्क्रिप्ट और स्टाइल शीट को ब्लॉक करने के लिए आवश्यक फाइलों को पूरा लिंक पता कॉपी करना चाहिए। अब आप इन लिंक्स का उपयोग कर सकते हैं और उन्हें 'जेएस सेक्शन' में दर्ज कर सकते हैं प्रदर्शन> छोटा करें टैब.

W3 Total Cache के एक मिलियन से अधिक सक्रिय इंस्टॉलेशन हैं, और आप इसे अपनी साइट पर WordPress.org वेबसाइट से मुफ्त में डाउनलोड कर सकते हैं।

 

स्पीड बूस्टर पैक

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

यदि आप उत्पादों और सेवाओं को ऑनलाइन बेचते हैं, तो WooCommerce- विशिष्ट अनुकूलन स्पीड बूस्टर पैक की विशेषताएं इंटरनेट पर आपके स्टोर की दृश्यता बढ़ाने में आपकी बहुत मदद करेंगी।

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

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

स्पीड बूस्टर पैक एक मुफ्त समाधान है जो WordPress.org वेबसाइट पर उपलब्ध है।

 

जेसीएच ऑप्टिमाइज़

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

स्प्राइट जेनरेटर इस प्लगइन में उपलब्ध एक और रोमांचक सुविधा है जो पृष्ठभूमि छवियों को लोड करने के लिए HTTP अनुरोधों की संख्या को कम करती है।

JCH Optimize का उपयोग करके, यदि आप प्रीमियम प्लान में अपग्रेड करते हैं, तो आप रेंडर-ब्लॉकिंग JavaScript और CSS को हटा सकते हैं। आपको केवल 'स्वचालित सेटिंग' अनुभाग से 'प्रीमियम' या 'इष्टतम' विकल्पों को सक्रिय करने की आवश्यकता है। सीएसएस डिलीवरी सेटिंग्स इसी तरह केवल प्रो संस्करण में उपलब्ध हैं।

आप इस प्लगइन को WordPress.org से मुफ्त में इंस्टॉल कर सकते हैं, लेकिन इसकी पूरी क्षमता को अनलॉक करने के लिए आपको एक प्रीमियम प्लान खरीदना होगा। मूल्य निर्धारण योजनाएं छह महीने के लिए $29 से शुरू होती हैं और आजीवन पहुंच के लिए $99 तक पहुंचती हैं।

 

सारांश

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

रेंडर-ब्लॉकिंग JavaScript और CSS आइटम उन सबसे आम सुझावों में से एक है जो आप Google के शक्तिशाली टूल का उपयोग करते समय देख सकते हैं। आप इस लेख में पेश किए गए पांच प्लगइन्स में से एक को स्थापित करके इस समस्या को आसानी से ठीक कर सकते हैं अपने पृष्ठों की लोडिंग गति को तेज़ करें बड़े पैमाने पर.

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