कैसे सीएसएस में सबसे अच्छा लागू करने के लिए?

यह लेख आपको Minify In नामक विषय से परिचित कराएगा और प्रक्रिया में भी आप एक विस्तृत व्यावहारिक प्रदर्शन देते हैं। इस लेख में निम्नलिखित बिंदुओं को शामिल किया जाएगा,

• क्या है मिनिमाइजेशन?
  
• क्यों जरूरी है मिनिमाइजेशन?
  
• आप CSS, JS, HTML कोड को कैसे छोटा करते हैं?
  
• आपको कब करना चाहिए?
  
• खनन के लाभ?

जैसा कि नाम से हमें पता चलता है कि, फ़ाइल के आकार को छोटा करने के बारे में मिनिमाइजेशन है। कोड बेस में, हमारे पास HTML, CSS या जावास्क्रिप्ट फ़ाइलों को छोटा करने की स्वतंत्रता है। यहां, हम CSS फ़ाइल को छोटा करने के बारे में चर्चा करेंगे।

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

लेकिन पूरी प्रक्रिया में, हम तार को ढीला करते हैं कि हमारी फ़ाइल का आकार बढ़ रहा है जो बदले में वेबसाइट लोडिंग समय को बढ़ाता है। विशेष रूप से उन वेबसाइटों के साथ जिनमें कार्यात्मकता और ऐड-ऑन का एक बड़ा हिस्सा है, एक लंबा कोड आधार बस वेबसाइट को बदतर बनाता है।

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

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

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

सक्षम करता है, छोटा करता है ।।

Minify CSS पर इस लेख के साथ आगे बढ़ना

क्या है मिनिमाइजेशन ?

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

• व्हाट्सएप के पात्र
• नई लाइन के पात्र
• सीमांकक ब्लॉक करें
• टिप्पणियाँ
• लघु नामकरण

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

कोड की पठनीयता पूरी तरह से अनन्य है कि मशीन क्या समझती है। वेब ब्राउज़र को समझने और चलाने के लिए वर्णों के बीच एक अतिरिक्त रिक्ति की आवश्यकता नहीं होती है। इसलिए, उन्हें कम करने की कोशिश करें और CSS और HTML कोड को छोटा करें।

एक उदाहरण लेते हैं:

प्राथमिकता कतार c ++ लागू करें

#myContent {फ़ॉन्ट-परिवार: मोंटसेराट} #myContent {फ़ॉन्ट-आकार: 90%}
मेरे सीएसएस को छोटा करें
 

ऑरिजिनल और मिनिफायड फाइल में लगभग 48% का अंतर है। 178 बाइट्स से कम। मिनिमेशन के बाद

#myContent {font-family: Arialfont-size: 90%}
हैलो वर्ल्ड!
 

Minify CSS पर इस लेख के साथ आगे बढ़ना

क्यों मिनिमाइजेशन आवश्यकता है?

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

Minify CSS पर इस लेख के साथ आगे बढ़ना

तुम कैसे हो छोटा करना CSS, JS, HTML कोड?

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

CSSminifier.com: उपयोग करने के लिए एक अत्यंत सरल उपकरण। बस बाईं ओर दिए गए कोड को कॉपी करें, मिनिमाइज्ड फाइल जनरेट करें, और इसे डाउनलोड करें। छोटा फ़ाइल में एक एक्सटेंशन .min होगा।

आपकी सीमांकित सीएसएस फ़ाइल में extension.min.css का विस्तार होगा।

Smallseotools.com: या तो अपना कोड कॉपी करें या अपनी कोड फ़ाइल अपलोड करें। यह आपके कोड को छोटा करेगा और आपको इसे कॉपी या डाउनलोड करने देगा।

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

किसी डेवलपर के लिए यह समझना आसान होता है कि फाइल कब बनाई जाए और कब नहीं। एक छोटा फ़ाइल में एक एक्सटेंशन .min होगा।

Minify CSS पर इस लेख के साथ आगे बढ़ना

आपको कब करना चाहिए?

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

के लाभ मिनिमाइजेशन ?

फ़ाइल आकार में कमी: अतिरिक्त रिक्ति को हटाकर, चर नामों को कम करने और टिप्पणियों को हटाने से फ़ाइल का आकार लगभग 30-60% कम हो जाता है। तेज़ लोडिंग: नेटवर्क पर भेजने के लिए कम डेटा के साथ, वेबसाइट पहले की तुलना में तेज़ी से लोड होती है। कम बैंडविड्थ की लागत: जब अनावश्यक डेटा को हटा दिया जाता है, तो बैंडविड्थ की आवश्यकता बहुत कम होती है और यही लागत होती है।

याद रखने वाली चीज़ें:

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

क्या यह संपीड़न के समान है?

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

उदाहरण:

न्यूनतम करने से पहले:

पोर्टफोलियो
 
घर
 
 

न्यूनतम के बाद:

पोर्टफोलियो
घर

कोड निश्चित रूप से मानव के लिए पढ़ना और समझना कठिन है, लेकिन रेंडर करने के लिए मशीन के लिए समान रूप से प्रशंसनीय है। एक मशीन वास्तव में कोड और रिक्ति की सुंदरता के बारे में परवाह नहीं करती है, यह समझती है और तदनुसार काम करती है।

Minification तकनीक से काफी प्रभावित हुए?

फिर अपने लिए प्रयास करें। अपनी फ़ाइल का बोझ कम करें और अपनी वेबसाइट को सभी उपयोगकर्ताओं के लिए स्वतंत्र रूप से चलने दें!

यह हमें इस लेख के अंत में Minify In CSS पर लाता है।

यदि आप वेब-विकास के बारे में अधिक जानने में रुचि रखते हैं, तो देखें Edureka द्वारा। वेब डेवलपमेंट सर्टिफिकेशन ट्रेनिंग आपको HTML5, CSS3, ट्विटर बूटस्ट्रैप 3, jQuery और Google API का उपयोग करके प्रभावशाली वेबसाइट बनाने और इसे अमेज़ॅन सिंपल स्टोरेज सर्विस (S3) में तैनात करने में मदद करेगी।

यदि आप अभी भी रुचि रखते हैं यदि आपके कोई प्रश्न हैं, तो आप इसे इस 'Minify In CSS' ब्लॉग के टिप्पणी अनुभाग में पोस्ट कर सकते हैं, और हम जल्द से जल्द आपके पास वापस आ जाएंगे।