WordPress साइट में अप्रयुक्त CSS को कैसे निकालें (या स्थगित करें)

क्या आप WordPress में अप्रयुक्त CSS को हटाना चाहते हैं और अपनी वेबसाइट को तेज़ बनाएं?

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

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

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

h1 {
 text-align: center;
 color: red;

}

एक पृष्ठ को सही ढंग से प्रदर्शित करने के लिए एक सामान्य वर्डप्रेस वेबसाइट को कई स्टाइलशीट की आवश्यकता होगी। वर्डप्रेस के मुख्य संस्करण में उपयोग की जाने वाली सीएसएस स्टाइल के अलावा, सीएसएस कॉल आपके सक्रिय वर्डप्रेस थीम और वर्डप्रेस प्लगइन्स द्वारा की जाती हैं। इसलिए, सब कुछ सही ढंग से स्टाइल करने के लिए एक वर्डप्रेस वेबसाइट को एक दर्जन सीएसएस फाइलों की आवश्यकता हो सकती है।

यदि फ़ाइलें बहुत बड़ी हैं या यदि बहुत अधिक CSS फ़ाइलें बुलाई जाती हैं, तो कैस्केडिंग स्टाइल शीट पृष्ठ लोडिंग समय बढ़ा सकती हैं। इस समस्या से निपटने के लिए कई तकनीकों को नियोजित किया जा सकता है जैसे कि Defer, Minify, और Combin।

नीचे इन तकनीकों का सारांश दिया गया है।

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

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

WordPress में अप्रयुक्त CSS क्या है और यह क्यों होता है?

अप्रयुक्त सीएसएस किसी भी सीएसएस नियमों को संदर्भित करता है जिन्हें वर्तमान पृष्ठ पर नहीं बुलाया जा रहा है। ऐसा अक्सर होता है क्योंकि पेजों को स्टाइलशीट से हर एक सीएसएस नियम को शायद ही कभी कॉल करने की आवश्यकता होती है। उदाहरण के लिए, आपकी स्टाइलशीट में लाल रंग का उपयोग करके एक शीर्षक प्रदर्शित करने के लिए एक सीएसएस नियम हो सकता है, लेकिन इसे अप्रयुक्त सीएसएस के रूप में वर्गीकृत किया जाएगा यदि वास्तव में इसका अनुरोध नहीं किया गया था।

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

वर्डप्रेस थीम को मुख्य स्टाइलशीट के रूप में Styles.css फ़ाइल का उपयोग करने की आवश्यकता होती है, हालांकि थीम के लिए फोंट, थीम की खाल और अन्य डिज़ाइन तत्वों के लिए अतिरिक्त स्टाइलशीट का उपयोग करना सामान्य है। विषय सीएसएस फाइलों में निहित कई सीएसएस नियम केवल कुछ स्थितियों में ही आवश्यक हैं। इसके बावजूद, ये सीएसएस फाइलें आमतौर पर आपकी वेबसाइट के हर पेज पर लोड की जाती हैं।

वर्डप्रेस प्लगइन्स अप्रयुक्त सीएसएस को पृष्ठों में डालने के लिए विशेष रूप से खराब हैं क्योंकि डेवलपर्स अक्सर डिफ़ॉल्ट रूप से सभी पृष्ठों पर स्टाइलशीट लोड करते हैं।

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

क्रिटिकल सीएसएस के बारे में क्या?

एक और शब्द जो आप अक्सर सुन सकते हैं वह है महत्वपूर्ण CSS . यह किसी भी स्टाइल को संदर्भित करता है जो उपयोगकर्ताओं को बिना स्क्रॉल किए तुरंत सामग्री प्रदर्शित करने के लिए आवश्यक है। इस क्षेत्र को तह के ऊपर . कहा जाता है और ब्राउज़र को तह के ऊपर सामग्री लोड करने में लगने वाले समय को प्रथम सामग्रीपूर्ण पेंट . कहा जाता है (एफसीपी)।

Google अनुशंसा करता है कि क्रिटिकल सीएसएस को HEAD तत्व में इनलाइन निकाला जाए, छोटा किया जाए और इनलाइन प्रदर्शित किया जाए ताकि यह सुनिश्चित किया जा सके कि पहला कंटेंटफुल पेंट जल्दी से लोड हो। डेफर का उपयोग गैर-महत्वपूर्ण सीएसएस फाइलों को बाद में लोड करने के लिए किया जा सकता है ताकि यह सुनिश्चित किया जा सके कि कम महत्वपूर्ण सीएसएस फाइलें प्रारंभिक पेज लोड को धीमा न करें।