How to Eliminate render blocking resources wordpress – Hindi

Eliminate Render Blocking Resources:

जब आपकी वेबसाइट लोड होना स्टार्ट होती है, चाहे आप लैपटॉप से देखे या स्मार्ट फ़ोन से, आपकी Device सिर्फ आपकी वेबसाइट का टॉप पार्ट show कर सकती है लेकिन आपकी वेबसाइट की CSS और JS फाइल्स के डाउनलोड होने का wait करती रहती है  और जब सारी फाइल्स डाउनलोड हो जाती है तभी आपकी वेबसाइट का दिखाई देना या Render होना शुरू होता है | अगर हम सीधी भाषा में कहे तो ये CSS और JS की Scripts आपकी वेबसाइट के Render को ब्लाक करती है, जिससे आपकी वेबसाइट की स्पीड काफी हद तक निचे गिर जाती है इसलिए इस आर्टिकल में हम Eliminate Render Blocking Resources के सन्दर्भ में बात करने वाले है |

What are render blocking resources wordpress?

जब कोई CSS या JS (Java Script) फाइल आपकी वेबसाइट में लोड होने में टाइम लेने लगती है और आपकी वेबसाइट को Visible होने में ज्यादा समय लगने लगता है तो गूगल आपकी वेबसाइट का Pagespeed Insights Score कम दिखाने लगता है | इस एरर को हम Render Blocking Resources कहते है | Google चाहता है कि आपकी वेबसाइट इन Scripts या फाइल्स का wait ना करे जो आपकी वेबसाइट के टॉप पार्ट के दिखाई देने में जरुरी नहीं है ताकि वे जल्दी से लोड हो जाये |

इसलिए जब आप अपनी वेबसाइट को Pagespeed Insights टूल पर टेस्ट करते है तो आपको Eliminate Render Blocking Resources नाम की Error दिखाई देती है | आज इस आर्टिकल में हम जानेंगे कि कैसे आप इस Error को अपनी वेबसाइट में फ्री में Solve कर सकते है –

Identify your render blocking resources:

जब भी आप अपनी वेबसाइट को Pagespeed Insights टूल पर टेस्ट करते है तो आपको इस तरह का एक Eliminate Render Blocking Resources एरर दिखाई देता है |

Eliminate Render Blocking Resources

ये एरर आपको अधिकतर websites के साथ दिखाई दे सकता है | अगर आपकी WordPress Website पहले कभी Optimize नहीं की गयी है तो हो सकता है आपकी Testing Report में सबसे पहला Issue ये ही हो क्यूंकि ये ही वो फाइल्स होती है जो आपकी वेबसाइट को झटपट लोड होने से रोकती है | आपकी वेबसाइट इन फाइल्स का wait करती रह जाती है और लोड नहीं होती है |

Removal types of render blocking resources:

इस एरर या प्रॉब्लम को दूर करने के दो पार्ट है –

1. पहल, ये पता करना कि कौन-कौन सी फाइल्स और Scripts वेबसाइट के Render को ब्लाक कर रही है |

2. दूसरा ये कि इन फाइल्स और Scripts को Render ब्लाक करने से कैसे रोका जाये |

अब हम इन दोनों स्टेप्स को बारीकी से देखते है –

1. अगर आप ये पता करना चाहते है कि कौन-कौन फाइल्स या Scripts आपकी वेबसाइट के Render को ब्लाक कर रही है तो जब आप अपनी वेबसाइट को Pagespeed Insights टूल पर टेस्ट करते है तो यहाँ पर आपको Google इस एरर Eliminate Render Blocking Resources के निचे ही उन सभी Scripts की List अपने आप आपको दिखा देगा जो आपकी वेबसाइट के Render को ब्लाक कर रही है |

2. अब आपको इन फाइल्स को रोकना है ताकि ये आपकी वेबसाइट के Rendering में कोई रूकावट ना डाल सके | इसके लिए आपको अपनी वेबसाइट के WordPress Panel में एक Plugin की आवश्यकता पड़ेगी जिसका नाम है – Hummingbird.

वैसे तो Hummingbird इकलौता Plugin नहीं है जो इस प्रॉब्लम को दूर कर सकता है लेकिन सारे Plugins को एक साथ कवर कर पाना मुश्किल है लेकिन Wp-Rocket Plugin भी इस एरर को दूर करने में आपकी सहायता कर सकता है लेकिन अभी हम Hummingbird पर ही चर्चा करेंगे क्यूंकि इसे Use करना भी काफी सिंपल है और फ्री भी है, जिससे आप अपनी Eliminate Render Blocking Resources की प्रॉब्लम को दूर कर सकते है |

Warning: ये प्रोसेस आपके लिए थोड़ी Risky हो सकती है क्यूंकि आप अपनी वेबसाइट की Scripts Files के साथ छेड़-छाड़ करने जा रहे है | वैसे तो ये प्रोसेस काफी सेफ है, काफी सारी websites में इसे इस्तेमाल और टेस्ट किया जा चूका है और अगर इसे Use करने के बाद आपकी वेबसाइट में कोई गड़बड़ होती भी है तो उसे कैसे ठीक करना है, ये भी मैं आपको इस आर्टिकल के End-Part में बताऊंगा |

लेकिन इस प्रोसेस को करने से पहले आपको अपनी वेबसाइट का एक Backup जरुर ले लेना है , जिससे अगर आपकी वेबसाइट का, आपकी Theme या किसी अन्य Plugin के कारण, इसे Use करने पर look खराब होता है तो आप दोबारा से अपनी वेबसाइट को Restore कर सके |

How to eliminate render-blocking resources?

1. सबसे पहले आपको अपने WordPress-Panel में Login करना होगा और Plugins के सेक्शन में Add New पर क्लिक करना होगा |

2. यहाँ पर उपर Search bar में सर्च करे- Hummingbird और WPMU DEV द्वारा बनाये गए इस Plugin को आप इंस्टाल करके Activate कर लीजिये|

Eliminate Render Blocking Resources
Hummingbird plugin

3. इसके बाद Hummingbird की Settings में जाने के लिए आप Left Side में Hummingbird पर क्लिक करे|

4. इसके बाद आपके सामने इस प्लगइन का डैशबोर्ड खुल जायेगा | यहाँ पर आपको दो आप्शन मिलेंगे, या तो आप Manually जा-जाकर सारे Options को सेट करे या आप Continue Wizard की मदद से सब कुछ एक ही Window में सेट कर दो | इसलिए मैं आपको Continue Wizard पेर क्लिक करने की सलाह दूंगा |

इसमें आप निचे Get Started पर क्लिक करेंगे | अब आप Asset Optimization को Enable रखकर इसे Continue करेंगे | अब ये आपकी सभी फाइल्स को Analyzing करेगा और आपको अगले स्टेप पर Move कर देगा |

5. Uptime एक Pro स्टेप है इसलिए हम सीधे Page Caching पर आ जायेंगे | यहाँ पर आप इसे Enable करके इसके सभी Options को ON करके निचे Continue करेंगे |

6. अब आप इसके Advanced Tools के सेक्शन में आ जायेंगे, यहाँ पर भी आप इसके दोनों Options को ON करके इसे Continue करेंगे | अब आपने इसके Setup Wizard को कम्पलीट कर लिया है इसलिए आप Go to Dashboard पर क्लिक करेंगे |

अब आप इस प्लगइन के डैशबोर्ड में आ जायेंगे जहाँ से आप अपने एरर Eliminate Render Blocking Resources को खत्म कर सकते है | वैसे तो आपने इसके Setup Wizard का प्रयोग करके इसकी अधिकतर Settings को Activate कर दिया है लेकिन फिर भी कुछ Settings और शेष है जो शायद आपके और आपकी वेबसाइट के लिए फायदेमंद शाबित हो सकती है |

Extra Benefits of Hummingbird:

इस प्लगइन के अन्दर एक और Main सेटिंग मौजूद है जिसको इस्तेमाल करके आप अपनी वेबसाइट की Eliminate Render Blocking Resources की समस्या को दूर कर सकते है | ये सेटिंग स्पेशल इसी Error को Fix करने के लिए बनाया गया है | आईये अब हम उस सेटिंग को भी जान लेते है और साथ ही उसे इस्तेमाल करने की प्रक्रिया को भी देखते है –

A. सबसे पहले आपको इस प्लगइन के Left Side में बने आप्शन Asset Optimization पर क्लिक करना है | क्लिक करने के बाद आपके सामने एक नई Window ओपन ही जाएगी |

B. अब आपको इसमें Lest Side में तीन आप्शन दिखाई देंगे आपको इसमें पहले आप्शन Assets पर ही रहना है | इसमें आपको दायीं ओर Recheck Files पर क्लिक करना है जिससे ये प्लगइन आपकी सभी फाइल्स को दोबारा से Analysis करेगा|

Hummingbird plugin for caching website
Asset Optimization

C. फाइल्स Analysis करने के बाद आपके सामने इसमें दो Options आयेंगे Automatic, Manual. इसमें आपको Automatic में Speedy को सेलेक्ट करना है और थोड़ा और निचे स्क्रोल करने पर आपको तीन और बटन दिखाई देंगे – CSS, Java Script और Fonts. आपको इन तीनो को Enable करके इसे save कर देना है|

D. अब आपको इसके सबसे जरुरी पार्ट को Enable करना जिससे आपका एरर Eliminate Render Blocking Resources का अंत होगा | अब आपको इसमें Manual पार्ट में आना है और दोबारा से Recheck files पर क्लिक करना है |

E. अब निचे स्क्रॉल करने पर आपको बहुत सारी फाइल्स दिखाई देंगी | ये ही वे फाइल्स है जो आपकी वेबसाइट के Render को ब्लाक करती है | हर एक फाइल के सामने आपको कुछ 5-6 Options दिखाई देंगे जिसमे से हमे Move to footer आप्शन को Use करना है |

 What is Eliminate Render Blocking Resources

F. जिस भी फाइल के सामने आप इस Move to footer बटन पर क्लिक करते है तो ये प्लगइन उस फाइल को उस पेज के Footer Section में डाल देता है जिससे जब आपका पेज डाउनलोड होना शुरू होता है तो टॉप की फाइल्स डाउनलोड हो जाती है और आपका पेज दिखाई देना शुरू हो जाता है और ये फाइल्स फूटर में सबसे लास्ट में डाउनलोड होती है इसलिए ये Render को ब्लाक नहीं करेगी जिससे आपकी Eliminate Render Blocking Resources का एरर Solve हो जायेगा |

ये फाइल्स वैसे तो पेज पर ही रहती है, सिर्फ उसकी पोजीशन Header से Footer में आ जाती है | इसलिए आपको अपने पेज को पहले Pagespeed Insights टूल में टेस्ट करना है और फिर Eliminate Render Blocking Resources के एरर में जितनी भी फाइल्स के नाम दिए हुए है आपको उन्हें इस प्लगइन कि लिस्ट में search करना है और फिर उस फाइल के आगे बने हुए Move to footer बटन को क्लिक करना है और Publish Changes पर क्लिक करना है |

लेकिन अगर आप ऐसा करते ही तुरंत अपनी वेबसाइट को फिर से Pagespeed Insights टूल में टेस्ट करेंगे तो आपको ये फाइल्स फिर भी Render Blocking Resources की लिस्ट में दिखाई देंगी क्यूंकि अभी ये फाइल्स Cache में है | इसके लिए आपको Hummingbird प्लगइन में Dashboard पर दोबारा क्लिक करना है और उपर बने Clear Cache के बटन को Press करना है |

What is Eliminate Render Blocking Resources

इसके बाद जब आप अपनी वेबसाइट को Pagespeed Insights पर टेस्ट करेंगे तो अभी तक जो फाइल्स Render Blocking Issue को Create कर रही थी वो इस लिस्ट से गायब हो जाएगी |

अगर इस Setting को Use करने से आपकी वेबसाइट का look या डिजाईन खराब होता है तो इसका मतलब है कि कोई जरुरी फाइल आप Header से Footer में Move कर रहे है | आपको उस फाइल को खोजना होगा और एक-एक करके सभी फाइल्स को वापिस से Header में लाना होगा इस Move to Footer बटन को Unclick करके और देखना होगा कि किस फाइल को वापिस से Header में लाने से वेबसाइट का look ठीक हो रहा है और फिर उस फाइल को आपको Header पर ही रखना होगा | बाकी फाइल्स को आप footer में Move कर सकते है |

अगर इस आप्शन को आप बिलकुल ही बंद करना चाहते है तो आप Asset Optimization में ही तीसरे आप्शन Settings पर क्लिक करेंगे और निचे स्क्रोल करने पर आपको एक Deactivate का बटन दिखाई देगा आपको इसे क्लिक कर देना है | इससे आपकी वेबसाइट दोबारा से अपने पुराने look पर आ जाएगी |

What is Eliminate Render Blocking Resources
Hummingbird Plugin Setup

दोस्तों इस तरह से आप अपनी वेबसाइट में Eliminate Render Blocking Resources के Issue को खत्म कर सकते है बिना किसी Paid Plugin को इस्तेमाल लिए हुए | Google ने वेबसाइट की स्पीड  को एक Ranking Factor बना दिया है लेकिन इसका अर्थ ये कदापि नहीं है कि आप सिर्फ अपनी वेबसाइट की स्पीड पर ही अपना ध्यान केन्द्रित करे | इसके आलावा आपको अपने कंटेंट की Quality और Uniqueness पर भी ध्यान देना होगा अगर आप अपनी वेबसाइट या ब्लॉग को रैंक करवाना चाहते है तो आपको अपनी robots.txt file और अपनी वेबसाइट की Indexing पर भी ध्यान देना होगा |

अगर आप अपनी वेबसाइट या ब्लॉग को Pagespeed Insights टूल में टेस्ट करते है तो आपको वहां पर अपनी वेबसाइट से रिलेटेड अनेको Errors मिल जायेंगे जिनकी वजह से आपकी वेबसाइट Slow परफॉर्म करती है, जिसमे एक खास भूमिका आपकी Web Hosting भी निभाती है | अगर आपके पास एक Reliable और Faster Hosting नहीं है तो भी आपको इस टूल में Website Speed से सम्बंधित कई Errors देखने को मिलेंगे इसलिए एक बेहतरीन Web Hosting का इस्तेमाल करे |

अगर आप अपने ब्लॉग से थोडा बहुत Revenue Generate करते है तो मैं आपको एक प्लगइन Recommend करना चाहूँगा जो आपकी वेबसाइट से 80 % इन Errors को वो अपने आप ही खत्म कर देगा और आपकी वेबसाइट को Boost कर देगा, जिसका नाम है  Wp-Rocket. इस प्लगइन का इस्तेमाल हर एक बड़ा ब्लॉगर जरुर करता है लेकिन ये थोडा Costly जरुर है इसलिए अगर आप इसे Afford कर सकते हो तो ठीक है नहीं तो आप कुछ Free Plugins के साथ भी अपना काम चला सकते हो लेकिन इनके सस्ते के चक्कर में इनके Crack Version को इस्तेमाल मत करना, ये आपकी वेबसाइट को हानी पहुंचा सकता है |


अगर आपको यह इनफार्मेशन उपयोगी लगे तो इसे जरूरतमंद लोगो तक जरुर शेयर कीजियेगा और अगर इस टॉपिक के बारे में ऐसा कोई पॉइंट है, जिसे हम अपने इस आर्टिकल में कवर ना कर पाए हो तो आप उसे Comment Section के माध्यम से जरुर साँझा करे |

नमस्कार दोस्तों, मैं Mahakal-Blog का फाउंडर हु | ब्लॉग्गिंग करना मेरा प्रोफेशन है और मेरी रूचि, नई-नई चीजो के बारे में जानकारी अर्जित करना और उसे ब्लॉग्गिंग के मध्यम से लोगो के साथ शेयर करने में है | इस ब्लॉग को बनाने के पीछे हमारा मकसद यह है कि हम आपको ब्लॉग्गिंग और डिजिटल मार्केटिंग से सम्बंधित महत्वपूर्ण जानकारी एकदम सरल भाषा हिंदी में उपलब्ध करवा सके !

Share For Support:

1 thought on “How to Eliminate render blocking resources wordpress – Hindi”

Leave a Comment