5 tips for super-fast CSS

Jan 27, 2026
कैसे करना है

क्या आपने अपनी साइट के सीएसएस के आकार के बारे में सोचा है? यदि आपकी स्टाइल शीट गुब्बारा हो रही है, तो यह पेज प्रतिपादन में देरी हो सकती है।

  • 16 शीर्ष सीएसएस एनीमेशन उदाहरण
    • [2 9]

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

    एक जटिल साइट मिली? आपको सही की जरूरत है वेब होस्टिंग सर्विस। या, यदि आप किसी भी फ्यूज के बिना साइट बनाना चाहते हैं, तो कोशिश करें वेबसाइट निर्माता ।

    01. उथले चयनकर्ताओं का उपयोग करें

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

    nav ul li.nav-item

    यह अधिक संक्षेप में व्यक्त किया जा सकता है:

    [4 9]

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

    आदर्श रूप से, आप चुनिंदा चुनिंदा उथले के रूप में चाहते हैं, लेकिन इसका मतलब यह नहीं है कि आपको सब कुछ हड्डी तक कटौती करनी चाहिए। कभी-कभी आपको घटकों का विस्तार करने के लिए अतिरिक्त विशिष्टता की आवश्यकता होती है। सही संतुलन पर हमला, लेकिन व्यावहारिक भी हो।

    02. शॉर्टेंड गुणों का उपयोग करें

    Using shorthand CSS will speed up your site

    [6 9] शॉर्टेंड सीएसएस का उपयोग आपकी साइट को तेज करेगा

यह सामान्य ज्ञान की तरह लगता है, लेकिन आप आश्चर्यचकित होंगे कि कितनी बार लंबे समय तक गुणों को अनावश्यक रूप से उपयोग किया जाता है। यहां उपयोग में कुछ लॉन्गहैंड गुणों का एक उदाहरण दिया गया है: 

 फ़ॉन्ट आकार: 1.5rem;
लाइन-ऊंचाई: 1.618;
फ़ॉन्ट-परिवार: "एरियल", "हेल्वेटिका", सैन्स-सेरिफ़;

यह बहुत सी सीएसएस है! चलो सुव्यवस्थित है: 

 फ़ॉन्ट: 1.5rem / 1.618 "एरियल", "हेल्वेटिका", सैन्स-सेरिफ़;

फ़ॉन्ट शॉर्टेंड संपत्ति एक आसान एक लाइनर में कई घोषणाओं को घुलती है जो बहुत कम स्थान लेती है।

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

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

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

क्या होगा यदि आपको कैस्केड में एक मूल्य को आगे बढ़ाने की आवश्यकता है? उदाहरण के लिए, मान लें कि आपके पास एक शीर्षक तत्व है जिसे बड़े डिस्प्ले के लिए अपने फ़ॉन्ट आकार को बदलने की आवश्यकता है।

इस मामले में, आपको अधिक विशिष्ट उपयोग करना चाहिए फ़ॉन्ट आकार इसके बजाय संपत्ति: 

 एच 1 {
    फ़ॉन्ट: 1.5rem / 1.618 "एरियल", "हेल्वेटिका", सैन्स-सेरिफ़;
}
@media (न्यूनतम चौड़ाई: 60 रेम) {
    H1 {
        फ़ॉन्ट आकार: 2rem;
    }
}

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

03. प्रीलोड संसाधन संकेत का उपयोग करें

प्रीलोड संसाधन संकेत ब्राउज़र को आपकी साइट के सीएसएस को लोड करने पर एक हेड शुरू कर सकता है। प्रीलोड संसाधन संकेत ब्राउज़र को एक संपत्ति के लिए प्रारंभिक लापरवाही शुरू करने के लिए कहता है।

आप इसे एक के रूप में सेट कर सकते हैं & lt; लिंक & gt; HTML में टैग:

<पूर्व भाषा = "एचटीएमएल"> <कोड> & lt; लिंक rel = "preload" href = "/ css / styles.css" as = "शैली" & gt;

या आपके सर्वर कॉन्फ़िगरेशन में HTTP शीर्षलेख के रूप में:

<पूर्व भाषा = "http"> लिंक: & lt; /css/styles.css> ;; rel = preload; जैसा = शैली

इन दोनों परिदृश्यों में, प्रीलोड ब्राउज़र को लोडिंग पर एक सिर शुरू करता है /css/styles.css । का उपयोग करते हुए प्रीलोड एक HTTP हेडर में बेहतर है, क्योंकि इसका मतलब है कि ब्राउज़र प्रतिक्रिया हेडर में पहले संकेत की खोज करेगा, बाद में प्रतिक्रिया शरीर में बाद में।

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

सर्वर पुश HTTP / 1 पर उपलब्ध नहीं है। हालांकि, उपयोग कर प्रीलोड एक HTTP / 1 वातावरण में अभी भी प्रदर्शन में सुधार कर सकते हैं।

04. CSSCSS के साथ अनावश्यकता

csscss will analyse any CSS files you give it and let you know which rulesets have duplicated declarations

[6 9] सीएसएससीएसएस किसी भी सीएसएस फाइलों का विश्लेषण करेगा जो आप इसे देते हैं और आपको बताएंगे कि कौन से नियमों में डुप्लिकेट घोषणाएं हैं

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

रूबी उपयोगकर्ता इसे स्थापित कर सकते हैं:

<पूर्व भाषा = "रूबी"> <कोड> जेम स्थापित CSSCSS

एक बार स्थापित होने के बाद, आप इस तरह के अनावश्यकताओं के लिए अपने सीएसएस की जांच कर सकते हैं:

<पूर्व भाषा = "रूबी"> csscss -v styles.css

यह कमांड सूचीबद्ध करता है जो चयनकर्ता नियम साझा करते हैं जिन्हें आप अंतरिक्ष को बचाने के लिए डुप्लिकेट कर सकते हैं: 

 {एच 1} और {पी} शेयर 3 घोषणाएं
  - रंग: # 000
  - लाइन-ऊंचाई: 1.618
  - मार्जिन: 0 0 1.5 रेम

आप एक चयनकर्ता के तहत डुप्लिकेट नियमों को स्थानांतरित कर सकते हैं: 

 एच 1, पी {
    रंग: # 000;
    लाइन-ऊंचाई: 1.618;
    मार्जिन: 0 0 1.5rem;
}

आप आश्चर्यचकित होंगे कि यह प्रक्रिया बड़ी परियोजनाओं में कितनी जगह बचा सकती है। उपयोग --मदद अधिक आदेश देखने का विकल्प आप चीजों को आगे बढ़ाने के लिए उपयोग कर सकते हैं।

05. CSSNANO के साथ अतिरिक्त मील जाओ

[18 9]

[1 9 5] [1 9 6] [1 9 7]

[6 9] Cssnano आपके अच्छी तरह से स्वरूपित सीएसएस लेता है और इसे कई केंद्रित अनुकूलन के माध्यम से चलाता है

शीर्ष पर चेरी के लिए, आप उपयोग कर सकते हैं [20 9] Cssnano

- एक नोड और postcss-निर्भर उपकरण। Cssnano न केवल सीएसएस को छोटा करता है, यह कई केंद्रित अनुकूलता बनाता है जो आपके सीएसएस को और भी कम कर सकते हैं। एनपीएम के साथ इसे अपने सिस्टम पर स्थापित करें: 
 एनपीएम I -G CSSNANO-CLI

फिर अपने CSS को अनुकूलित करने के लिए इसका उपयोग करें: 

 Cssnano styles.css अनुकूलित-styles.css

यदि रनिंग कमांड एड हॉक आपकी शैली नहीं है, तो आप एक बिल्ड सिस्टम के साथ CSSNANO को स्वचालित कर सकते हैं। यहां एक gulpfile में Cssnano का उपयोग करने का तरीका बताया गया है: 

 कंस्क गल्प = आवश्यकता ("गुलप");
कॉन्स पोस्टसीएसएस = आवश्यकता ("गुलप-पोस्टसीएसएस");
कॉन्स CSSNANO = आवश्यकता ("CSSNANO");

const buildcss = () = & gt; {
    वापस gulp.src ("css / styles.css")
        .pipe (postcss ([cssnano ()])
        .pipe (gulp.dest ("CSS / अनुकूलित"));
};
कॉन्स वॉच = () = & gt; {
    gulp.watch ("सीएसएस / styles.css", buildcss);
};
exports.buildcss = buildcss;
exports.watch = घड़ी;

buildcss कार्य आपके द्वारा लिखे गए सीएसएस को पढ़ता है CSS / STYLES.CSS , फिर अनुकूलित आउटपुट को पाइप करता है सीएसएस / अनुकूलित निर्देशिका। घड़ी कार्य बंद हो जाता है buildcss जब भी परिवर्तन होता है CSS / STYLES.CSS ।

घड़ी तब टर्मिनल में टर्मिनल में लागू किया जा सकता है: 

 गल्प वॉच

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

अपनी वेबसाइट पृष्ठों को सहेजना चाहते हैं? पीडीएफ के रूप में निर्यात करें और विश्वसनीय में सहेजें घन संग्रहण ।

यह लेख मूल रूप से दिखाई दिया जाल , वेब डिजाइनरों के लिए दुनिया की अग्रणी पत्रिका। यहां सदस्यता लें ।

संबंधित आलेख:

  • सीएसएस प्रदर्शन संपत्ति को समझना
  • सीएसएस एनीमेशन का नया फ्रंटियर
  • सीएसएस का उपयोग करके जटिल लेआउट कैसे बनाएं
    • [2 9]

कैसे करना है - सर्वाधिक लोकप्रिय लेख

How to use cloud storage as a creative

कैसे करना है Jan 27, 2026

(छवि क्रेडिट: पिक्साबे से जन Vašek) [1 9] आपको क्ला�..

वास्तविकता कैप्चर के साथ 3 डी स्कैन कैसे बनाएं

कैसे करना है Jan 27, 2026

(छवि क्रेडिट: फिल नोलन) [1 9] रियलिटी कैप्चर अपन..

How to use Smart layers in Photoshop

कैसे करना है Jan 27, 2026

एक उदाहरण में दोहराए जाने वाले डिज़ाइन और पैटर्न ..

Create ripple effects with PixiJS

कैसे करना है Jan 27, 2026

ऐसे कई रोचक प्रभाव हैं जिन्हें सगाई बढ़ाने के लिए..

Make your characters pop with colour and light

कैसे करना है Jan 27, 2026

मुझे वास्तव में रंग में काम करना पसंद है, चाहे वह अ..

How to mix a gouache palette

कैसे करना है Jan 27, 2026

गौचे पानी के रंग की तुलना में अधिक क्षमाशील है, ले�..

तेलों में अपने ब्रशस्ट्रोक में सुधार

कैसे करना है Jan 27, 2026

तेल पेंट्स मजबूत और रोचक ब्रशवर्क को प्राप्त करने के लिए आदर्श माध्यम प्�..

Make a hi-fidelity prototype in Atomic

कैसे करना है Jan 27, 2026

एक स्थिर मॉकअप या फ्लैट फ़ाइल ड्राइंग टूल के भीतर..

श्रेणियाँ