अप्रयुक्त सीएसएस मुद्दों के बारे में कैसे जाना है


10

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

अब मैं एक संरचित तरीके से काम करता हूं, लेकिन अभी भी फ़ाइल में कुछ सीएसएस होना चाहिए जो कि उपयोग नहीं किया जाएगा, क्योंकि आपको इसे किसी अन्य पृष्ठ पर चाहिए।

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

अब इससे निपटने का एक सुंदर तरीका है, या क्या आप इसके साथ चिपके रहते हैं।

जवाबों:


7

आपका दावा है कि आप एक से बेहतर हैं, बड़ी सीएसएस फ़ाइल सही है। यह संभवतया केवल कुछ KB होगा जब gzipped होगा, और कैश किया जाना चाहिए, इसलिए एक विशाल ओवरहेड नहीं। हालांकि जाँच के लायक कुछ चीजें हैं।

यदि कुछ सीएसएस का उपयोग केवल एक पृष्ठ पर किया जाता है, तो उस मामले में सीएसएस को पृष्ठ पर रखना बेहतर हो सकता है, कुछ शैली टैग में। (ध्यान दें: यह चीजों को बनाए रखना मुश्किल बना सकता है, खासकर जब आप बाद में एक समान शैली का उपयोग कहीं और करने का निर्णय लेते हैं।)

यदि आप अपने सबसे लोकप्रिय पेज लेते हैं (उदाहरण के लिए आपके पेज व्यूज का 50% + बनाने वाले पेज) और पाते हैं कि आपके सीएसएस की केवल बहुत ही कम राशि का उपयोग उन पेजों पर किया जा रहा है, तो उपयोगकर्ताओं के लिए इसे विभाजित करना अधिक तेज़ हो सकता है दो सीएसएस फ़ाइलें। अब, आपके सबसे लोकप्रिय पृष्ठों पर जाने वाले नए उपयोगकर्ताओं को डाउनलोड करने के लिए बहुत कम है। अन्य पृष्ठों पर एक अतिरिक्त HTTP अनुरोध है, लेकिन यह बहुत बड़ी बात नहीं है।

सुनिश्चित करें कि आपका सीएसएस अच्छी तरह से अनुकूलित है। जहां संभव हो, वहां सेलेक्टर्स से बचें। यदि किसी चयनकर्ता का दाहिना हाथ बहुत अधिक सामान्य है तो यह प्रतिपादन समय को धीमा कर सकता है। उदाहरण के लिए .class div {}थोड़ा धीमा होगा क्योंकि ब्राउज़र को <div>पृष्ठ पर प्रत्येक तत्व की जांच करनी है , फिर कक्षा के साथ एक तत्व खोजने (या नहीं) के लिए DOM ट्री को बहुत ऊपर तक देखें।


2
अनुकूलन करने के लिए मैं csslint.net
टोबी

5

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

मुझे लगता है कि आप एक बड़ी फ़ाइल बनाने से बहुत बेहतर हैं जिसे कैश किया जा सकता है।

हां, यह समझ में आता है, जब तक कि उन पृष्ठों का एक सेट नहीं होता है जिन्हें सीएसएस के एक अतिरिक्त बिट की आवश्यकता होती है, उस स्थिति में आप इसे उन पर शामिल कर सकते हैं।


मेरे द्वारा उपयोग किया जाने वाला उपकरण gtmetrix.com है । यह एक ऑनलाइन परीक्षा है जो Yslow और Page Speed ​​दोनों करती है। मुझे नहीं पता कि वे पूरी साइट का परीक्षण करते हैं या नहीं। Yslow अप्रयुक्त सीएसएस के बारे में शिकायत नहीं करता है, यह पृष्ठ गति है जो शिकायत करता है। यह उदाहरण के लिए H3 का उपयोग नहीं किए जाने के बारे में शिकायत करता है, मैं इसका उपयोग फ्रंटपेज पर नहीं करता, लेकिन मैं अन्य पृष्ठों में करता हूं। + एक और बात मेरे सीएसएस में मुद्रण के लिए अनुभाग है, जो सामान्य वेबसाइट पर कहीं भी उपयोग नहीं किया जाता है, क्या आपके पास इसके लिए कोई सिफारिशें हैं।
सैफ बेचन

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

यदि आप एक अलग सीएसएस में प्रिंट शैली रखते हैं तो @SaifBechan - आप पूरी फ़ाइल को लक्षित कर सकते हैं media="print"- कुछ ब्राउज़र इसके लिए अनुरोध नहीं जारी करेंगे जब तक कि आप वास्तव में पृष्ठ को प्रिंट / पूर्वावलोकन करने का प्रयास नहीं करते हैं।
ज़ाफ - बेन डुगुएड

1

डस्ट-मी सेलेक्टर्स नामक एक आसान सा फ़ायरफ़ॉक्स प्लग-इन है , जो आपके सीएसएस के माध्यम से जांच करता है और किसी भी अप्रयुक्त नियमों की रिपोर्ट करता है। हालाँकि, यह फ़ायरफ़ॉक्स के नवीनतम संस्करण (v8.0) के साथ काम नहीं करता है, जो थोड़ा शर्म की बात है।

पुनश्च: यदि मैं आप था, तो मैं नमक की एक चुटकी के साथ सीएसएस लिंट ले जाऊंगा - वहां एक विचारधारा है जो कहती है कि इसकी "सिफारिशें" पांडित्यपूर्ण हैं, और बस ओवरकिल को पूरा करती हैं। (अधिक विवरण के लिए, मैट विलकॉक्स के प्रेरक लेख, " सीएसएस लिंट हानिकारक है " ) देखें। सबसे अच्छा, यह पूरी तरह से अनौपचारिक है ... और, चलो इसका सामना करते हैं, क्या हमें वास्तव में संतुष्ट करने के लिए एक और उपकरण / छद्म मानक की आवश्यकता है?


+1 धन्यवाद मैं इस पर गौर करूंगा। मैंने CSS Lint की भी जाँच की है, और जो आप कह रहे हैं वह सच हो सकता है। सिफारिशों के बहुत सारे ओवरकिल हैं।
सैफ बेचन

1

सबसे अनुकूल और स्केलेबल तरीका जिससे मैं इस से निपटने की कल्पना कर सकता हूं:

  1. "ग्लोबल स्कोप" (जैसे साइट की डिज़ाइन, ग्लोबल क्लासेस, लाइब्रेरी, प्लगइन्स, आदि ...) के सापेक्ष हर चीज़ के लिए एक मुख्य CSS फ़ाइल बनाना ।

  2. एक सिस्टम बनाना जिसमें एक अद्वितीय सीएसएस फ़ाइल प्रति पृष्ठों वाला फ़ोल्डर है (केवल यदि आवश्यक हो)। इन फ़ाइलों का एक ही फ़ाइल नाम हो सकता है क्योंकि यह उस पृष्ठ से जुड़ा हुआ है जिससे आप प्रत्येक पृष्ठ पर एक सर्वर साइड स्क्रिप्ट चला सकते हैं जो उस फ़ोल्डर में एक सीएसएस फ़ाइल की तलाश में है और एक होने पर पृष्ठ को जोड़ सकते हैं।

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

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

यह भी ध्यान रखें कि सीएसएस फाइलों की उन 3 "परतों" को कैश किया जाएगा जो कि एक सीएसएस फाइल होगी।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.