आपकी लाइटहाउस रिपोर्ट के ऑपर्च्यूनिटी सेक्शन में, सभी अनमिनिफ़ाइड सीएसएस फ़ाइलों की सूची होती है. साथ ही, इन फ़ाइलों को छोटा किए जाने पर, किबीबाइट (केआईबी) में होने वाली संभावित बचत भी होती है:
सीएसएस फ़ाइलों को छोटा करने से परफ़ॉर्मेंस कैसे बेहतर हो सकती है
सीएसएस फ़ाइलों को छोटा करने से, आपके पेज के लोड होने की परफ़ॉर्मेंस बेहतर हो सकती है. सीएसएस फ़ाइलें अक्सर ज़रूरत से ज़्यादा बड़ी होती हैं. उदाहरण के लिए:
/* Header background should match brand colors. */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}
इतने प्रतिशत तक कम किया जा सकता है:
h1,
h2 {
background-color: #000000;
}
ब्राउज़र के हिसाब से, ये दोनों कोड सैंपल फ़ंक्शनल रूप से एक जैसे हैं, लेकिन दूसरे उदाहरण में कम बाइट का इस्तेमाल किया गया है. खाली सफ़ेद जगह को हटाकर मिनीफ़ायर, बाइट की क्षमता को और बेहतर बना सकता है:
h1,
h2 {
background-color: #000000;
}
कुछ मिनीफ़ायर, बाइट कम करने के लिए चतुराई वाली तरकीबें अपनाते हैं.
उदाहरण के लिए, रंग की वैल्यू #000000 को और कम करके #000 किया जा सकता है, जो इसके शॉर्टहैंड के बराबर है.
लाइटहाउस, आपकी सीएसएस में मिलने वाली टिप्पणियों और खाली सफ़ेद जगह
के वर्णों के आधार पर, संभावित बचत का अनुमान लगाता है.
यह सिर्फ़ पुरानी संभावना है.
जैसा कि पहले बताया गया है, आपकी फ़ाइल के साइज़ को और कम करने के लिए, मिनीफ़ायर बेहतर तरीके से ऑप्टिमाइज़ेशन (जैसे कि #000000 को #000 से कम करना) कर सकते हैं.
इसलिए, मिनीफ़ायर का इस्तेमाल करने पर,
Lighthouse रिपोर्ट के मुकाबले ज़्यादा बचत कर सकता है.
अपने सीएसएस कोड को छोटा करने के लिए, सीएसएस मिनीफ़ायर का इस्तेमाल करना
ऐसी छोटी साइटें जिन्हें अक्सर अपडेट नहीं किया जाता है, हो सकता है कि फ़ाइलों को मैन्युअल तरीके से छोटा करने के लिए, किसी ऑनलाइन सेवा का इस्तेमाल किया जा सकता है. सीएसएस को सेवा के यूज़र इंटरफ़ेस (यूआई) में चिपकाया जाता है और यह कोड का छोटा वर्शन दिखाता है.
पेशेवर डेवलपर के लिए शायद आपको अपने-आप काम करने वाला वर्कफ़्लो सेट अप करना हो, जो अपडेट किए गए कोड को डिप्लॉय करने से पहले, आपकी सीएसएस को अपने-आप छोटा कर दे. आम तौर पर, ऐसा करने के लिए Gulp या Webpack जैसे बिल्ड टूल का इस्तेमाल किया जाता है.
Minify CSS में जाकर, अपने सीएसएस कोड को छोटा करने का तरीका जानें.
स्टैक के हिसाब से सलाह
Drupal
एडमिन > कॉन्फ़िगरेशन > डेवलपमेंट में जाकर, एग्रीगेट सीएसएस फ़ाइलें चालू करें. अतिरिक्त मॉड्यूल की मदद से, एग्रीगेशन के ज़्यादा बेहतर विकल्पों को भी कॉन्फ़िगर किया जा सकता है. इससे आपकी साइट की रफ़्तार बढ़ाने के लिए, सीएसएस की स्टाइल को जोड़ा जा सकता है, छोटा किया जा सकता है, और कंप्रेस किया जा सकता है.
जूमला
कई Joomla एक्सटेंशन आपकी साइट की रफ़्तार को बढ़ा सकते हैं. ऐसा करने के लिए, आपको सीएसएस की स्टाइल को जोड़ना, छोटा करना, और कंप्रेस करना होता है. ऐसे टेंप्लेट भी हैं जो यह सुविधा देते हैं.
Magento
अपने स्टोर की डेवलपर सेटिंग में, सीएसएस फ़ाइलों को छोटा करें विकल्प चालू करें.
React
अगर बिल्ड सिस्टम, सीएसएस फ़ाइलों को अपने-आप छोटा करता है, तो पक्का करें कि आप अपने ऐप्लिकेशन के प्रोडक्शन बिल्ड को डिप्लॉय कर रहे हों. आप प्रतिक्रिया डेवलपर टूल एक्सटेंशन की सहायता से इसे देख सकते हैं.
WordPress
कई WordPress प्लग इन आपकी साइट की रफ़्तार बढ़ा सकते हैं. ऐसा करने के लिए वे आपकी स्टाइल को जोड़ते हैं, उन्हें छोटा करते हैं, और कंप्रेस करते हैं. अगर हो सके, तो काट-छांट करने की इस प्रोसेस को शुरू करने के लिए, बिल्ड प्रोसेस का इस्तेमाल भी किया जा सकता है.