जब CSS को एक फ़ाइल में बंडल किया जाता है, तो ट्री-शेकिंग के बाद भी, इसमें विभिन्न @media संदर्भों (मोबाइल, टैबलेट, डेस्कटॉप, डार्क/लाइट/अन्य थीम, आदि) के कारण अभी भी बहुत सारी अप्रयुक्त CSS होती है।
यह कोर वेब वाइटल्स के लिए खराब है: फर्स्ट इनपुट डिले (FID), लार्जेस्ट कंटेंटफुल पेंट (LCP), क्युमुलेटिव लेआउट शिफ्ट (CLS), साथ ही अन्य महत्वपूर्ण प्रदर्शन और उपयोगिता मेट्रिक्स: फर्स्ट कंटेंटफुल पेंट (FCP), टोटल ब्लॉकिंग टाइम (TBT), टाइम टू इंटरैक्टिव (TTI), और DOMContentLoaded इवेंट।
CSS लोडिंग और रेंडरिंग को अलग-अलग फाइलों में विभाजित करके महत्वपूर्ण रूप से बेहतर बनाने का एक तरीका है, जहाँ प्रत्येक फ़ाइल में केवल उस संदर्भ में आवश्यक कोड होता है।
अपनी CSS को अलग-अलग फ़ाइलों में विभाजित करें:
📄main.css - contains CSS needed for all @media conditions
📄screen.css - contains CSS needed only for screen @media condition
📄print.css - contains CSS needed only for print @media condition
📂breakpoints
📄x-small.css - contains CSS needed only for X-Small breakpoint
📄sm.css - contains CSS needed only for Small breakpoint
📄md.css - contains CSS needed only for Medium breakpoint
📄lg.css - contains CSS needed only for Large breakpoint
📄xl.css - contains CSS needed only for Extra large breakpoint
📄xxl.css - contains CSS needed only for Extra extra large breakpoint
📂themes
📄light.css - contains CSS needed only for light theme
📄dark.css - contains CSS needed only for dark themeफिर, CSS फ़ाइलों को इस तरह शामिल करें:
<link rel="stylesheet" href="main.css" media="all">
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="x-small.css" media="(max-width: 575px)">
<link rel="stylesheet" href="sm.css" media="(min-width: 576px)">
<link rel="stylesheet" href="md.css" media="(min-width: 768px)">
<link rel="stylesheet" href="lg.css" media="(min-width: 992px)">
<link rel="stylesheet" href="xl.css" media="(min-width: 1200px)">
<link rel="stylesheet" href="xxl.css" media="(min-width: 1400px)">
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">इस दृष्टिकोण के साथ, आधुनिक ब्राउज़र वर्तमान @media स्थितियों के लिए CSS लोडिंग को प्राथमिकता देते हैं, इसलिए पेज रेंडरिंग बहुत तेज़ी से शुरू होता है क्योंकि उपयोगकर्ताओं को CSS के अप्रयुक्त भाग के लोडिंग का इंतजार करने की आवश्यकता नहीं होती है।
उन मामलों में जहाँ आपके पास सभी CSS एक फ़ाइल में बंडल हैं और link टैग के मीडिया एट्रीब्यूट में शर्तों को निर्दिष्ट नहीं करते हैं, ब्राउज़र पेज रेंडरिंग शुरू करने से पहले CSS के पूरे सेट के लोड होने की प्रतीक्षा करता है। जो पेज रेंडरिंग को नाटकीय रूप से धीमा कर देता है।
इस उदाहरण में ब्रेकपॉइंट बूटस्ट्रैप 5 पर आधारित हैं। यह दृष्टिकोण जल्द ही बूटस्ट्रैप के लिए और भी महत्वपूर्ण हो जाएगा क्योंकि वे लाइट/डार्क/अन्य थीम का समर्थन जोड़ेंगे।
यदि आप वेब को बेहतर और तेज़ बनाना चाहते हैं, तो कृपया:
- इस लेख को साझा करें,
- इस लेख को आपके द्वारा उपयोग किए जाने वाले फ्रेमवर्क के डेवलपर्स को भेजें,
- अपनी साइटों पर इस CSS पृथक्करण को लागू करें।
सोशल मीडिया पर साझा करें या बाद के लिए सहेजें:
यदि आप इस अनुकूलन और ब्राउज़र के व्यवहार के बारे में और पढ़ना चाहते हैं, तो कृपया निम्नलिखित देखें:
- “कंडीशनली एडाप्टिव CSS. ब्राउज़र व्यवहार जो आपके प्रदर्शन में सुधार कर सकता है” लेख वदिम मकीव द्वारा। इस लेख के लिए कवर स्क्रीनशॉट उनके उत्कृष्ट लेख से लिया गया है, जहाँ उनके पास अधिक स्क्रीनशॉट और प्रयोग हैं।
- MDN वेब डॉक्स: CSS प्रदर्शन अनुकूलन।