आपकी लाइटहाउस रिपोर्ट की सूचियों का ऑपर्च्यूनिटी सेक्शन डाउनलोड की गई सभी सीएसएस फ़ाइलें, साथ ही, किबीबाइट (केआईबी) में संभावित बचत भी हो सकती है जब ये फ़ाइलें छोटी हो जाती हैं:
सीएसएस फ़ाइलों को छोटा करने से परफ़ॉर्मेंस कैसे बेहतर हो सकती है
सीएसएस फ़ाइलों को कम करने से, पेज लोड की परफ़ॉर्मेंस बेहतर हो सकती है. सीएसएस फ़ाइलों का साइज़ तय सीमा से ज़्यादा होता है. उदाहरण के लिए:
/* 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 करना)
का इस्तेमाल करें.
इसलिए, अगर मिनीफ़ायर का इस्तेमाल किया जाता है,
लाइटहाउस से मिली जानकारी के मुकाबले ज़्यादा बचत हो सकती है.
अपने सीएसएस कोड को छोटा करने के लिए, सीएसएस मिनीफ़ायर का इस्तेमाल करें
अक्सर अपडेट न की जाने वाली छोटी साइटों के लिए, तो अपनी फ़ाइलों को मैन्युअल तरीके से छोटा करने के लिए, किसी ऑनलाइन सेवा का इस्तेमाल किया जा सकता है. सीएसएस को सेवा के यूज़र इंटरफ़ेस (यूआई) में चिपकाया जाता है. इससे कोड का छोटा वर्शन दिखता है.
पेशेवर डेवलपर के लिए, आपको ऐसा ऑटोमेटेड वर्कफ़्लो सेट अप करना होगा जो आपकी सीएसएस को अपने-आप छोटा करता है इससे पहले कि आप अपने अपडेट किए गए कोड को लागू करें. आम तौर पर, यह काम Gulp या Webpack जैसे बिल्ड टूल की मदद से किया जाता है.
सीएसएस कोड को छोटा करने में अपने सीएसएस कोड को छोटा करने का तरीका जानें.
स्टैक के लिए सलाह
Drupal
एडमिन में जाकर एग्रीगेट सीएसएस फ़ाइलें चालू करें > कॉन्फ़िगरेशन > डेवलपमेंट. साथ ही, एग्रीगेशन के ज़्यादा बेहतर विकल्पों को कॉन्फ़िगर किया जा सकता है अतिरिक्त मॉड्यूल की मदद से की मदद से तेज़ी से लोड किया जा सकता है. शैलियां.
Joomla
कई Joomla एक्सटेंशन अपनी साइट के सीएसएस को जोड़ने, छोटा करने, और कंप्रेस करके उसकी स्पीड बढ़ाने में मदद कर सकती है शैलियां. ऐसे टेंप्लेट भी हैं जिनमें यह सुविधा है.
Magento
सीएसएस फ़ाइलों को छोटा करें विकल्प को चालू करें डेवलपर सेटिंग पर जाएं.
React
अगर आपका बिल्ड सिस्टम, सीएसएस फ़ाइलों को अपने-आप छोटा करता है, तो पक्का करें कि प्रोडक्शन बिल्ड को डिप्लॉय कर रहा है आपके ऐप्लिकेशन की सूची में शामिल है. React डेवलपर टूल की मदद से इसकी जांच की जा सकती है एक्सटेंशन चुनें.
WordPress
कई WordPress प्लगिन की मदद से साइट के स्टाइल को जोड़ने, छोटा करने, और कंप्रेस करने की सुविधा मिलती है. शायद आपको ये स्पेस भी चाहिए ताकि हो सके, तो काट-छांट करने की इस प्रक्रिया को पहले ही बिल्ड प्रोसेस के ज़रिए पूरा कर लें.