आपके सीएसएस को अनुकूलित करने और अपनी साइट को गति देने के 21 तरीके

Sep 14, 2025

कैसे करना है

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

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

• मनोरंजन के लिए 19 कूल सीएसएस एनीमेशन उदाहरण [2 9]

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

निम्नलिखित कदम हमें सीएसएस अनुकूलन की दुनिया के माध्यम से एक यात्रा पर ले जाएगा। प्रत्येक एकल को सीधे आपके प्रोजेक्ट पर लागू नहीं किया जा सकता है, लेकिन उन्हें ध्यान में रखें। कुछ आसान चाहते हैं? आज़माएं वेबसाइट निर्माता [2 9] ।

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

[4 9]

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

 पी {मार्जिन-टॉप: 1 पीएक्स;
    मार्जिन-राइट: 2 पीएक्स;
    मार्जिन-नीचे: 3 पीएक्स;
    मार्जिन-बाएं: 4px; }

पी {मार्जिन: 1 पीएक्स 2 पीएक्स 3 पीएक्स 4 पीएक्स; } 

02. अप्रयुक्त CSS को ढूंढें और हटाएं

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

03. इसे अधिक आरामदायक फैशन में करें

[9 3]

लाइन-बाय-लाइन विश्लेषण के माध्यम से नेविगेटिंग जरूरी नहीं है। क्रोम का वेब प्रदर्शन लेखा परीक्षा समान जानकारी देता है - बस इसे टूलबार से खोलें, देखें और जीटी; डेवलपर और जीटी; डेवलपर उपकरण & gt; ऑडिट और इसे चलाने दें। जब किया जाता है, तो समस्याग्रस्त तत्वों की एक सूची पॉप अप होगी।

04. समस्याओं से अवगत रहें

ध्यान रखें कि एक सीएसएस का एक स्वचालित विश्लेषण हमेशा त्रुटियों का कारण बन सकता है। अपनी सीएसएस फाइलों को कम से कम लोगों के साथ बदलने के बाद पूरी वेबसाइट का एक पूर्ण परीक्षण करें - एक कभी नहीं जानता कि अनुकूलक के कारण क्या गलतियां हुईं। और आगे बढ़ना, सभ्य वेब होस्टिंग [2 9] आपकी साइट में क्रीज़ को बाहर निकालने में आपकी मदद कर सकता है।

05. इनलाइन महत्वपूर्ण सीएसएस

लापरवाही के कारण बाहरी स्टाइलशीट लागत का समय - किसी को भी 'अस्थिर सामग्री का फ्लैश' याद है? इसलिए कोड का सबसे महत्वपूर्ण बिट्स हेडर टैग में जा सकते हैं। हालांकि, इसे अधिक नहीं करना सुनिश्चित करें। ध्यान रखें कि मनुष्यों द्वारा रखरखाव कार्यों को निष्पादित करने वाले कोड को भी पढ़ा जाना चाहिए।

 & lt; html & gt;
  & lt; हेड और जीटी;
    & lt; शैली & gt;
      .blue {रंग: नीला;}
    & lt; / शैली & gt;
    & lt; / सिर & gt;
  & lt; शरीर & gt;
    & lt; div class = "नीला" & gt;
      नमस्ते दुनिया!
    & lt; / div & gt; 

06. Antiparallel पार्सिंग परमिट करें

@ आयात आपके सीएसएस कोड में संरचना जोड़ता है। अफसोस की बात है कि लाभ मुफ्त में नहीं हैं: चूंकि आयात घोंसला कर सकते हैं, समानांतर में उन्हें पार्स करना संभव नहीं है। एक और समानांतर तरीका एक श्रृंखला का उपयोग करता है & lt; लिंक & gt; [2 9] टैग, जो ब्राउज़र एक बार में ला सकता है।

 @ आयात यूआरएल ("एसीएसएस");
@ आयात यूआरएल ("बीसीएसएस");
@ आयात यूआरएल ("सीसीएसएस");
v & lt; लिंक REL = "STYLESHEET" HREF = "A.CSS" & gt;
& lt; लिंक REL = "STYLESHEET" HREF = "BCSS" & gt;
& lt; लिंक rel = "stylesheet" href = "c.css" & gt; 

07. CSS के साथ छवियों को बदलें

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

 img {
    -वेबिट-फ़िल्टर: ग्रेस्केल (100%); /* पुराना
सफारी */
    फ़िल्टर: ग्रेस्केल (100%);
} 

08. रंग शॉर्टकट का उपयोग करें

सामान्य ज्ञान सिखाता है कि छह अंकों का रंग वर्णनकर्ता रंगों को व्यक्त करने का सबसे प्रभावी तरीका है। यह मामला नहीं है - कुछ मामलों में, शॉर्टेंड विवरण या रंगीन नाम कम हो सकते हैं।

 लक्ष्य {पृष्ठभूमि-रंग: #FFFFFFF; }
लक्ष्य {पृष्ठभूमि: #fff; } 

09. अनियंत्रित शून्य और इकाइयों को हटा दें

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

 पैडिंग: 0.2em;
मार्जिन: 20.0em;
अवलु: 0 पीएक्स;
पैडिंग: .2em;
मार्जिन: 20em;
अवलु: 0; 

10. अत्यधिक अर्धविराम को हटा दें

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

 पी {
। । ।
फ़ॉन्ट आकार: 1.33EM
} 

11. एक बनावट एटलस का उपयोग करें

प्रोटोकॉल ओवरहेड्स के कारण कई छोटे स्प्राइट्स को लोड करना अक्षम है। सीएसएस स्प्राइट्स छोटी तस्वीरों की एक श्रृंखला को एक बड़ी पीएनजी फ़ाइल में जोड़ती है, जिसे सीएसएस नियमों के माध्यम से अलग किया जाता है। जैसे कार्यक्रम बनावट सृजन प्रक्रिया को काफी सरल बनाएं।

। डाउनलोड करें {
  चौड़ाई: 80 पीएक्स;
  ऊंचाई: 31 पीएक्स;
  पृष्ठभूमि-स्थिति: -160px -160px
}
.download: होवर {
  चौड़ाई: 80 पीएक्स;
  ऊंचाई: 32 पीएक्स;
  पृष्ठभूमि-स्थिति: -80 पीएक्स -160 पीएक्स
} 

12. पीएक्स का पीछा करें

प्रदर्शन बढ़ाने के लिए एक साफ तरीका सीएसएस मानक की विशेषता का उपयोग करता है। एक इकाई के बिना संख्यात्मक मान पिक्सल माना जाता है - पीएक्स को हटाने से प्रत्येक संख्या के लिए दो बाइट्स बचाता है।

 एच 2 {पैडिंग: 0 पीएक्स; मार्जिन: 0 पीएक्स;}
H2 {पैडिंग: 0; मार्जिन: 0} 

13. महंगी गुणों से बचें

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

 सीमा-त्रिज्या
    डब्बे की छाया
    परिवर्तन
    फिल्टर
    : nth- बच्चे
    स्थिति: फिक्स्ड;
    आदि 

14. व्हाइटस्पेस निकालें

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

15. टिप्पणियों को हटा दें

टिप्पणियां भी कंपाइलर को कोई उद्देश्य नहीं देती हैं। डिलीवरी से पहले उन्हें हटाने के लिए एक कस्टम पार्सर बनाएं। न केवल बैंडविड्थ को बचाता है बल्कि यह भी सुनिश्चित करता है कि हमलावरों और क्लोनर्स को हाथ में कोड के पीछे सोच को समझने में कठिन समय है।

16. स्वचालित संपीड़न का उपयोग करें

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

 जावा-jar yuicompressor-xy.z.jar
उपयोग: जावा-jar yuicompressor-xy.z.jar
 [विकल्प] [इनपुट फ़ाइल]
वैश्विक विकल्प
    -ह, --हेल्प इसे प्रदर्शित करता है
 जानकारी
    - टाइप & lt; जेएस | सीएसएस और जीटी; निर्दिष्ट करता है
 इनपुट फ़ाइल का प्रकार 

17. इसे एनपीएम से चलाएं

क्या आपको उत्पाद को node.js में एकीकृत करना चाहिए, यात्रा [1 9 2] npmjs.com/package/yuicompressor

। बुरी तरह से बनाए रखा रिपोजिटरी में रैपर फ़ाइलों और एक जावास्क्रिप्ट एपीआई का एक सेट होता है।

 var कंप्रेसर = आवश्यकता ('Yuicompressor');
कंप्रेसर। ('/ पथ /)
जेएस की फाइल या स्ट्रिंग ', {
// कंप्रेसर विकल्प:
CharSet: 'utf8',
टाइप: 'जेएस', 

18. चेक में सास एट अल रखें

जबकि सीएसएस चयनकर्ता प्रदर्शन लगभग उतना ही महत्वपूर्ण नहीं है जितना कुछ साल पहले (संसाधन देखें), सैस जैसे ढांचे कभी-कभी बेहद जटिल कोड उत्सर्जित करते थे। समय-समय पर आउटपुट फ़ाइलों पर नज़र डालें और परिणामों को अनुकूलित करने के तरीकों के बारे में सोचें। एक टीम के साथ साझा करने के परिणाम मिला? फ़ाइलों को साझा करने योग्य में रखें घन संग्रहण [2 9] ।

• सास क्या है? [2 9]

19. कैशिंग सेट करें

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

20. कैश को बस्ट करें

आने वाले परिवर्तनों के साथ समस्याओं के डर के कारण डिजाइनर अक्सर कैशिंग को नापसंद करते हैं। समस्या के चारों ओर एक साफ तरीके से फ़ाइल नाम के साथ टैग शामिल हैं। अफसोस की बात यह है कि इस चरण के साथ कोड में उल्लिखित योजना हर जगह काम नहीं करती है क्योंकि कुछ प्रॉक्सी 'गतिशील' पथों के साथ फ़ाइलों को कैश करने से इनकार करते हैं।

 & lt; लिंक rel = "stylesheet" href = "style.css? V = 1.2.3" & gt; 

21. मूल बातें मत भूलना

सीएसएस अनुकूलित करना सिर्फ खेल का हिस्सा है। यदि आपका सर्वर HTTP / 2 और GZIP संपीड़न का उपयोग नहीं करता है, तो डेटा ट्रांसमिशन के दौरान बहुत समय गुम हो जाता है। सौभाग्य से, इन दो समस्याओं को ठीक करना आमतौर पर सरल होता है। हमारा उदाहरण आमतौर पर इस्तेमाल किए गए अपाचे सर्वर पर कुछ बदलाव दिखाता है। क्या आपको अपने आप को एक अलग सिस्टम पर ढूंढना चाहिए, बस सर्वर दस्तावेज़ से परामर्श लें।

[23 9] पिको /etc/httpd/conf/httpd.conf AddOutputFilterByType Deflate टेक्स्ट / HTML AddOutputFilterByType Deflate टेक्स्ट / CSS

यह लेख मूल रूप से रचनात्मक वेब डिज़ाइन पत्रिका के अंक 282 में प्रकाशित किया गया था वेब डिजाइनर [2 9] । यहां अंक 282 खरीदें या वेब डिजाइनर की सदस्यता लें ।

संबंधित आलेख: [2 9]

• 10 अद्भुत नई सीएसएस तकनीकें [2 9]
• सबसे अच्छा सीएसएस प्रीप्रोसेसर कौन सा है? [2 9]
• सीएसएस कस्टम गुणों के लिए एक परिचय [2 9]

---

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

How to refine your design portfolio

कैसे करना है Sep 14, 2025

आपके पोर्टफोलियो को बैग में अगली परियोजना प्राप्त करने की कुंजी है, इसलि�..

---

How to draw a nose

कैसे करना है Sep 14, 2025

एक नाक खींचने के लिए मास्टरिंग एक चेहरा खींचने के..

---

3 tips for crafting stunning print promotional material

कैसे करना है Sep 14, 2025

एक तेजी से डिजिटल दुनिया में, चालाकी से तैयार प्र�..

---

एक मूल टैरो कार्ड पेंट

कैसे करना है Sep 14, 2025

जब मुझे अपना पहला टैरो डेक मिला, तो मुझे सुंदर कला�..

---

इलस्ट्रेटर में एक लोगो बनाएं

कैसे करना है Sep 14, 2025

इस हफ्ते ने एडोब के इसे अब प्लेलिस्ट पर कुछ नए वीडियो की रिहाई देखी, एक मिन..

---

गीले-इन-गीले पेंटिंग तकनीक के साथ पकड़ें

कैसे करना है Sep 14, 2025

गीला-इन-गीला एक है पेंटिंग तकनीक यह अक्सर नि..

---

Create a custom sticker brush in Artrage

कैसे करना है Sep 14, 2025

मैं स्टिकर स्प्रे का उपयोग करता हूं आघात - ए�..

---

10 top Houdini tutorials

कैसे करना है Sep 14, 2025

हुदिनी एक शक्तिशाली जानवर है, कई हॉलीवुड फिल्मों में इस्तेमाल वीएफएक्स �..

---

श्रेणियाँ

• एआई और मशीन लर्निंग
• AirPods
• वीरांगना
• अमेज़ॅन एलेक्सा और अमेज़ॅन इको
• अमेज़न एलेक्सा और अमेज़न इको
• अमेज़न आग टीवी
• अमेज़न प्रधानमंत्री वीडियो
• एंड्रॉयड
• Android फ़ोन और टेबलेट
• Android फोन और टैबलेट
• Android टीवी
• एप्पल
• Apple App स्टोर
• एप्पल HomeKit और एप्पल HomePod
• एप्पल संगीत
• एप्पल टीवी
• एप्पल घड़ी
• एप्लिकेशन और वेब Apps
• ऐप्स और वेब ऐप्स
• ऑडियो
• Chrome बुक और क्रोम ओएस
• क्रोमबुक और क्रोम ओएस
• Chromecast
• बादल और इंटरनेट
• बादल और इंटरनेट
• क्लाउड और इंटरनेट
• कंप्यूटर हार्डवेयर
• कंप्यूटर इतिहास
• गर्भनाल काटने और स्ट्रीमिंग
• कॉर्ड कटिंग और स्ट्रीमिंग
• कलह
• डिज्नी +
• DIY
• बिजली के वाहन
• EReaders
• अनिवार्य
• व्याख्यार
• फेसबुक
• जुआ
• जनरल
• Gmail
• गूगल
• गूगल सहायक और गूगल नेस्ट
• Google सहायक और Google नेस्ट
• गूगल क्रोम
• गूगल डॉक्स
• को Google डिस्क
• गूगल मैप्स
• गूगल प्ले स्टोर
• Google शीट
• Google स्लाइड
• गूगल टीवी
• हार्डवेयर
• एचबीओ मैक्स
• कैसे करना है
• Hulu
• Instagram
• इंटरनेट स्लैंग और लघुरूप
• IPhone और IPad
• Kindle
• लिनक्स
• मैक
• रखरखाव और अनुकूलन
• माइक्रोसॉफ्ट एज
• माइक्रोसॉफ्ट एक्सेल
• माइक्रोसॉफ्ट ऑफिस
• माइक्रोसॉफ्ट आउटलुक
• Microsoft PowerPoint
• ​​माइक्रोसॉफ्ट टीमें
• माइक्रोसॉफ्ट वर्ड
• मोज़िला फ़ायरफ़ॉक्स
• Netflix
• Nintendo स्विच
• पैरामाउंट +
• पीसी गेमिंग
• मयूर
• फोटोग्राफी
• फ़ोटोशॉप
• प्लेस्टेशन
• गोपनीयता और सुरक्षा
• निजता एवं सुरक्षा
• गोपनीयता और सुरक्षा
• उत्पाद मवेशियों को इकट्ठा
• प्रोग्रामिंग
• रास्पबेरी Pi
• Reddit
• Roku
• सफारी
• सैमसंग फ़ोन और टेबलेट
• सैमसंग फोन और टैबलेट
• स्लैक
• स्मार्ट होम
• Snapchat
• सामाजिक मीडिया
• अंतरिक्ष
• Spotify
• Tinder
• समस्या निवारण
• टीवी
• ट्विटर
• वीडियो गेम
• आभासी वास्तविकता
• के VPN
• वेब ब्राउज़र
• WhatsApp
• वाईफ़ाई और रूटर
• वाईफाई और राउटर
• विंडोज
• Windows 10
• विंडोज 11
• विंडोज 7
• एक्सबॉक्स
• यू ट्यूब के यूट्यूब टीवी
• YouTube और YouTube टीवी
• ज़ूम
• Explainers