वर्डप्रेस में जावास्क्रिप्ट और सीएसएस को रेंडर-ब्लॉकिंग फिक्स करने के लिए कैसे करें

वर्डप्रेस में जावास्क्रिप्ट और सीएसएस को रेंडर-ब्लॉकिंग फिक्स करने के लिए कैसे करें

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

वर्डप्रेस में जावास्क्रिप्ट और सीएसएस को अवरुद्ध करने का तरीका तय करना

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

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

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

इन स्क्रिप्ट और स्टाइलशीट को रेंडर-अवरुद्ध जावास्क्रिप्ट और सीएसएस के रूप में जाना जाता है।

100 के Google PageSpeed ​​स्कोर को प्राप्त करने की कोशिश कर रहे वेबसाइट मालिकों को यह सही स्कोर हासिल करने के लिए इस समस्या को ठीक करना होगा।

गूगल पेजस्पीड स्कोर क्या है?

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

यह आपको आपकी साइट के नियमों की संख्या के आधार पर स्कोर दिखाता है। अधिकांश वेबसाइटें 50-70 के बीच कहीं मिलती हैं हालांकि, कुछ वेबसाइट के मालिकों को 100 (उच्चतम एक पृष्ठ स्कोर कर सकते हैं) हासिल करने के लिए मजबूर होना पड़ता है।

क्या आपको सही “100” Google PageSpeed ​​Score की आवश्यकता है?

Google PageSpeed ​​अंतर्दृष्टि का उद्देश्य आपको अपनी वेबसाइट की गति और प्रदर्शन को बेहतर बनाने के लिए दिशानिर्देश प्रदान करना है। आपको इन नियमों का कड़ाई से अनुसरण करने की आवश्यकता नहीं है

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

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

आपका लक्ष्य एक तेज वेबसाइट बनाना है जो महान उपयोगकर्ता अनुभव प्रदान करता है।

साइट

हम अनुशंसा करते हैं कि आप सुझाव के रूप में Google Pagespeed नियमों का उपयोग करें, और यदि आप उपयोगकर्ता अनुभव को बर्बाद किए बिना आसानी से लागू कर सकते हैं, तो यह बहुत अच्छा है अन्यथा, आपको उतना जितना प्रयास करना चाहिए जितना आप कर सकते हैं और फिर बाकी के बारे में चिंता न करें।

कहा कि, आइए देखें कि वर्डप्रेस में जावास्क्रिप्ट और सीएसएस को रोकने के लिए रेंडर करने के लिए आप क्या कर सकते हैं।

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

1. फोकस ब्लॉकिंग स्क्रिप्ट्स और सीएसएस के साथ Autopitimize को ठीक करें

यह विधि सरल और अधिकतर उपयोगकर्ताओं के लिए अनुशंसित है।

आपको सबसे पहले ज़रूरत है स्वचालित प्लगइन को स्थापित करना और सक्रिय करना। अधिक जानकारी के लिए

सक्रियण पर, आपको यात्रा की आवश्यकता है सेटिंग्स »स्वचालित रूप से लागू करें पृष्ठ प्लगइन सेटिंग को कॉन्फ़िगर करने के लिए

स्वचालित रूप से सेटिंग

आप JavaScript विकल्प और सीएसएस विकल्पों के बगल में स्थित बॉक्स को चेक करके शुरू कर सकते हैं और फिर परिवर्तनों को सहेजने के बटन पर क्लिक कर सकते हैं।

अब आप PageSpeed ​​टूल का उपयोग करके अपनी वेबसाइट का परीक्षण कर सकते हैं। अगर अभी भी स्क्रिप्ट को अवरुद्ध कर रहे हैं तो आपको फिर से प्लगइन के सेटिंग पृष्ठ पर वापस आना होगा और शीर्ष पर ‘उन्नत सेटिंग दिखाएं’ बटन पर क्लिक करें।

उन्नत जावास्क्रिप्ट विकल्प

यहां आप प्लगइन को इनलाइन जेएस को शामिल करने की अनुमति दे सकते हैं और स्क्रिप्ट को हटा सकते हैं जिन्हें डिफ़ॉल्ट रूप से seal.js या jquery.js जैसे बाहर रखा गया है।

इसके बाद, सीएसएस विकल्प पर स्क्रॉल करें और प्लगइन को इनलाइन सीएसएस एकत्रित करने की अनुमति दें।

अपने परिवर्तनों और खाली प्लगइन कैश को सहेजने के लिए ‘परिवर्तन और रिक्त कैश सहेजें’ बटन पर क्लिक करें।

एक बार आपके द्वारा किया जाता है, आगे बढ़ो और पेजस्पीड टूल से फिर से अपनी वेबसाइट की जांच करें।

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

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

सभी एनक्वेटेड जावास्क्रिप्ट और सीएसएस को जोड़कर स्वत: सही बनाएं उसके बाद, यह minified सीएसएस और जावा क्रोम फाइलें बनाता है और कैश की गई प्रतियों को आपकी वेबसाइट पर async या स्थगित के रूप में प्रदान करता है।

यह आपको रेंडर अवरोधन स्क्रिप्ट और शैलियों की समस्या को ठीक करने की अनुमति देता है। हालांकि, कृपया ध्यान रखें कि यह आपकी वेबसाइट के प्रदर्शन या उपस्थिति को भी प्रभावित कर सकता है।

2. W3 कुल कैश का उपयोग करके जावास्क्रिप्ट ब्लॉकिंग को ठीक करें

इस विधि को थोड़ा और काम की आवश्यकता है और उपयोगकर्ताओं के लिए पहले से ही उनकी वेबसाइट पर W3 Total Cache प्लगइन का उपयोग करने के लिए अनुशंसित है।

पहले आपको W3 Total Cache Plugin को स्थापित और सक्रिय करना होगा। अगर तुम्हे सहायता की जरुरत है

अगला, आपको यात्रा की आवश्यकता है प्रदर्शन »सामान्य सेटिंग्स पृष्ठ और Minify अनुभाग में नीचे स्क्रॉल करें

W3 कुल कैश minify सक्षम करें

सबसे पहले आपको न्यूनतम विकल्प के बगल में ‘सक्षम’ चेक करना होगा और फिर minify mode विकल्प के लिए ‘मैनुअल’ का चयन करें।

अपनी सेटिंग्स को स्टोर करने के लिए सभी सेटिंग्स बटन को सहेजें पर क्लिक करें।

इसके बाद आपको स्क्रिप्ट और सीएसएस जोड़ने की जरूरत है जिसे आप कम करना चाहते हैं।

आप सभी पटकथा और स्टाइलशीट के यूआरएल प्राप्त कर सकते हैं जो Google PageSpeed ​​Insights टूल से अवरुद्ध कर रहे हैं।

उन सुझावों के तहत जहां यह कहता है: ‘ऊपर की गुना सामग्री में जावास्क्रिप्ट और सीएसएस में रेंडर-अवरुद्ध को हटा दें’, ‘ठीक कैसे करें’ पर क्लिक करें। यह आपको स्क्रिप्ट और स्टाइलशीट की सूची दिखाएगा।

Google PageSpeed ​​टूल से जावास्क्रिप्ट और स्टाइलशीट यूआरएल प्राप्त करें

अपना माउस एक स्क्रिप्ट पर ले जाएं और यह आपको संपूर्ण यूआरएल दिखाएगा। आप इस यूआरएल को चुन सकते हैं और यूआरएल की प्रतिलिपि बनाने के लिए अपने कीबोर्ड की सीटीएलएल + सी (मैक पर सी + कमांड + सी) का उपयोग कर सकते हैं।

अब अपने वर्डप्रेस व्यवस्थापक क्षेत्र पर जाएं और यहां जाएं प्रदर्शन »Minify पृष्ठ।

पहले आपको जावास्क्रिप्ट फ़ाइलों को जोड़ने की जरूरत है जिन्हें आप छोटा करना चाहते हैं जेएस अनुभाग में नीचे स्क्रॉल करें और फिर ‘क्षेत्रों में संचालन’ के तहत एम्बेड प्रकार को ‘गैर-अवरुद्ध असेंक’ के लिए सेट करें

अनुभाग।

संक्षिप्त करने के लिए स्क्रिप्ट जोड़ें

इसके बाद, आपको ‘एप स्क्रिप्ट’ बटन पर क्लिक करना होगा और फिर स्क्रिप्ट यूआरएल जोड़ना शुरू करना चाहिए जो आपने Google PageSpeed ​​टूल से कॉपी किया था।

एक बार जब आप कर लें, तो सीएसएस अनुभाग में नीचे स्क्रॉल करें और फिर ‘स्टाइलशीट जोड़ें’ बटन पर क्लिक करें। अब Google PageSpeed ​​टूल से कॉपी की गई स्टाइलशीट यूआरएल जोड़ना शुरू करें

न्यूनतम करने के लिए स्टाइलशीट जोड़ें

अब अपनी सेटिंग्स को स्टोर करने के लिए ‘सेव सेटिंग और पर्ज कैश’ बटन पर क्लिक करें।

Google PageSpeed ​​टूल पर जाएं और फिर अपनी वेबसाइट का परीक्षण करें।

सुनिश्चित करें कि आप अपनी वेबसाइट का अच्छी तरह से परीक्षण करने के लिए यह देखते हैं कि सब कुछ ठीक काम कर रहा है।

समस्या निवारण

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

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

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

हालांकि, यह पता लगाना बहुत कठिन हो सकता है कि आपको कौन से सीएसएस कोड की ज़रूरत है गुना सामग्री के ऊपर प्रदर्शित करने के लिए।

बस इतना ही