सीएसएस कम करें

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

गैर-मिनिफ़ाइड सीएसएस लोड हो रही है

इस सीएसएस ब्लॉक पर एक नज़र डालें:

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

/* all titles need to have the same font, color and background */
h1 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

h2 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

इस कॉन्टेंट को पढ़ना आसान है. इसमें ज़रूरी फ़ाइल से बड़ी फ़ाइल बनाई गई है.

• यह इंडेंटेशन के लिए स्पेस का इस्तेमाल करता है और इसमें टिप्पणियां होती हैं. ब्राउज़र इन टिप्पणियों को अनदेखा कर देता है, ताकि उन्हें हटाया जा सके.
• <h1> और <h2> एलिमेंट की स्टाइल एक जैसी है: इनके बारे में अलग-अलग एलान करने के बजाय: "h1 {...} h2 {...}" को "h1, h2{...}" के तौर पर दिखाया जा सकता है.
• background-color, #000000 को सिर्फ़ #000 के तौर पर दिखाया जा सकता है.

ये बदलाव करने के बाद, आपको उन ही स्टाइल का ज़्यादा छोटा वर्शन मिलेगा:

body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}

शायद आप इस तरह के सीएसएस न लिखना चाहें. इसके बजाय, हमेशा की तरह सीएसएस लिखें और बिल्ड प्रोसेस में काट-छांट करने का एक चरण जोड़ें. इस गाइड में, इसे बनाने का तरीका बताया गया है. इसके लिए, एक लोकप्रिय बिल्ड टूल का इस्तेमाल किया जा सकता है: webpack.

मापें

आपको उस साइट पर सीएसएस मिनीिफ़िकेशन लागू करना होगा जिसका इस्तेमाल अन्य गाइड में किया गया है: फ़ैव किटीज़. इस साइट के इस वर्शन में, शानदार सीएसएस लाइब्रेरी का इस्तेमाल किया गया है: animate.css. इस वर्शन का मकसद, किसी बिल्ली xyz के लिए वोट करने पर, पेज के अलग-अलग एलिमेंट को ऐनिमेट करना है.

सबसे पहले, आपको यह समझना होगा कि इस फ़ाइल को छोटा करने के बाद, मिलने वाला अवसर क्या होगा:

1. मेज़रमेंट पेज खोलें.
2. यूआरएल डालें: https://fav-kitties-animated.glitch.me और ऑडिट चलाएं पर क्लिक करें.
3. रिपोर्ट देखें पर क्लिक करें.
4. परफ़ॉर्मेंस पर क्लिक करें और ऑपर्च्यूनिटी सेक्शन पर जाएं.

इस रिपोर्ट से पता चलता है कि animate.css फ़ाइल से 16 केबी तक को सेव किया जा सकता है:

अब सीएसएस के कॉन्टेंट की जांच करें:

1. Chrome में Fav Kities साइट खोलें. (Glitch सर्वर को पहली बार जवाब देने में कुछ समय लग सकता है.)
2. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
3. नेटवर्क टैब पर क्लिक करें.
4. सीएसएस फ़िल्टर पर क्लिक करें.
5. कैश मेमोरी बंद करें चेकबॉक्स को चुनें.
6. ऐप्लिकेशन को फिर से लोड करें.

पेज पर दो सीएसएस फ़ाइलों का अनुरोध किया जा रहा है. ये फ़ाइलें 1.9 केबी और 76.2 केबी की हैं.

1. animate.css पर क्लिक करें.
2. फ़ाइल का कॉन्टेंट देखने के लिए, जवाब टैब पर क्लिक करें.

ध्यान दें कि स्टाइलशीट में खाली सफ़ेद जगहों और इंडेंट के लिए वर्ण शामिल हैं:

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

webpack के साथ सीएसएस मिनिफ़िकेशन

ऑप्टिमाइज़ेशन का इस्तेमाल शुरू करने से पहले, यह समझने में कुछ समय लें कि Fav Kitters साइट के लिए, बिल्ड प्रोसेस कैसे काम करती है:

डिफ़ॉल्ट रूप से, जो JS बंडल वेबपैक बनाता है उसमें सीएसएस फ़ाइलों का कॉन्टेंट इनलाइन होता है. हम अलग-अलग सीएसएस फ़ाइलें मैनेज करना चाहते हैं, इसलिए हम दो सहायक प्लगिन का इस्तेमाल कर रहे हैं:

• mini-css-extract-plugin हर स्टाइल शीट को उसकी अपनी फ़ाइल में एक्सट्रैक्ट करेगा. यह बिल्ड प्रोसेस के एक चरण के तौर पर काम करता है.
• webpack-fix-style-only-entries का इस्तेमाल, Wepback 4 में किसी समस्या को ठीक करने के लिए किया जाता है. ऐसा इसलिए किया जाता है, ताकि webpack-config.js में दी गई हर सीएसएस फ़ाइल के लिए एक और JS फ़ाइल जनरेट न हो.

अब आपको प्रोजेक्ट में कुछ बदलाव करने होंगे:

1. Glitch में फ़ेव किटीज़ प्रोजेक्ट खोलें.
2. सोर्स देखने के लिए, सोर्स देखें दबाएं.
3. प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
4. Terminal पर क्लिक करें (ध्यान दें: अगर टर्मिनल बटन नहीं दिखता है, तो आपको फ़ुलस्क्रीन विकल्प का इस्तेमाल करना पड़ सकता है).

इससे मिलने वाले सीएसएस को कम करने के लिए, आप optimize-css-assets-webpack-plugin का इस्तेमाल करें:

1. Glitch कंसोल में, npm install --save-dev optimize-css-assets-webpack-plugin चलाएं.
2. refresh चलाएं, ताकि बदलाव Glitch एडिटर के साथ सिंक हो जाएं.

इसके बाद, Glitch एडिटर पर वापस जाएं, webpack.config.js फ़ाइल खोलें, और नीचे दिए गए बदलाव करें:

फ़ाइल की शुरुआत में मॉड्यूल लोड करें: js const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

इसके बाद, प्लगिन ऐरे में प्लगिन का कोई इंस्टेंस पास करें: js plugins: [ new HtmlWebpackPlugin({template: "./src/index.html"}), new MiniCssExtractPlugin({filename: "[name].css"}), new FixStyleOnlyEntriesPlugin(), new OptimizeCSSAssetsPlugin({}) ] बदलाव करने के बाद, प्रोजेक्ट का फिर से बनाया जाना ट्रिगर हो जाएगा. ऐसा होने पर, webpack.config.js ऐसा दिखेगा:

इसके बाद, परफ़ॉर्मेंस टूल की मदद से इस ऑप्टिमाइज़ेशन के नतीजे की जांच की जाएगी.

पुष्टि करें

• साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.

अगर आप पिछले चरण में खो गए हैं, तो साइट का ऑप्टिमाइज़ किया गया वर्शन खोलने के लिए यहां क्लिक करें.

फ़ाइलों के साइज़ और कॉन्टेंट की जांच करने के लिए:

1. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
2. नेटवर्क टैब पर क्लिक करें.
3. सीएसएस फ़िल्टर पर क्लिक करें.
4. अगर कैश मेमोरी बंद करें चेकबॉक्स पहले से बंद नहीं है, तो उसे चुनें.
5. ऐप्लिकेशन को फिर से लोड करें.

इन फ़ाइलों की जांच की जा सकती है और यह देखा जा सकता है कि नए वर्शन में कोई खाली सफ़ेद जगह नहीं है. दोनों फ़ाइलें बहुत छोटी हैं, खास तौर पर, animate.css को ~26% में कम कर दिया गया है, जिससे ~20KB की बचत हुई है!

आखिरी चरण में:

1. मेज़रमेंट पेज खोलें.
2. ऑप्टिमाइज़ की गई साइट का यूआरएल डालें.
3. रिपोर्ट देखें पर क्लिक करें.
4. परफ़ॉर्मेंस पर क्लिक करें और ऑपर्च्यूनिटी सेक्शन देखें.

इस रिपोर्ट में, अब "Minify CSS" को "ऑपर्च्यूनिटी" के तौर पर नहीं दिखाया गया है. इसे अब "पास्ड ऑडिट" सेक्शन में भेज दिया गया है:

सीएसएस फ़ाइलें रेंडर ब्लॉक करने वाले रिसॉर्स होती हैं. इसलिए, अगर बड़ी सीएसएस फ़ाइलों का इस्तेमाल करने वाली साइटों पर काट-छांट करने की सुविधा लागू की जाती है, तो आपको First कॉन्टेंटफ़ुल पेंट जैसी मेट्रिक में सुधार दिखेंगे.

अगले चरण और संसाधन

इस गाइड में, हमने वेबपैक के साथ सीएसएस की काट-छांट के बारे में जानकारी दी है. हालांकि, दूसरे बिल्ड टूल के साथ भी इसी तरीके को अपनाया जा सकता है. जैसे कि Gulp के लिए gulp-clean-css या Grunt के लिए grunt-consrib-cssmin.

छोटा करने की सुविधा, दूसरी तरह की फ़ाइलों पर भी लागू हो सकती है. JS को छोटा करने के टूल और कंप्रेस करने जैसी कुछ सहायक तकनीकों के बारे में ज़्यादा जानने के लिए, नेटवर्क पेलोड को छोटा और कंप्रेस करने से जुड़ी गाइड देखें.