Blog

वर्डप्रेसवर रेंडर-ब्लॉकिंग जावास्क्रिप्ट आणि सीएसएस कसे काढावे ?

HOW TO ELIMINATE RENDER-BLOCKING JAVASCRIPT AND CSS ON WORDPRESS

HOW TO ELIMINATE RENDER-BLOCKING JAVASCRIPT AND CSS ON WORDPRESS

आपल्याला SEARCH ENGINE परिणाम पृष्ठांमध्ये (SERP) उच्च रँक पाहिजे असल्यास वेगाने लोड करणारी वेबसाइट असणं महत्त्वपूर्ण आहे. म्हणूनच आपल्या साइटची लोडिंग ऑप्टिमाइझ करण्यात मदत करण्यासाठी GOOGLE चे GOOGLE’S PAGE SPEED INSIGHTS आहे. आपण साधन वापरत असताना “सामग्री मधील रेंडर-ब्लॉकिंग जावास्क्रिप्ट आणि सीएसएस हटवा” असा इशारा मिळत असल्यास, काळजी करू नका. या लेखात, आम्ही आपल्याला समस्येचे निराकरण कसे करावे हे सांगणार आहोत. तर हा लेख पूर्ण वाचा.

“सामग्रीमधील रेंडर-ब्लॉकिंग जावास्क्रिप्ट आणि सीएसएस हटवा” चेतावणी

आपण GOOGLE चे PAGE SPEED RULES पाहिले तर, रेंडर-ब्लॉकिंग जावास्क्रिप्ट आणि CSS काढून टाकणे हे त्यापैकी एक आहे. त्यातील कोणत्याही अयशस्वीतेच्या परिणामी पृष्ठ लोडिंग गती कमी होईल. परंतु आपल्या HTML पृष्ठावरील जावास्क्रिप्ट आणि सीएसएस आपली साइट कशी धीमा करू शकतात हे जाणून घ्या ?

बरं, आपण प्रत्येक वेळी नवीन थीम किंवा प्लगइन स्थापित करता तेव्हा ते पुढच्या टोकावर जावास्क्रिप्ट आणि सीएसएस कोड जोडतात. परिणामी, पृष्ठ लोड करण्यासाठी ब्राउझरना अधिक वेळ लागेल. बरोबर ?

अप-द फोल्ड ( ATF ) म्हणजे आपल्या वेबपृष्ठाचा तो भाग जो प्रथम लोड होईल तेव्हा दृश्यमान असेल. आपल्याला पोहोचण्यासाठी खाली स्क्रोल करावे लागणार्‍या पृष्ठाचा कोणताही भाग नॉन-एटीएफ आहे ( NON-ATF )

GOOGLE PAGESPEED INSIGHT वापरून रेंडर-ब्लॉकिंग जावास्क्रिप्ट आणि सीएसएस कसे शोधावे ?

रेंडर-ब्लॉकिंग फिक्सिंगची पहिली पायरी म्हणजे GOOGLE PAGE INSIGHT वापरुन आपल्या साइटच्या गतीची चाचणी घेणे. असे करण्यासाठी या चरणांचे अनुसरण करा:

  1. पृष्ठास भेट द्या आणि “वेबपृष्ठ URL प्रविष्ट करा” फील्डमध्ये आपल्या वेबसाइटची URL पेस्ट करा.
  2. अहवाल प्राप्त करण्यासाठी ANALYZE वर क्लिक करा.

बर्‍याच साइट्स 50-70 दरम्यान स्कोअर करतात; हे आपल्या स्कोअरसाठी बेंचमार्क म्हणून काम करेल. GOOGLE आपल्या वेबसाइटचे कार्यप्रदर्शन सुधारण्यासाठी सूचना देखील करते.

How to Eliminate Render-Blocking JavaScript and CSS on WordPress

वरच्या पृष्ठावरील सामग्रीमध्ये रेंडर-ब्लॉकिंग जावास्क्रिप्ट आणि सीएसएस हटविण्याची सूचना आपणास आढळल्यास आपणास या समस्येचे निराकरण करण्याची आवश्यकता असेल.

How to Eliminate Render-Blocking JavaScript and CSS on WordPress

लक्षात ठेवा की आपण आपल्या वेबसाइटवर परिपूर्ण 100 गुण मिळवण्यासाठी प्रयत्न करु नये. वापरकर्त्याच्या वापरचा विचार करूनच उत्तम स्कोर मिळविण्याचा प्रयत्न करा.

आपल्या वर्डप्रेस साइटवर SCRIPT असल्यास ती उत्तम  यूएक्ससाठी आवश्यक असू शकते,  तर आपण PAGESPEED INSIGHT वर थोडा  उच्च स्कोअर मिळविण्यासाठी त्यांना काढू नये.

GOOGLE आपल्या SEARCH ENGINE वर वेबसाइटवर स्कोअर करते त्यामुळे ते त्यामुळे त्यांची  मार्गदर्शक तत्त्वे असतात आणि त्यानुसार सूचना घ्याव्यात.

एलिमिनेट रेंडर-ब्लॉकिंग जावास्क्रिप्ट आणि सीएसएस वरील सामग्री” निश्चित करणे

वर्डप्रेस सह, आपल्या वर्डप्रेस साइटवरील जावास्क्रिप्ट रेंडर-ब्लॉकिंग आणि सीएसएस संसाधने कमी करणे सोपे आहे. आम्ही खाली सूचीबद्ध केलेली तीन प्लगइन आपण वापरू शकता:

W3 TOTAL CACHE

आमच्या आवडींपैकी एक म्हणजे W3 TOTAL CACHE प्लगइन. एकदा ते स्थापित आणि सक्रिय झाल्यानंतर, आपल्या वर्डप्रेस च्या डॅशबोर्डवर या चरणांचे अनुसरण करा:

  1. PERFORMANCE -> GENERAL SETTINGS वर जा.
  2. पृष्ठावरील MINIFY हेडिंग शोधा. मग या शीर्षकाखाली तुम्हाला काही पर्याय दिसतील.
  3. MINIFY साठी ENABLE बॉक्सवर टिक करा. मग MINIFY MODE पर्यायासाठी MANUAL निवडा.
  4. सर्व सेटिंग्ज जतन करा त्यासाठी SAVE ALL SETTINGS दाबा.

How to Eliminate Render-Blocking JavaScript and CSS on WordPress

सर्व रेंडर-ब्लॉकिंग जावास्क्रिप्ट आणि सीएसएस स्क्रिप्ट फेच करा.  जे आपणास गूगल पेजस्पेड अंतर्दृष्टी द्वारे सापडतील.

एकदा आपल्याला प्रॉब्लेम सापडला की पुन्हा PERFORMANCE -> MINIFY वर  नेव्हिगेट करा -> आपल्या वर्डप्रेस डॅशबोर्डवर मिनिफाइड करा.

JS विभाग शोधा. OPERATIONS IN AREAS विभागात, NON-BLOCKING USING “DEFER” एम्बेड प्रकार <HEAD> टॅग च्या आधी निवडा.

JS FILE MANAGEMENT आपली सक्रिय थीम निवडा आणि ADD SCRIPT बटणावर क्लिक करा. खाली दिलेल्या पृष्ठांवर, GOOGLE पृष्ठस्पेड अंतर्दृष्टी वरून जावास्क्रिप्ट URL कॉपी आणि पेस्ट करा.

खाली स्क्रोल करा आणि CSS विभाग शोधा.  CSS FILE MANAGEMENT साठी, आपली सक्रिय थीम निवडा आणि ADD A STYLE SHEET वर क्लिक करा. वरील चरणांप्रमाणेच, PAGE SPEED INSIGHT वरून सीएसएस स्टाईलशीट URL कॉपी करा आणि त्या आवश्यक फील्डवर पेस्ट करा.

How to Eliminate Render-Blocking JavaScript and CSS on WordPress

शेवटी, SAVE SETTINGS & PURGE CACHES बटणावर क्लिक करा.

AUTOPTIMIZE

वैकल्पिकरित्या, रेंडर-ब्लॉकिंग जावास्क्रिप्ट आणि सीएसएस त्रुटीचे निराकरण करण्यासाठी आपण AUTOPTIMIZE प्लगइन वापरू शकता. एकदा प्लगिन स्थापित आणि सक्रिय झाल्यानंतर आपल्या डॅशबोर्डवर या चरणांचे कार्य करा:

  1. SETTINGS -> AUTOPTIMIZE वर जा.
  2. OPTIMIZE JAVA SCRIPT CODE? आणि OPTIMIZE CSS CODE? बॉक्स तपासा.
  3. SAVE CHANGES AND EMPTY CACHE बटण दाबा.

How to Eliminate Render-Blocking JavaScript and CSS on WordPress

बर्‍याच प्रकरणांमध्ये चेतावणी निश्चित करण्यासाठी हे पुरेसे आहे. तथापि, परिणाम आपल्या थीम आणि सक्रिय प्लगइननुसार भिन्न असू शकतात.

आपली समस्या सुटली आहे हे सुनिश्चित करण्यासाठी, पुन्हा PAGESPEED INSIGHT मार्गे आपली साइट चेक करा . जर कोणतीही अवरोधित केलेली JS आणि CSS संसाधने शिल्लक राहिली असतील तर या चरणांचे अनुसरण करून ऑप्टिमायझेशन आणखी पुढे घ्या:

  1. परत SETTINGS -> AUTOPTIMIZE करा.
  2. SHOW ADVANCED SETTINGS बटणावर क्लिक करा.
  3. त्यानंतर, ALSO AGGREGATE INLINE JS पर्याय तपासा.

How to Eliminate Render-Blocking JavaScript and CSS on WordPress

SPEED BOOSTER PACK

आपल्या वर्डप्रेस वेबसाइटसाठी रेंडर-ब्लॉकिंग जावास्क्रिप्ट आणि सीएसएस एरर निश्चित करण्यात आपल्याला उपयोगी वाटणारे आणखी एक लोकप्रिय प्लगइन म्हणजे SPEED BOOSTER PACK. असे करण्यासाठी आपल्या डब्ल्यूपी-अ‍ॅडमीन क्षेत्रावरील या चरणांचे अनुसरण करा:

  1. स्पीड बूस्टर पॅक विभागात जा आणि ADVANCED टॅबमध्ये प्रवेश करा.
  2. JAVASCRIPT OPTIMIZATION मेनूमध्ये, MOVE SCRIPTS TO THE FOOTER आणी DEFER PARSING OF JAVASCRIPT FILES चालू करा.

How to Eliminate Render-Blocking JavaScript and CSS on WordPress

सीएसएस रेंडर-ब्लॉकिंग ऑप्टिमायझेशन सेट करण्यासाठी CSS OPTIMIZATION मेनूवर खाली स्क्रोल करा.

सर्व सीएसएस इनलाइन करण्यासाठी, सर्व (पूर्वीचे) इनलाइन CSS  करणे आणि सर्व इनलाइन CSS  अधोलेखात हलविण्याकरिता आपल्याला अतिरिक्त सेटिंग्ज सापडतील. योग्य तोडगा शोधण्यासाठी या पर्यायांसह प्रयोग करा.

How to Eliminate Render-Blocking JavaScript and CSS on WordPress

या सर्वांना सक्षम केल्याने आपली साइट वेगवान होईल, परंतु अवांछित सामग्रीचे अवांछित फ्लॅश देखील येऊ शकते (एफओओसी). हे तेव्हा होते जेव्हा ब्राउझर स्टाईलशीट लोड होण्याची प्रतीक्षा न करता वेब पृष्ठ लोड करते, ज्यामुळे अनियंत्रित पृष्ठाची क्षणिक फ्लॅश उद्भवू शकते.

वरील पद्धती वापरल्यानंतर, रेंडर-ब्लॉक करणे यापुढे कोणतीही समस्या नाही हे सुनिश्चित करण्यासाठी GOOGLE पृष्ठस्पीड अंतर्दृष्टीकडे परत जा.

CONCLUSION

वेबसाइटची गती अभ्यागतांना आकर्षित आणि टिकवून ठेवण्यात सर्वात गंभीर घटकांपैकी एक आहे. हे असे आहे कारण शोध इंजिने परिणामांच्या क्रमवारीत साइट गतीचा विचार करतात.

GOOGLE चे PAGE SPEED INSIGHT त्यांच्या लोडिंग गतीच्या आधारे वेबसाइटना स्कोअर करते. आपल्या वर्डप्रेस साइटच्या कामगिरीचे विश्लेषण करत असताना वरच्या बाजुवरील मजकूर सामग्रीत जावास्क्रिप्ट आणि सीएसएस रेंडर-ब्लॉकिंग  मिळत असल्यास, समस्या प्लगइन्ससह सोडवा.

तुम्हाला डिजिटल मार्केटींगची आशादायक कारकीर्द हवी आहे का ? आमच्या डिजिटल मार्केटिंग मराठी कोर्समध्ये सामील व्हा ( 500+ पानांचा कोर्स मराठीमध्ये ) आणि असंख्य संधींचा मार्ग मोकळा करा. SIGNUP NOW

तुम्हाला हि माहिती उपयुक्त वाटली असेल अशी आम्ही आशा करतो  ! !
आपल्याला काही प्रश्न असल्यास खाली टिप्पणी अगदी  मोकळ्या मनाने करा .

कृपया खालील LIKE बटण दाबा. आणि आपल्या मित्रांना  SHARE करा

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Content is protected by COPYSCAPE!!
×

नमस्कार !

आपले काही प्रश्न किंवा शंका असेल तर आमच्याशी Whats's App वर संपर्क करा अथवा खालील पत्यावर ई-मेल करा.
Digitaltree.info@gmail.com

×
%d bloggers like this: