पेज लोडिंग को गति देने के लिए 7 सीएसएस ऑप्टिमाइज़ेशन टिप्स

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



अनुवादक से ध्यान दें
एक बड़ा अनुरोध यह है कि जिन त्रुटियों को नोट किया गया है, उनके लिए कृपालु होना और उन्हें रिपोर्ट करना।
आपका धन्यवाद

1. प्रदर्शन बाधाओं का पता लगाएं

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

उदाहरण के लिए, फ़ायरफ़ॉक्स ब्राउज़र के "डेवलपर टूल" में, आप "नेटवर्क" टैब का उपयोग करके अपने पृष्ठ पर लोड की गई सभी सीएसएस फ़ाइलों के आकार और लोडिंग समय का पता लगा सकते हैं। आप यह भी जांच सकते हैं कि कैशिंग के साथ या उसके बिना आपकी सीएसएस फाइलें कितनी तेजी से लोड होती हैं। चूंकि यह बाहरी CSS प्रदर्शित करता है, जैसे कि Google फ़ॉन्ट्स फ़ॉन्ट फ़ाइलें और तृतीय-पक्ष CDN सर्वर से डाउनलोड की गई CSS फाइलें, आप कई स्रोत पा सकते हैं, जिनके बारे में आपको पहले पता भी नहीं था।



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

2. सीएसएस फ़ाइलों को छोटा और संपीड़ित करें

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

CSS Minify जैसी ऑनलाइन सेवाएं हैं जो आपको एक साधारण फ़ाइल में कॉपी करके CSS फ़ाइल को छोटा करने की अनुमति देती हैं। इस तरह की सेवा छोटी परियोजनाओं के साथ अच्छी तरह से काम कर सकती है। हालांकि, उनका उपयोग करना बड़ी परियोजनाओं के साथ स्थितियों में भारी और समय लेने वाली हो सकती है जिसमें कई सीएसएस फाइलें शामिल हैं। ऐसी स्थितियों में, स्वचालित समाधानों को वरीयता देना बेहतर है।

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

3. फ्लेक्सबॉक्स और सीएसएस ग्रिड का उपयोग करें

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

पुराने दृष्टिकोणों का उपयोग करते हुए, आपको ऐसी सरल चीजों के लिए भी कई ट्रिक्स और ट्रिक्स का उपयोग करना होगा जैसे कि तत्वों को लंबवत रूप से केंद्रित करना। हालाँकि, यह Flexbox और CSS ग्रिड पर लागू नहीं होता है। हालाँकि नए दृष्टिकोणों को सीखने में कुछ समय लग सकता है, यह इसके लायक है क्योंकि आपकी CSS फाइलों का आकार बहुत छोटा होगा। यह फ्लेक्सबॉक्स के लिए विशेष रूप से सच है, जिसमें वर्तमान में बहुत अच्छा ब्राउज़र समर्थन (वैश्विक स्तर पर 98.3%) है।



यद्यपि CSS ग्रिड ब्राउज़रों द्वारा इतनी अच्छी तरह से समर्थित नहीं है (विश्व स्तर पर 92.03%), आप पहले से ही इस दृष्टिकोण का उपयोग कर सकते हैं यदि आपको पुराने ब्राउज़रों का समर्थन करने की आवश्यकता नहीं है या एक कमबैक को लागू करने के लिए तैयार हैं।

4. @import लिंक नियम के बजाय <लिंक> टैग का उपयोग करें

CSS फाइलों को वेब पेज में लोड करने की दो मुख्य विधियाँ हैं:

1. <head> टैग का उपयोग करके HTML पृष्ठों को <head> अनुभाग में जोड़ें
2. @import सीएसएस घोषणा का उपयोग करके अन्य स्टाइलशीट से आयात

आपको मुख्य सीएसएस फ़ाइल के शीर्ष पर @import को जोड़ने की आवश्यकता है। ज्यादातर मामलों में, इस दृष्टिकोण का उपयोग छोटे संसाधनों जैसे फोंट और अन्य डिजाइन तत्वों को लोड करने के लिए किया जाता है। पहली नज़र में, यह एक अच्छे समाधान की तरह लग सकता है, हालांकि, ब्राउज़र को अतिरिक्त स्टाइलशीट को लोड करने के लिए अधिक समय की आवश्यकता होती है, ऐसी स्थिति में जहां HTML पृष्ठ सीधे <लिंक> टैग का उपयोग करके उन्हें लोड करता है।

जब आप HTML पृष्ठ पर एक से अधिक CSS फ़ाइल जोड़ते हैं, तो हमेशा CSS विशिष्टता पर विचार करें। एक सामान्य शैली पत्रक के साथ शुरू करें, और फिर अधिक विशिष्ट निर्दिष्ट करें। आपको इस सिद्धांत का पालन करने की आवश्यकता है क्योंकि बाद में जोड़े गए स्टाइलशीट पिछले सीएसएस फाइलों के नियमों को ओवरराइड करते हैं। उदाहरण के लिए जब CSS फाइलें सही क्रम में जोड़ी जाती हैं:

 <link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="page.css"> <link rel="stylesheet" href="component.css"> 

5. छवियों के बजाय ग्रेडिएंट और एसवीजी का उपयोग करें

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

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

निम्न नियम, उदाहरण के लिए, एक सुंदर ढाल पृष्ठभूमि बनाता है जो किसी भी छवि की तुलना में बहुत तेजी से लोड होता है:

 div { background: linear-gradient(45deg, lightgreen, royalblue); } 

अधिक जटिल ग्रेडिएंट्स और टेक्सचर के लिए, आप जेनेरेटर्स जैसे CSSmatic (नीचे दी गई छवि में) और ColorZilla का उपयोग कर सकते हैं



ग्रेडिएंट के अलावा, आप पारंपरिक जेपीजी और पीएनजी छवियों को स्केलेबल वेक्टर ग्राफिक्स (एसवीजी) से भी बदल सकते हैं। न केवल यह तेजी से लोड होता है, बल्कि आपको छवि का केवल एक संस्करण डाउनलोड करने की भी आवश्यकता होती है। यह इस तथ्य के कारण है कि एसवीजी छवि को इसकी वेक्टर प्रकृति के कारण गुणवत्ता के नुकसान के बिना किसी भी आकार तक बढ़ाया जा सकता है। इसके अलावा, आप नियमित HTML फ़ाइल की तरह, CSS के साथ SVG स्टाइल भी कर सकते हैं।

6. नियम से बचें!

यद्यपि महत्वपूर्ण नियम कुछ स्थितियों में एक वास्तविक खोज हो सकते हैं, लेकिन इसका उपयोग केवल अंतिम उपाय के रूप में किया जाना चाहिए। यह नियम कैस्केड से एक अपवाद फेंकता है। जब आप जोड़ते हैं! तो सीएसएस घोषणा के लिए महत्वपूर्ण है, यह किसी भी अन्य घोषणाओं को ओवरराइड करता है, यहां तक ​​कि जो अधिक विशिष्ट हैं। यहाँ इसका सिंटेक्स है:

 h1 { margin-bottom: 20px !important; } 

यदि सीएसएस में कई महत्वपूर्ण नियम हैं, तो उपयोगकर्ता के ब्राउज़र को कोड में अतिरिक्त जांच करनी होगी, जो आगे पृष्ठ को धीमा कर सकता है। यह कभी नहीं उपयोग करने के लिए अच्छा अभ्यास है! पूरी साइट के लिए महत्वपूर्ण है या एक विषय या प्लगइन बनाते समय। यदि संभव हो, तो इस नियम का उपयोग केवल उन स्थितियों में करें जहां आप तृतीय-पक्ष लाइब्रेरी से CSS को ओवरराइड करना चाहते हैं।

7. सीएसएस रीफैक्टरिंग

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

CSS Refactoring एक बहु-चरण प्रक्रिया है जिसमें आपको अपने CSS कोड के हर पहलू का विश्लेषण करने की आवश्यकता होती है। आपको निम्नलिखित बिंदुओं की जांच करने की आवश्यकता है:

• अप्रयुक्त या डुप्लिकेट सीएसएस नियम या संसाधन हैं
• क्या फ्लेक्सबॉक्स और सीएसएस ग्रिड जैसी अधिक आधुनिक तकनीकों का उपयोग करना संभव है
• बहुत अधिक विशिष्टता का उपयोग किया जाता है (यह दृश्य विशिष्टता कैलकुलेटर का उपयोग करके गणना की जा सकती है)
• क्या CSS फाइलों की संरचना ठीक से व्यवस्थित है (उदाहरण के लिए, बड़ी फ़ाइलों की तुलना में छोटी फ़ाइलों को बनाए रखना आसान है)
• क्या ऑटो-बिल्ड टूल्स का उपयोग शुरू करना इसके लायक है
• और भी बहुत कुछ।

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

इसके अलावा एक संस्करण नियंत्रण प्रणाली जैसे Git का उपयोग करना याद रखें। इस मामले में, अगर कुछ गलत होता है, तो आप कोड के पिछले संस्करण में वापस आ सकते हैं।

संक्षेप में देना

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

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