अपनी वर्डप्रेस साइट पर अनुपयोगी CSS को कुशलतापूर्वक हटाएं या डेफर करें तेज़ लोड समय के लिए

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

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

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

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

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

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

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

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

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

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

वर्डप्रेस में अनुपयोगी CSS क्या है और यह क्यों होता है?

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

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

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

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

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

क्रिटिकल CSS के बारे में क्या?

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

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

अनुपयोगी CSS कैसे खोजें

किसी पेज पर अनुपयोगी CSS की खोज करने का एक त्वरित तरीका है इसके URL को GTmetrix, गूगल PageSpeed Insights या Pingdom वेबसाइट स्पीड टेस्ट जैसे प्रदर्शन रिपोर्ट टूल में दर्ज करना। रिपोर्ट अनुपयोगी CSS को हाइलाइट करेगी और सिफारिश करेगी कि अनुपयोगी नियमों को हटाया या डेफर किया जाए।

आधुनिक ब्राउज़र वेबसाइट के डिज़ाइन और कोड का विश्लेषण करने में आपकी सहायता के लिए डेवलपर टूल प्रदान करते हैं। गूगल क्रोम में डेवलपर विकल्पों को Chrome DevTools कहा जाता है और इसका कवरेज टैब अनुपयोगी जावास्क्रिप्ट और CSS कोड खोजने के लिए उपयोग किया जा सकता है। यह CSS फ़ाइलों को खोजने का एक त्वरित और प्रभावी तरीका है जिनमें कई अनुपयोगी नियम हैं।

Chrome DevTools लोड करने के लिए, आपको बस एक पेज पर राइट-क्लिक करना होगा और Inspect चुनना होगा। फिर आप कवरेज टैब पर क्लिक करके प्रत्येक फ़ाइल का URL देख सकते हैं और फ़ाइल जावास्क्रिप्ट, CSS, या दोनों है या नहीं। दाईं ओर, आप बाइट्स में फ़ाइल का कुल आकार और कुल अनुपयोगी बाइट्स देख सकते हैं। एक विज़ुअलाइज़ेशन बार अनुपयोगी कोड को लाल में और आवश्यक कोड को नीले-हरे रंग में प्रदर्शित करता है। यह निचले पैनल में संक्षेपित है, लेकिन यदि आप किसी विशिष्ट फ़ाइल पर क्लिक करते हैं, तो आप ऊपर वाले पैनल में लाल रंग में हाइलाइट किए गए अनुपयोगी CSS नियम देखेंगे।

कवरेज टैब कैसे काम करता है, इस बारे में अधिक जानकारी के लिए Chrome Developers Coverage पेज देखें।

ऑनलाइन कई अन्य मुफ्त और प्रीमियम अनुपयोगी CSS टूल पाए जा सकते हैं।

• JitBit Unused CSS टूल - एक मुफ्त सेवा जो आपकी वेबसाइट पर हर पेज को क्रॉल करती है और उन CSS सेलेक्टर्स को हाइलाइट करती है जिनका कहीं भी उपयोग नहीं किया जा रहा है
• PurifyCSS Online - एक उपयोगी मुफ्त टूल जो अनुपयोगी कोड को हाइलाइट करता है और आपको साफ CSS फ़ाइलें प्रदान करता है
• UnusedCSS - एक प्रीमियम सेवा जो पेज URL को स्कैन करती है और अनावश्यक कोड के बिना क्लीनर CSS फ़ाइलें प्रदान करती है (मूल्य $25 प्रति माह से शुरू)

Chrome DevTools और PurifyCSS Online जैसे टूल वेबसाइटों पर अनुपयोगी CSS नियमों को देखने के लिए उपयोगी हो सकते हैं, लेकिन वे वर्डप्रेस जैसे डायनामिक प्लेटफॉर्म पर अनुपयोगी CSS के मुद्दे से निपटने में हमेशा व्यावहारिक नहीं होते।

वर्डप्रेस थीम और प्लगइन आपकी वेबसाइट पर अलग-अलग स्टाइलशीट लोड करने की आवश्यकता होती है, इसलिए अनुपयोगी CSS की मात्रा पेज दर पेज बदलती है। इसलिए मेरा मानना है कि आम तौर पर अनुपयोगी CSS को वर्डप्रेस में हटाने (या डेफर करने) के लिए ऑप्टिमाइज़ेशन वर्डप्रेस प्लगइन का उपयोग करना बेहतर है।

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

WP Rocket का उपयोग करके वर्डप्रेस में अनुपयोगी CSS हटाएं

WP Rocket बाजार पर सबसे लोकप्रिय वर्डप्रेस प्रदर्शन समाधानों में से एक है। WP Rocket का लाइसेंस $49 प्रति वर्ष के लिए उपलब्ध है।

प्लगइन में एक टूल है जो आपकी वेबसाइट से सभी अनुपयोगी CSS को एक बटन के क्लिक पर हटा सकता है। पृष्ठभूमि में, WP Rocket प्रत्येक पेज पर सभी स्टाइलशीट और स्क्रिप्ट की समीक्षा कर रहा है और HTML कोड में पाए जाने वाले CSS सेलेक्टर्स के साथ CSS नियमों का मिलान कर रहा है। यह प्रक्रिया WP Rocket के सर्वर पर बाहरी रूप से की जाती है, इसलिए सुनिश्चित करें कि आपके वर्डप्रेस सुरक्षा प्लगइन ने उनके सर्वर IP पते को व्हाइटलिस्ट किया है।

चूंकि WP Rocket स्वचालित रूप से सभी अनुपयोगी CSS कोड को हटा देता है, आप ऐसी स्थितियों का सामना कर सकते हैं जहां यह टूल आपकी वेबसाइट डिज़ाइन के एक हिस्से को तोड़ सकता है जैसे संपर्क फ़ॉर्म। यदि ऐसा होता है, तो प्रासंगिक CSS फ़ाइल, ID या क्लास को WP Rocket CSS सेफलिस्ट में जोड़ें।

अनुशंसित पढ़ें: वर्डप्रेस डेटाबेस को कैसे साफ करें

Perfmatters का उपयोग करके वर्डप्रेस में अनुपयोगी CSS हटाएं

Perfmatters वह ऑप्टिमाइज़ेशन समाधान है जिसका उपयोग मैं अपनी वेबसाइट पर अनुपयोगी CSS कोड हटाने के लिए करता हूं। यह एक प्रीमियम वर्डप्रेस प्लगइन है जो केवल $24.95 प्रति वर्ष के लिए उपलब्ध है।

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

मैंने प्लगइन को खराब ऑप्टिमाइज़्ड वर्डप्रेस प्लगइन से निपटने में अत्यधिक प्रभावी पाया है। उदाहरण के लिए, Jetpack को लें। भले ही आप अपनी वेबसाइट के फ्रंटएंड के लिए किसी Jetpack मॉड्यूल का उपयोग न करें, यह अभी भी आपकी वेबसाइट के हर पेज पर 85.1 KB CSS फ़ाइल लोड करेगा। जैसा कि आप नीचे देख सकते हैं, Perfmatters मुझे इस अनावश्यक CSS फ़ाइल को कभी लोड होने से रोकने की अनुमति देता है।

Asset CleanUp का उपयोग करके वर्डप्रेस में अनुपयोगी CSS हटाएं

Perfmatters का एक बढ़िया विकल्प Asset CleanUp है। प्लगइन मुफ्त में उपयोग करने के लिए उपलब्ध है, हालांकि एक प्रीमियम संस्करण €42.08 में उपलब्ध है जो कई अतिरिक्त सुविधाओं को अनलॉक करता है।

Asset CleanUp का CSS और जावास्क्रिप्ट मैनेजर आपको फ़ाइलों को प्रीलोड करने और अपनी वेबसाइट पर विशिष्ट पेज पर फ़ाइलों को अक्षम करने देता है। लॉग-इन उपयोगकर्ताओं के लिए अपवाद बनाए जा सकते हैं।

यदि आप Asset CleanUp Pro में अपग्रेड करते हैं, तो आपको इस पर अधिक नियंत्रण मिलेगा कि आपकी वेबसाइट के किन क्षेत्रों में CSS और जावास्क्रिप्ट फ़ाइलें लोड की जाती हैं और स्क्रीन आकार और रेगुलर एक्सप्रेशन के लिए अतिरिक्त अपवाद जोड़ने में सक्षम होंगे।

RapidLoad का उपयोग करके अनुपयोगी CSS फ़ाइलें हटाएं

Autoptimize एक प्रभावी ऑप्टिमाइज़ेशन वर्डप्रेस प्लगइन है जो आपको CSS, जावास्क्रिप्ट और HTML फ़ाइलों को एकत्रित, मिनिफाई और कैश करने की अनुमति देता है। वर्डप्रेस प्लगइन RapidLoad Power-Up Autoptimize को आगे बढ़ाता है जिससे आप वर्डप्रेस में अनुपयोगी CSS हटाने में मदद करता है।

WP Rocket के CSS ऑप्टिमाइज़ेशन टूल की तरह, RapidLoad Power-Up यह जांच करके पेज लोडिंग समय को कम करता है कि कौन से CSS नियम वास्तव में आवश्यक हैं।

जैसा कि नाम से पता चलता है, प्लगइन CSS फ़ाइलों के आकार को कम करने के लिए RapidLoad सेवा का उपयोग करता है। इसलिए, RapidLoad Power-Up का उपयोग करने के लिए आपको RapidLoad सेवा के लिए साइन अप करना होगा। RapidLoad के लिए मासिक प्लान $5.83 प्रति माह के लिए उपलब्ध हैं।

अंतिम विचार

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

यह देखने के लिए कि आपकी अपनी वेबसाइट पर कितना अनुपयोगी CSS कोड है, मैं GTmetrix, गूगल PageSpeed Insights या Pingdom वेबसाइट स्पीड टेस्ट जैसे प्रदर्शन रिपोर्ट टूल पर कुछ बेंचमार्क चलाने की सिफारिश करता हूं। Chrome DevTools और PurifyCSS Online जैसे डेवलपर टूल का उपयोग यह देखने के लिए भी किया जा सकता है कि CSS पेज पर कितना अनावश्यक वजन जोड़ रहा है।

शुक्र है, हम वर्डप्रेस में अनुपयोगी CSS को कई वर्डप्रेस प्रदर्शन समाधानों का उपयोग करके हटा सकते हैं। यदि आप इस प्रक्रिया को स्वचालित करना पसंद करते हैं, तो मैं WP Rocket या RapidLoad Power-Up का उपयोग करने की सिफारिश करता हूं। जिनके पास वर्डप्रेस रखरखाव के लिए अधिक व्यावहारिक दृष्टिकोण है, वे Perfmatters और Asset CleanUp को पसंद करेंगे क्योंकि ये प्लगइन आपको इस बात पर पूर्ण नियंत्रण देते हैं कि आपकी वेबसाइट के किन क्षेत्रों में CSS और जावास्क्रिप्ट फ़ाइलें लोड की जाती हैं।

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

अनुशंसित पढ़ें: वर्डप्रेस में जावास्क्रिप्ट के पार्सिंग को कैसे डेफर करें

शुभकामनाएं।

Kevin