1,921 रीडिंग

शीर्ष 10 सीएसएस प्रदर्शन युक्तियाँ

द्वारा Nikita Starichenko5m2022/11/14

बहुत लंबा; पढ़ने के लिए

हेलो सब लोग! CSS स्टाइलिंग के बारे में बहुत सारे टिप्स और ट्रिक्स हैं। लेकिन इस लेख में नहीं। आज मैं इस बारे में बात करना चाहता हूं कि सीएसएस का अधिक कुशलता से उपयोग कैसे करें और कैसे करें

Companies Mentioned

featured image - शीर्ष 10 सीएसएस प्रदर्शन युक्तियाँ

हेलो सब लोग! CSS स्टाइलिंग के बारे में बहुत सारे टिप्स और ट्रिक्स हैं। लेकिन इस लेख में नहीं। आज मैं इस बारे में बात करना चाहता हूं कि कैसे सीएसएस का अधिक कुशलता से उपयोग किया जाए और अपने प्लेटफॉर्म को तेज बनाया जाए!

1. सरल चयनकर्ता

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

ऐसा न करें:

 main > div.blog-section + article > * { /* Code here */ }

करना:

 .hero-image { /* Code here */ }

2. क्रिटिकल इनलाइन सीएसएस

आप महत्वपूर्ण CSS नियमों को इनलाइन कर सकते हैं। इससे प्रदर्शन में सुधार होता है:

तह के ऊपर के तत्वों द्वारा उपयोग की जाने वाली आवश्यक शैलियों की पहचान करना (जो पृष्ठ लोड होने पर दिखाई देती हैं)
उस महत्वपूर्ण CSS को अपने <head> . में <style> टैग में इनलाइन करना
रेंडर ब्लॉकिंग से बचने के लिए शेष CSS को एसिंक्रोनस रूप से लोड किया जा रहा है। यह स्टाइलशीट को "प्रिंट" शैली में लोड करके पूरा किया जा सकता है जिसे ब्राउज़र कम प्राथमिकता देता है। पेज लोड होने के बाद जावास्क्रिप्ट इसे "सभी" मीडिया शैली में बदल देता है।

 <style> /* critical styles */ body { font-family: sans-serif; color: #111; } </style> <!-- load remaining styles --> <link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'"> <noscript> <link rel="stylesheet" href="/css/main.css"> </noscript>

3. `@import` . से बचें

@import नियम किसी भी CSS फ़ाइल को दूसरे में शामिल करने की अनुमति देता है। यह छोटे घटकों और फोंट को लोड करने का एक उचित तरीका प्रतीत होता है। लेकिन यह नहीं है।

@import नियमों को नेस्ट किया जा सकता है, इसलिए ब्राउज़र को श्रृंखला में प्रत्येक फ़ाइल को लोड और पार्स करना होगा।

HTML के भीतर कई <link> टैग समानांतर में CSS फाइलों को लोड करेंगे, जो काफी अधिक कुशल है - खासकर HTTP / 2 का उपयोग करते समय।

ऐसा न करें:

 /* main.css */ @import url("style1.css"); @import url("style2.css"); @import url("style3.css");

करना:

 <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="carousel.css">

4. सीएसएस फ़ाइलें प्रीलोड करें

<link> टैग एक वैकल्पिक प्रीलोड विशेषता प्रदान करता है जो HTML में वास्तविक संदर्भ की प्रतीक्षा करने के बजाय तुरंत डाउनलोड शुरू कर सकता है।

 <!-- preload styles --> <link rel="preload" href="/css/main.css" as="style" /> <!-- some code --> <!-- load preloaded styles --> <link rel="stylesheet" href="/css/main.css" />

5. प्रगतिशील प्रतिपादन

एकल साइट-व्यापी सीएसएस फ़ाइल का उपयोग करने के बजाय, प्रगतिशील प्रतिपादन एक ऐसी तकनीक है जो अलग-अलग घटकों के लिए अलग-अलग स्टाइलशीट को परिभाषित करती है। HTML में किसी कंपोनेंट को संदर्भित करने से ठीक पहले प्रत्येक को लोड किया जाता है।

प्रत्येक <link> अभी भी रेंडरिंग को रोकता है, लेकिन कम समय के लिए, क्योंकि फ़ाइल छोटी होती है। पृष्ठ जल्द ही प्रयोग करने योग्य है, क्योंकि प्रत्येक घटक क्रम में प्रस्तुत करता है; शेष सामग्री लोड होने पर पृष्ठ के शीर्ष को देखा जा सकता है।

 <head> <!-- core styles used across components --> <link rel='stylesheet' href='base.css' /> </head> <body> <!-- header component --> <link rel='stylesheet' href='header.css' /> <header>...</header> <!-- primary content --> <link rel='stylesheet' href='content.css' /> <main> <!-- form styling --> <link rel='stylesheet' href='form.css' /> <form>...</form> </main> <!-- header component --> <link rel='stylesheet' href='footer.css' /> <footer>...</footer> </body>

6. मीडिया क्वेरी रेंडरिंग का उपयोग करें

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

 <!-- core styles loaded on all devices --> <link rel="stylesheet" href="core.css"> <!-- served to screens at least 40em wide --> <link rel="stylesheet" media="(min-width: 40em)" href="40em.css"> <!-- served to screens at least 80em wide --> <link rel="stylesheet" media="(min-width: 80em)" href="80em.css">

7. एसवीजी छवियों को अपनाएं

स्केलेबल वेक्टर ग्राफिक्स (एसवीजी) आमतौर पर लोगो, चार्ट, आइकन और सरल आरेखों के लिए उपयोग किए जाते हैं। JPG और PNG बिटमैप जैसे प्रत्येक पिक्सेल के रंग को परिभाषित करने के बजाय, एक SVG XML में रेखाओं, आयतों और वृत्तों जैसे आकृतियों को परिभाषित करता है।

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

एसवीजी उदाहरण:

 <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /> <svg>

एसवीजी उपयोग उदाहरण:

 .mysvgbackground { background: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"><circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /></svg>') center center no-repeat; }

8. सीएसएस के साथ स्टाइल एसवीजी

SVG को सीधे HTML दस्तावेज़ में एम्बेड किया जा सकता है। यह SVG नोड्स को सीधे DOM में जोड़ता है। इसलिए, सभी एसवीजी स्टाइलिंग विशेषताओं को सीएसएस का उपयोग करके लागू किया जा सकता है।

डोम में एसवीजी:

 <body> <svg class="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" /> <svg> </body>

एसवीजी शैलियाँ:

 circle { stroke-width: 1em; } .mysvg { stroke-width: 5px; stroke: #f00; fill: #ff0; }

एम्बेडेड एसवीजी कोड की मात्रा कम हो जाती है और सीएसएस शैलियों का पुन: उपयोग या आवश्यकतानुसार एनिमेटेड किया जा सकता है।

ध्यान दें कि <img> टैग के भीतर या CSS पृष्ठभूमि छवि के रूप में SVG का उपयोग करने का अर्थ है कि वे DOM से अलग हो गए हैं, और CSS स्टाइलिंग का कोई प्रभाव नहीं पड़ेगा।

9. बेस 64 एन्कोडिंग से बचें

आप छवियों को बेस 64 स्ट्रिंग्स में एन्कोड कर सकते हैं, जिसे आप HTML <img> टैग और CSS पृष्ठभूमि में डेटा URI के रूप में उपयोग कर सकते हैं।

यह HTTP अनुरोधों की संख्या को कम करता है, लेकिन यह CSS प्रदर्शन को नुकसान पहुँचाता है:

बेस 64 स्ट्रिंग्स उनके बाइनरी समकक्ष से 30% बड़ी हो सकती हैं।
किसी छवि का उपयोग करने से पहले ब्राउज़र को स्ट्रिंग को डीकोड करना होगा, और
एक छवि पिक्सेल को बदलने से पूरी सीएसएस फ़ाइल अमान्य हो जाती है।

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

ऐसा न करें:

 .background { background-image: url('data:image/jpg;base64,ABC123...'); }

करना:

 .svgbackground { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><circle cx="300" cy="300" r="150" stroke-width="3" stroke="#f00" fill="#ff0" /></svg>'); }

10. लघु सुझाव

छवियों को सीएसएस प्रभावों से बदलें - सीएसएस कोड का उपयोग करके "छवि" को परिभाषित करने से काफी कम बैंडविड्थ का उपयोग होता है और बाद में संशोधित या चेतन करना आसान होता है।
आधुनिक लेआउट तकनीकों का उपयोग करें - फ्लेक्सबॉक्स और ग्रिड ।
CSS एनिमेशन का उपयोग करें - ट्रांज़िशन और एनिमेशन हमेशा JavaScript से तेज़ होंगे।
महँगे गुणों से बचें - कुछ CSS को दूसरों की तुलना में अधिक संसाधन की आवश्यकता होती है।
1. border-radius
2. box-shadow
3. text-shadow
4. opacity
5. transform
6. filter
7. position: fixed
8. backdrop-filter
9. background-blend-mode