क्या आपने कभी वर्डप्रेस वेबसाइट बनाना समाप्त किया है, इसके बारे में सब कुछ पसंद किया है, और यह महसूस करने के बाद तुरंत इसे नफरत करना शुरू कर दिया है कि इसे लोड करने में हमेशा के लिए लग जाता है? रेंडर-ब्लॉकिंग संसाधनों के उन्मूलन में महारत हासिल करने से इस समस्या का निदान करने में मदद मिलेगी। पर कैसे?
धीमी लोडिंग गति न केवल आपके और आपके आगंतुकों के लिए एक परेशानी है, बल्कि जब SEO की बात आती है तो वे आपको काफी महंगा भी पड़ सकते हैं। 2010 से, Google एल्गोरिदम के पास है रैंकिंग निर्णयों में लोडिंग गति के लिए जिम्मेदारइसलिए धीमे पृष्ठ परिणाम पृष्ठों पर नीचे दिखाई देते हैं।
आप खराब पृष्ठ प्रदर्शन के सामान्य दोषियों से परिचित हो सकते हैं – अत्यधिक सामग्री, असम्पीडित छवि फ़ाइलें, अपर्याप्त होस्टिंग, और कुछ नाम रखने के लिए कैशिंग की कमी। लेकिन खेल में एक और अक्सर अनदेखा अपराधी होता है: रेंडर-अवरुद्ध संसाधन।
रेंडर-ब्लॉकिंग संसाधन क्या हैं?
रेंडर-ब्लॉकिंग संसाधन वेबसाइट फ़ाइलों में कोड के भाग होते हैं, आमतौर पर CSS और JavaScript, जो वेब पेज को तेज़ी से लोड होने से रोकते हैं। ब्राउज़र को संसाधित होने में इन संसाधनों को अपेक्षाकृत लंबा समय लगता है, लेकिन तत्काल उपयोगकर्ता अनुभव के लिए आवश्यक नहीं हो सकता है। रेंडर-ब्लॉकिंग संसाधनों को तब तक हटाया या विलंबित किया जा सकता है जब तक कि ब्राउज़र को उन्हें संसाधित करने की आवश्यकता न हो।
मुझे गलत मत समझिए — CSS और JavaScript बहुत अच्छे हैं। CSS के बिना, वेबसाइटें सादे पाठ की दीवारें होंगी। Ja=ooovaScript के बिना, हम अपनी वेबसाइटों में गतिशील, संवादात्मक, आकर्षक तत्वों को जोड़ने में सक्षम नहीं होंगे। लेकिन, यदि गलत समय पर क्रियान्वित किया जाता है, तो सीएसएस और जावास्क्रिप्ट दोनों ही आपके में सेंध लगा सकते हैं वेबसाइट प्रदर्शन.
इसका कारण यह है: जब कोई वेब ब्राउज़र पहली बार किसी वेब पृष्ठ को लोड करता है, तो वह किसी आगंतुक को स्क्रीन पर प्रदर्शित करने से पहले पृष्ठ के सभी HTML को पार्स करता है। जब ब्राउज़र को एक CSS फ़ाइल, एक JavaScript फ़ाइल, या एक इनलाइन स्क्रिप्ट (यानी, HTML दस्तावेज़ में जावास्क्रिप्ट कोड) का लिंक मिलता है, तो यह HTML पार्सिंग को कोड लाने और निष्पादित करने के लिए रोक देता है, जो सब कुछ धीमा कर देता है।
अगर आपने आपके पृष्ठ के प्रदर्शन को अनुकूलित किया वर्डप्रेस में हैं और अभी भी समस्याओं का सामना कर रहे हैं, रेंडर-ब्लॉकिंग संसाधन अपराधी हो सकते हैं। कभी-कभी यह कोड पहले लोड पर चलने के लिए महत्वपूर्ण होता है, लेकिन अधिकांश समय इसे कतार के अंत तक हटाया या धकेला जा सकता है।
इस पोस्ट में, हम आपको दिखाएंगे कि कैसे इस परेशान करने वाले कोड को अपने वर्डप्रेस वेबसाइट और अपने प्रदर्शन को बढ़ावा दें।
यदि आप एक वीडियो के साथ अनुसरण करना चाहते हैं, तो इसके द्वारा बनाए गए इस पूर्वाभ्यास को देखें WP कास्ट:
वर्डप्रेस में रेंडर-ब्लॉकिंग रिसोर्सेज को कैसे खत्म करें
- रेंडर-ब्लॉकिंग संसाधनों की पहचान करें।
- रेंडर-ब्लॉकिंग संसाधनों को मैन्युअल रूप से या एक प्लगइन के साथ हटा दें।
- साइट स्कैन फिर से चलाएँ।
- बग के लिए अपनी वेबसाइट देखें।
1. रेंडर-ब्लॉकिंग संसाधनों की पहचान करें।
कोई भी परिवर्तन करने से पहले, आपको सबसे पहले रेंडर-ब्लॉकिंग संसाधनों का पता लगाना होगा। ऐसा करने का सबसे अच्छा तरीका एक मुफ्त ऑनलाइन स्पीड टेस्ट है Google का पेजस्पीड इनसाइट्स टूल. अपनी साइट का URL पेस्ट करें और क्लिक करें विश्लेषण.
जब स्कैन पूरा हो जाता है, तो Google आपकी वेबसाइट को 0 (सबसे धीमी) से 100 (सबसे तेज़) तक एक समग्र गति स्कोर प्रदान करता है। 50 से 80 रेंज में एक स्कोर औसत है, इसलिए आप इस रेंज के ऊपरी हिस्से में या इसके ऊपर उतरना चाहेंगे।
आपके पृष्ठ को धीमा करने वाली रेंडर-ब्लॉकिंग फ़ाइलों की पहचान करने के लिए, नीचे स्क्रॉल करें अवसरफिर खोलें रेंडर-ब्लॉकिंग संसाधनों को हटा दें अकॉर्डियन।
-3.png?width=1500&name=eliminate%20render-blocking%20resources%20wordpress%20(update)-3.png)
आप अपने पृष्ठ के “पहले पेंट” को धीमा करने वाली फ़ाइलों की एक सूची देखेंगे – ये फ़ाइलें प्रारंभिक पृष्ठ लोड पर ब्राउज़र विंडो में दिखाई देने वाली सभी सामग्री के लोडिंग समय को प्रभावित करती हैं। इसे “तह के ऊपर” सामग्री भी कहा जाता है।
एक्सटेंशन .css और .js के साथ समाप्त होने वाली किसी भी फाइल पर ध्यान दें, क्योंकि ये वही हैं जिन पर आप ध्यान केंद्रित करना चाहेंगे।
2. मैन्युअल रूप से या एक प्लगइन के साथ रेंडर-ब्लॉकिंग संसाधनों को हटा दें।
अब जब आपने समस्या की पहचान कर ली है, तो इसे वर्डप्रेस में ठीक करने के दो तरीके हैं: मैन्युअल रूप से, या एक प्लगइन के साथ। हम पहले प्लगइन समाधान को कवर करेंगे।
कई वर्डप्रेस प्लगइन्स वर्डप्रेस वेबसाइटों पर रेंडर-ब्लॉकिंग संसाधनों के प्रभाव को कम कर सकते हैं। मैं दो लोकप्रिय समाधानों को कवर करूँगा, Autoptimize और W3 Total Cache।
Autoptimize प्लगइन के साथ रेंडर-ब्लॉकिंग रिसोर्सेज को कैसे खत्म करें
स्वचालित करें एक मुफ्त प्लगइन है जो तेजी से पृष्ठ देने के लिए आपकी वेबसाइट फाइलों को संशोधित करता है। Autoptimize फ़ाइलों को एकत्र करके, कोड को छोटा करके (यानी, अनावश्यक या अनावश्यक वर्णों को हटाकर फ़ाइल का आकार कम करके), और रेंडर-ब्लॉकिंग संसाधनों को लोड करने में देरी करके काम करता है।
चूंकि आप अपनी साइट के बैकएंड को संशोधित कर रहे हैं, इसलिए इस प्लगइन या किसी समान प्लगइन के साथ सावधानी बरतना याद रखें। AutoOptimize के साथ रेंडर-ब्लॉकिंग संसाधनों को खत्म करने के लिए:
1. स्थापित करें और सक्रिय करें Autoptimize प्लगइन।
2. अपने वर्डप्रेस डैशबोर्ड से, चुनें, सेटिंग्स> ऑटोप्टिमाइज़ करें.
3. अंतर्गत जावास्क्रिप्ट विकल्पके बगल में स्थित बॉक्स को चेक करें जावास्क्रिप्ट कोड का अनुकूलन करें?.
4. अगर बगल में बॉक्स सकल जे एस-फाइलें? चेक किया गया है, इसे अनचेक करें।
-Jan-11-2021-05-00-17-29-PM.png?width=1500&name=eliminate%20render-blocking%20resources%20wordpress%20(update)-Jan-11-2021-05-00-17-29-PM.png)
5. अंतर्गत सीएसएस विकल्पके बगल में स्थित बॉक्स को चेक करें सीएसएस कोड का अनुकूलन करें?.
6. अगर बगल में बॉक्स समेकित सीएसएस-फाइलें? चेक किया गया है, इसे अनचेक करें।
-Jan-11-2021-05-00-17-59-PM.png?width=1500&name=eliminate%20render-blocking%20resources%20wordpress%20(update)-Jan-11-2021-05-00-17-59-PM.png)
7. पृष्ठ के नीचे, क्लिक करें परिवर्तनों को सुरक्षित करें और खाली कैश.
8. PageSpeed Insights के साथ अपनी वेबसाइट को स्कैन करें और सुधार की जाँच करें।
9. अगर PageSpeed Insights अभी भी रिपोर्ट करता है कि JavaScript फ़ाइलें रेंडर-ब्लॉक कर रही हैं, तो वापस लौटें सेटिंग्स> ऑटोप्टिमाइज़ करें और बगल के बक्सों की जाँच करें सकल जे एस-फाइलें? और समेकित सीएसएस-फाइलें?. तब दबायें परिवर्तन सहेजें और कैश खाली करें और दोबारा स्कैन करें।
W3 टोटल कैश प्लगिन के साथ रेंडर-ब्लॉकिंग रिसोर्सेज को कैसे खत्म करें
W3 कुल कैश एक व्यापक रूप से इस्तेमाल किया जाने वाला कैशिंग प्लगइन है जो लैगी कोड को संबोधित करने में मदद करता है। W3 Total Cache के साथ रेंडर-ब्लॉकिंग JavaScript को खत्म करने के लिए:
1. W3 कुल कैश प्लगइन को स्थापित और सक्रिय करें।
2. एक नया प्रदर्शन विकल्प आपके वर्डप्रेस डैशबोर्ड मेनू में जोड़ा जाएगा। चुनना प्रदर्शन> सामान्य सेटिंग्स।
3. में छोटा करना अनुभाग, के बगल में स्थित बॉक्स को चेक करें छोटा करनाफिर सेट करें न्यूनतम मोड को नियमावली.
-Jan-11-2021-05-00-17-89-PM.png?width=1500&name=eliminate%20render-blocking%20resources%20wordpress%20(update)-Jan-11-2021-05-00-17-89-PM.png)
4. क्लिक सभी सेटिंग्स को सेव करें के तल पर छोटा करना खंड।
5. डैशबोर्ड मेनू में, चुनें प्रदर्शन> छोटा करें.
6. में जे एस बगल में खंड जेएस न्यूनतम सेटिंग्ससुनिश्चित करें सक्षम करना बॉक्स चेक किया गया है। फिर, नीचे क्षेत्रों में संचालनपहले खोलो एम्बेड प्रकार ड्रॉपडाउन और चुनें “डिफर” का उपयोग करके गैर-अवरुद्ध.
-Jan-11-2021-05-00-17-70-PM.png?width=1500&name=eliminate%20render-blocking%20resources%20wordpress%20(update)-Jan-11-2021-05-00-17-70-PM.png)
7. अंतर्गत जेएस फ़ाइल प्रबंधनसे अपनी सक्रिय थीम चुनें थीम ड्रॉप डाउन।
8. अपने पिछले स्कैन से अपने PageSpeed Insights परिणामों को वापस देखें। नीचे प्रत्येक आइटम के लिए रेंडर-ब्लॉकिंग संसाधनों को हटा दें .js में समाप्त, क्लिक करें एक स्क्रिप्ट जोड़ें. फिर, PageSpeed Insights से JavaScript संसाधन का पूरा URL कॉपी करें और उसमें पेस्ट करें फ़ाइल यूआरआई खेत।
-4.png?width=1500&name=eliminate%20render-blocking%20resources%20wordpress%20(update)-4.png)
9. PageSpeed Insights द्वारा रिपोर्ट किए गए सभी रेंडर-ब्लॉकिंग JavaScript संसाधनों में पेस्ट करने के बाद, क्लिक करें सेटिंग्स सहेजें और कैश मिटाएं के तल पर जे एस खंड।
10. में सीएसएस बगल में खंड सीएसएस न्यूनतम सेटिंग्सके बगल में स्थित बॉक्स को चेक करें सीएसएस न्यूनतम सेटिंग्स और सुनिश्चित करें न्यूनतम विधि इस पर लगा है कम्बाइन और मिनिमाइज करें.
-Jan-11-2021-05-00-17-47-PM.png?width=1500&name=eliminate%20render-blocking%20resources%20wordpress%20(update)-Jan-11-2021-05-00-17-47-PM.png)
1 1। अंतर्गत सीएसएस फ़ाइल प्रबंधनसे अपनी सक्रिय थीम चुनें थीम ड्रॉप डाउन।
12. नीचे प्रत्येक आइटम के लिए रेंडर-ब्लॉकिंग संसाधनों को हटा दें आपके PageSpeed Insights स्कैन परिणामों में .css पर समाप्त होने पर, क्लिक करें स्टाइल शीट जोड़ें. फिर, PageSpeed Insights से CSS संसाधन का पूरा URL कॉपी करें और उसमें पेस्ट करें फ़ाइल यूआरआई खेत।
-2.png?width=1500&name=eliminate%20render-blocking%20resources%20wordpress%20(update)-2.png)
13. PageSpeed Insights द्वारा रिपोर्ट किए गए सभी रेंडर-ब्लॉकिंग CSS संसाधनों में पेस्ट करने के बाद, क्लिक करें सेटिंग्स सहेजें और कैश मिटाएं के तल पर सीएसएस खंड।
14. PageSpeed Insights के साथ अपनी वेबसाइट को स्कैन करें और सुधार की जाँच करें।
रेंडर-ब्लॉकिंग जावास्क्रिप्ट को मैन्युअल रूप से कैसे खत्म करें
प्लगइन्स आपके लिए बैकएंड का काम संभाल सकते हैं। दूसरी ओर, प्लगइन्स स्वयं आपके वेब सर्वर में जोड़ी गई अधिक फ़ाइलें हैं। यदि आप इन अतिरिक्त फ़ाइलों को सीमित करना चाहते हैं, या यदि आप केवल प्रोग्रामिंग को स्वयं संभालना चाहते हैं, तो आप रेंडर-ब्लॉकिंग जावास्क्रिप्ट को मैन्युअल रूप से संबोधित कर सकते हैं।
ऐसा करने के लिए, का पता लगाएं <स्क्रिप्ट> आपके PageSpeed Insights स्कैन में पहचाने गए संसाधनों के लिए आपकी वेबसाइट फ़ाइलों में टैग। वे कुछ इस तरह दिखेंगे:
<script src="https://blog.hubspot.com/marketing/resource.js">
<स्क्रिप्ट> टैग ब्राउज़र को उसके द्वारा पहचानी गई स्क्रिप्ट को लोड और निष्पादित करने के लिए कहते हैं स्रोत (स्रोत) विशेषता। इस प्रक्रिया के साथ समस्या यह है कि यह लोडिंग और निष्पादन वेब पेज के ब्राउज़र की पार्सिंग में देरी करता है, जो समग्र लोड समय को प्रभावित करता है:
-1.png?width=1500&name=eliminate%20render-blocking%20resources%20wordpress%20(update)-1.png)
इसे हल करने के लिए, आप या तो जोड़ सकते हैं async (अतुल्यकालिक) या आस्थगित करें रेंडर-ब्लॉकिंग रिसोर्स के लिए स्क्रिप्ट टैग की विशेषता। async और आस्थगित करें ऐसे रखा जाता है:
<script src="https://blog.hubspot.com/marketing/resource.js" async>
<script src="https://blog.hubspot.com/marketing/resource.js" defer>
जबकि लोड समय पर उनका समान प्रभाव पड़ता है, ये विशेषताएँ ब्राउज़र को अलग-अलग काम करने के लिए कहती हैं।
async विशेषता शेष पृष्ठ को पार्स करते समय जावास्क्रिप्ट संसाधन को लोड करने के लिए ब्राउज़र को संकेत देती है और लोड होने के तुरंत बाद इस स्क्रिप्ट को निष्पादित करती है। स्क्रिप्ट निष्पादित करने से HTML पार्सिंग रुक जाती है:
.png?width=1500&name=eliminate%20render-blocking%20resources%20wordpress%20(update).png)
स्क्रिप्ट के साथ आस्थगित करें पृष्ठ को पार्स किए जाने के दौरान एट्रिब्यूट भी लोड किए जाते हैं, लेकिन इन स्क्रिप्ट को पहले रेंडर के बाद तक या अधिक आवश्यक भागों के लोड होने तक लोड होने में देरी होती है:
-Jan-11-2021-05-00-17-20-PM.png?width=1500&name=eliminate%20render-blocking%20resources%20wordpress%20(update)-Jan-11-2021-05-00-17-20-PM.png)
आस्थगित करें और async विशेषताओं का एक ही संसाधन पर एक साथ उपयोग नहीं किया जाना चाहिए, लेकिन एक विशेष संसाधन के लिए दूसरे की तुलना में बेहतर अनुकूल हो सकता है। आम तौर पर, यदि कोई गैर-आवश्यक स्क्रिप्ट उसके पहले चलने के लिए किसी स्क्रिप्ट पर निर्भर करती है, तो इसका उपयोग करें आस्थगित करें. आस्थगित करें विशेषता यह सुनिश्चित करती है कि स्क्रिप्ट पूर्ववर्ती आवश्यक स्क्रिप्ट के बाद चलेगी। अन्यथा प्रयोग करें async.
3. साइट स्कैन फिर से चलाएँ।
अपने परिवर्तन करने के बाद, PageSpeed Insights के माध्यम से अपनी वेबसाइट का अंतिम स्कैन करें और देखें कि आपके परिवर्तनों का आपके स्कोर पर क्या प्रभाव पड़ा है।
उम्मीद है, ध्यान देने योग्य सुधार होगा, लेकिन यदि नहीं तो चिंता न करें। कई कारक पृष्ठ के प्रदर्शन को बाधित कर सकते हैं, और खराब प्रदर्शन के स्रोत का पता लगाने के लिए आपको कुछ और खुदाई करनी पड़ सकती है।
4. बग के लिए अपनी वेबसाइट देखें।
यह सुनिश्चित करने के लिए कि आपकी साइट कार्य करती है, पुनःस्कैन के अतिरिक्त, अपने पृष्ठों की जांच करें। क्या पृष्ठ ठीक से लोड होता है? क्या सभी तत्व दिखाई दे रहे हैं? अगर कुछ टूटा हुआ है या ठीक से लोड होने में विफल रहता है, तो अपने परिवर्तन पूर्ववत करें और समस्या का निवारण करें।
यदि आप एक ऐसे बिंदु पर पहुंच गए हैं जहां आपने न्यूनतम गति लाभ के साथ बार-बार विभिन्न उपायों का प्रयास किया है, तो इस पर विचार करना सबसे अच्छा हो सकता है अपने पृष्ठों की गति बढ़ाने के अन्य तरीकेआपकी साइट को तोड़ने के जोखिम के बजाय।
प्रदर्शन के लिए अपनी वर्डप्रेस साइट का अनुकूलन
आपकी वेबसाइट पर आपके उपयोगकर्ताओं के अनुभव में कई कारकों का योगदान होता है, लेकिन उनमें से कुछ लोड समय से अधिक महत्वपूर्ण हैं। जब भी आप अपनी वर्डप्रेस साइट पर सामग्री या उपस्थिति में बड़े बदलाव करते हैं, तो आपको हमेशा इस बात पर विचार करना चाहिए कि ऐसे परिवर्तन प्रदर्शन को कैसे प्रभावित करते हैं।
अब जबकि आपने रेंडर-ब्लॉकिंग संसाधनों को समाप्त कर दिया है, तो आपको प्रदर्शन को धीमा करने के लिए जानी जाने वाली अन्य विशेषताओं का विश्लेषण करके अपनी वेबसाइट की गति को अनुकूलित करना जारी रखना चाहिए। अपने साइट रखरखाव शेड्यूल में नियमित गति परीक्षण शामिल करने का प्रयास करें — किसी भी संभावित समस्या से आगे रहना आपकी सफलता के लिए महत्वपूर्ण होगा।
