Render-Blocking JavaScript & CSS Ko Kaise Fix Kare

क्या आप WordPress website में render-blocking JavaScript & CSS error को fix करना चाहतें हैं? यदि अपने अपनी website को Google PageSpeed insights में test किया है, तो वहाँ आपको संभवतया render-blocking scrips aur CSS error को fix करने का सुझाव दिया गया होगा। Google Analytics वर्डप्रेस ब्लॉग मे कैसे इनस्टॉल करें को पढ़े।

So हम इस article में आपको बताएँगे की, कैसें आसानी से website के Google PageSpeed insights स्कोर को बेहतर बनाने के लिए WordPress में render blocking JavaScript & CSS को fix करें।

Render-Blocking JavaScript & CSS क्या होता हैं?

हर WordPress site की अपनी theme और plugins होता हैं, जो की JavaScript and CSS files के द्वारा आपके website के front-end को जोडती हैं। यह script आपके site के page का load time को increase कर सकते हैं, But यह page के rendering को block भी कर सकते हैं।

Page के बाकी हिस्सों को लोड करने से पहले आपके site के visitor के browser को scripts और CSS को load करना होगा। इसका मतलब यह हुआ की यदि आपके website के visitor का internet connection slow हैं, तो आपके visitor को site का page देखने के लिये कुछ milliseconds ज्यादा तक इंतजार करना पड़ सकता हैं।

इस scripts और stylesheets को render-blocking JavaScript & CSS के नाम से जाना जाता हैं। But आप अपनी website का Google PageSpeed में 100 का स्कोर चाहतें हैं तो आपको इस error को भी fix करना होगा। Because हमारी website की PageSpeed भी SEO के लिये बहुत जरुरी होती हैं।

Google PageSpeed Score क्या होता हैं?

Google PageSpeed Insights एक online optimization tool है, जिसे google ने website को optimize और test करने के लिये create किया हैं। इस website के द्वारा आप अपनी website को बड़ी आसानी से optimize और test कर सकते हैं।

यह tool आपकी website के error को आपको बता देता है, साथ में यह उन error को fix करने के लिये सुझाव भी देता हैं। ताकि आपकी site का page load time को और भी ज्यादा improve किया जा सकें।

यह आपकी site के performance को नंबर के score के द्वारा बताता हैं। अधिकांश website का score 50 से 80 के बीच हो सकता हैं। और किसी website का 50 से नीचे भी हो सकता हैं। हालांकि कुछ website owner ने 100 score भी हासिल किया हुआ हैं। Because आप भी अगर थोड़ी कोशिश करेंगे तो 100 का score आसानी से प्राप्त कर सकते हैं।

क्या आपकी website को “100” Google PageSpeed Score की जरुरत हैं?

Google PageSpeed insights का उद्देश्य है, की यह आपको अपनी website का speed और performance को और अधिक बेहतर करने का सुझाव देता हैं। यह याद रखें कि speed और performance भी SEO का ही हिस्सा हैं। Because speed और performance भी आपकी site की rank के लिये जरुरी हैं। यह आपके site के user experience को improve कर सकता हैं।

एक बेहतर user experience के लिये speed बहुत आवश्यक होता हैं। अभी हाल ही में हमने अपनी site के speed को और अधिक बेहतर किया हैं। So इसका हमे काफी सुखद परिणाम भी मिले हैं। इसीलिये हम आपको recommend करते हैं, की आपको अपनी website के speed की तरफ भी ध्यान रखना चाहिए। ताकि site को rank करने में आसानी हो।

तो आइए देखें कि हम WordPress में render blocking JavaScript & CSS को कैसे fix किया जा सकता हैं। इसके लिये हम दो method के बारे में बात करेंगे। जिसके द्वारा हम render blocking JavaScript and CSS को WordPress में fix करेंगे।

आप अपनी वेबसाइट के लिए सबसे अच्छा काम करने वाले दोनों method में से किसी एक का चयन कर सकते हैं।Because आप दोनों method के द्वारा render blocking JavaScript & CSS को fix किया जा सकता हैं।

Also Read: Google Play Store डाउनलोड और इंस्टॉल कैसे करें Simple Way 2023

1. Autoptimize के द्वारा Render-Blocking Scripts & CSS Fix करें

इस method के द्वारा Render Blocking Scripts & CSS को fix करना बहुत ही सरल है। So हम सभी user को इस method को use करने के लिये recommend करते हैं। लेकिन आपको इसके लिए सबसे पहले अपने WordPress में Autoptimize plugin को install और activate करना होगा।

जब plugin activate हो जाए, तब इसके बाद आपको plugin के setting को configure करना होगा। इसके लिये WordPress के admin area में Settings » Autoptimize पर जाना होगा।

अब आपको इस page पर JavaScript Options और CSS Options दिखाई देगा। आपको इन option को select कर लेना हैं। After that आपको save changes button पर click करना हैं।

Now, अब आप Google PageSpeed tool का उपयोग करके अपनी वेबसाइट का परीक्षण कर सकते हैं। अगर अभी भी render blocking scripts का error आ रहा है, तो आपको फिर से plugin के setting page पर जाना होगा। और वहाँ पर आपको page के सबसे उपर Show Advanced Settings के button पर click करना हैं।

अब इस plugin के JavaScript Options में आपको Also aggregate inline JS? को select करना है। इसके बाद आपको Exclude scripts from Autoptimize option से seal.js or jquery.js को remove कर देना हैं।

Next, अब आप CSS Options पर आ जाएँ। और Also aggregate inline CSS को select कर ले।

Now अब आप Save changes and Empty Cache के button पर click कर दे। जब आप इस प्रक्रिया को पूरा कर ले तो आप अपनी website को Google PageSpeed tool में test कर ले। और देख ले की JavaScripts और CSS को optimizing करने से कोई नया error तो नहीं हैं।

यह कैसे काम करता है

Autoptimize, JavaScript और CSS की सभी files को कतारबद्ध कर देता हैं। After that, यह minified CSS और JavaScripts फाइल बनाता हैं। और website पर यह cached copies को async और स्थगित करता हैं।

render-blocking JavaScript & CSS error की समस्या को ठीक कर देता हैं। However, कृपया ध्यान रखें की यह आपकी वेबसाइट के performance या फिर appearance को affect भी कर सकता हैं।

Also Read: Play Store Par Fake Android App Ka Pata Kaise Kare?

2. W3 Total Cache के द्वारा Render-Blocking JavaScript & CSS Fix करें

इस method के द्वारा render-blocking JavaScript & CSS error को fix करने के लिये थोडा ज्यादा काम करना पड़ेगा। इसके लिये हम आपको W3 Total Cache plugin use करने की सलाह देंगे।

इसके लिये सबसे पहले आपको W3 Total Cache plugin को अपने WordPress में install और activate करना होगा। इसके बाद आपको plugin में Performance » General Settings page के Minify section पर जाना होगा।

सबसे पहले आपको Minify option को ‘Enable’ करना होगा। अब आपको minify mode option को select करना होगा। अब आपको save all settings पर click कर के सेटिंग को सेव कर लेना हैं।

Next, आपको scripts और CSS को add करना हैं, जिसे आप minify करना चाहतें हैं। इसके लिये आपको Google PageSpeed Insights tool में ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content‘ में scripts and stylesheets के URL को copy कर लेना हैं।

PageSpeed Insights tool में ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content‘ में ‘Show how to fix’ पर click करे। यहाँ पर आपको scripts और stylesheets की और भी सूची बतायेगा, जिसे आपको fix करना हैं।

अब अपने mouse को script के उपर ले जाये। ऐसा करने से script का full URL show हो जायेगा। जैसा की उपर चित्र में दिया गया हैं। अब आपको इसको copy करने के लिए अपने कीबोर्ड की CTRL+C (Command+C on Mac) कर लेना हैं।

Also Read: Jio Phone में Mp3 Song कैसे डाउनलोड करे 2 आसान तरीके

Scripts और stylesheet कैसें Add करें

अब अपने WordPress plugin के Performance » Minify page पर जाये।

first of all, हमें जिस JavaScript files को add करना है, जिसे हम minified करना चाहतें हैं। इसके लिये हमे JS section में जाना होगा। और इसे enable करना होगा। अब इसके बाद ‘Operations in areas’ में Before <head> section में minify को select कर ले। अब इसके बाद आप Embed type में ‘Non-blocking async’ को set कर दे।

Next, आपको ‘Add script’ बटन पर क्लिक कर देंगे। फिर इसके बाद Google PageSpeed tool में जो script URL हमनें उपर copy किया था। उसको यहाँ पर add कर देंगें।

अब इसके बाद हमे CSS section में stylesheet को add करना हैं। इसके लिये फिर से Google PageSpeed tool पर जाना होगा। और वहाँ से Eliminate render-blocking JavaScript and CSS in above-the-fold content‘ में ‘Show how to fix’ पर click करके CSS URL को copy कर ले।

अब इसके बाद W3 Total Cache plugin के Performance » Minify page पर जायें। और वहां पर CSS section में ‘Add a stylesheet’ बटन पर click कर के, इसमें Google PageSpeed tool से copy किये गए URL को add कर दे।

Finally अब आप ‘Save settings and purge cache’ बटन पर click कर के save कर ले। अब Google PageSpeed tool पर जायें और website पर फिर से test कर ले। और यह सुनिश्चित करले की website ठीक ठाक काम कर रहा है, की नहीं और Eliminate render-blocking JavaScript & CSS काerror fix हुआ की नहीं।

Problem का निवारण

Eliminate render-blocking JavaScript & CSS काerror fix करना। आपके plugin और WordPress themes पर निर्भर करता है की यह JavaScript और CSS कैसें use करते हैं। Because प्रत्येक WordPress theme JavaScript & CSS को अलग अलग use करते हैं। So सभी render-blocking JavaScript & CSS को पूरी तरह से fix करना थोडा challenging हो सकता हैं।

उपर दिया गए tools आपकी इसमें help कर सकते हैं। Because इन plugin को ठीक से काम करने के लिये कुछ अलग scripts की जरुरत पड़ सकती हैं। इस सब solutions से हो सकता है की plugins break हो सकता हैं। या फिर कुछ अलग तरह का व्यवहार कर सकता है।

Google आपकी site पर optimizing CSS delivery for above the fold content का issues भी दिखा सकता है। So इसके लिये आप Autoptimize के द्वारा manually भी inline CSS को add कर सकते हैं। जो की आपके theme के above fold area display के लिये जरुरी हो सकता हैं।

However, यह पता लगाना बहुत कठिन हो सकता है की आपके theme के लिये कोनसा CSS code की जरुरत हैं। Because हर theme में CSS और JavaScript files अलग अलग तरह से काम करती हैं।

Also Read: Kya Post Rank Ke Liye Meta Keywords Use Karna Chahiye

So हम आशा करते हैं कि इस article से आपको Render-Blocking JavaScript & CSS को fix करने में काफी help मिलेगी।

Also Read:

• 7 Best WordPress Backup Plugin वेबसाइट के लिये
• Google Play Store not working? Kaise Fix Aur Sahi Kare