CSS प्रदर्शन अनुकूलन: GitHub तेज़ लोड समय के लिए अधिक CSS (कम नहीं) क्यों भेजता है

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

फिर GitHub की इंजीनियरिंग टीम ने “साइट प्रदर्शन में सुधार अधिक CSS भेजकर” शीर्षक से एक पोस्ट प्रकाशित किया, और फ्रंटएंड समुदाय ने सामूहिक रूप से भौंहें उठाईं। अकेला शीर्षक एक विरोधाभास की तरह पढ़ता है। किसी साइट को तेज़ बनाने के लिए अधिक CSS भेजना? क्या यह उल्टा नहीं है?

जैसा कि पता चला, नहीं। GitHub के निष्कर्ष उस पारंपरिक ज्ञान को चुनौती देते हैं जिसने वर्षों तक CSS वितरण रणनीतियों को नियंत्रित किया है। उनके डेटा से पता चलता है कि क्रिटिकल CSS को इनलाइन करने और शेष को कोड-स्प्लिट करने का पारंपरिक दृष्टिकोण, सैद्धांतिक रूप से सही होते हुए भी, वास्तविक दुनिया की स्थितियों में अक्सर घटते प्रतिफल उत्पन्न करता है। कुछ मामलों में, यह सक्रिय रूप से प्रदर्शन को नुकसान पहुँचाता है ।

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

पारंपरिक CSS वितरण प्लेबुक

इससे पहले कि हम सराहना कर सकें कि GitHub का दृष्टिकोण क्रांतिकारी क्यों है, हमें उस ढांचे को समझने की आवश्यकता है जिसे यह चुनौती देता है। मानक CSS अनुकूलन रणनीति जो अधिकांश प्रदर्शन गाइड सुझाते हैं, कुछ इस प्रकार दिखती है:

चरण 1: क्रिटिकल CSS को इनलाइन करें

ऊपर-द-फोल्ड सामग्री को प्रस्तुत करने के लिए आवश्यक CSS नियम निकालें और उन्हें सीधे अपने HTML के <head> में इनलाइन करें। यह प्रारंभिक पेंट के दौरान बाहरी स्टाइलशीट के लिए रेंडर-ब्लॉकिंग अनुरोध को समाप्त करता है।

चरण 2: पूर्ण स्टाइलशीट को एसिंक लोड करें

preload या media विशेषता ट्रिक का उपयोग करके पूर्ण CSS फ़ाइल को एसिंक्रोनस रूप से लोड करें, ताकि ब्राउज़र इनलाइन शैलियों के साथ तुरंत रेंडर करना शुरू कर सके और एक बार आने पर पूर्ण स्टाइलशीट लागू कर सके।

चरण 3: रूट या कंपोनेंट द्वारा CSS को कोड-स्प्लिट करें

सिंगल-पेज एप्लिकेशन में, वर्तमान दृश्य के लिए आवश्यक CSS ही परोसें। PurgeCSS, CSS मॉड्यूल और फ्रेमवर्क-विशिष्ट कोड-स्प्लिटिंग उपयोगिताओं जैसे उपकरण इस दानेदार दृष्टिकोण को संभव बनाते हैं।

कागज पर, यह रणनीति हर बाइट को अनुकूलित करती है। व्यवहार में, हालांकि, यह समझौतों का एक झरना पेश करती है जिन पर शायद ही कभी चर्चा की जाती है, और यह ठीक वहीं है जहां GitHub की इंजीनियरिंग टीम ने अपनी जांच शुरू की।

GitHub की प्रतिज्ञात्मक खोज

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

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

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

परिणाम? अधिकांश उपयोगकर्ताओं के लिए तेज़ पेज लोड, कम JavaScript निष्पादन ओवरहेड, और एक नाटकीय रूप से सरल कोडबेस।

“सबसे तेज़ CSS अनुरोध वह है जो कभी होता ही नहीं। एक एकल कैश्ड स्टाइलशीट हर बार-बार विज़िट को लगभग मुफ्त बनाती है।”

“अधिक CSS” वास्तव में अधिक क्यों नहीं है

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

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

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

वे मीट्रिक्स जो वास्तव में मायने रखते हैं

GitHub के निर्णय को समझने के लिए, आपको "कुल CSS फ़ाइल आकार" के सतही मीट्रिक से परे देखने और यह जांचने की आवश्यकता है कि वास्तविक दुनिया में वास्तव में कथित प्रदर्शन को क्या संचालित करता है।

प्रथम सामग्री पेंट (FCP)

FCP मापता है कि ब्राउज़र DOM सामग्री का पहला टुकड़ा कब प्रस्तुत करता है। पारंपरिक क्रिटिकल CSS का उद्देश्य रेंडर-ब्लॉकिंग CSS को समाप्त करके FCP को कम करना है। हालांकि, यदि CSS फ़ाइल कैश की गई है, तो बार-बार विज़िट पर कोई रेंडर-ब्लॉकिंग अनुरोध नहीं है, ब्राउज़र कैश से पढ़ता है और तुरंत पेंट करता है।

इंटरैक्टिव होने का समय (TTI)

TTI मापता है कि कोई पेज कब पूरी तरह से इंटरैक्टिव हो जाता है। इनलाइन क्रिटिकल CSS, जब JavaScript के साथ संयुक्त होता है जो एसिंक स्टाइलशीट लोडिंग का प्रबंधन करता है, वास्तव में TTI में देरी कर सकता है क्योंकि ब्राउज़र को पूर्ण स्टाइलशीट को हल करने से पहले JavaScript को निष्पादित करना होगा। एक एकल कैश्ड CSS फ़ाइल इस JavaScript निर्भरता को पूरी तरह से समाप्त कर देती है।

संचयी लेआउट शिफ्ट (CLS)

CLS दृश्य स्थिरता को मापता है। क्रिटिकल CSS कार्यान्वयन के बारे में सबसे आम शिकायतों में से एक यह है कि वे पेज को "झिलमिलाहट" का कारण बनते हैं, पूर्ण स्टाइलशीट लोड होने और इनलाइन शैलियों को ओवरराइड करने पर लेआउट शिफ्ट होता है। शुरू से एक एकल, पूरी तरह से लोड की गई CSS फ़ाइल बार-बार विज़िट पर इस लेआउट शिफ्ट को समाप्त करती है।

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

HTTP/2 और "कई छोटे अनुरोधों" के युग का अंत

CSS को कोड-स्प्लिट करने का एक मूल उद्देश्य HTTP/1.1 अनुरोधों का ओवरहेड था। प्रत्येक अनुरोध के लिए एक अलग TCP कनेक्शन की आवश्यकता होती थी, और ब्राउज़र प्रति डोमेन केवल सीमित संख्या में कनेक्शन खोल सकते थे। CSS को छोटे टुकड़ों में विभाजित करने का मतलब अधिक अनुरोध था, लेकिन प्रत्येक अनुरोध डाउनलोड करने में तेज़ था, यह एक समझौता था जो कभी-कभी इसके लायक होता था।

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

अधिक CSS भेजना कब समझ में आता है, और कब नहीं

GitHub का दृष्टिकोण कोई सार्वभौमिक समाधान नहीं है। यह विशिष्ट विशेषताओं वाली साइटों के लिए शानदार काम करता है, लेकिन यह एक-आकार-सभी-फिट उत्तर नहीं है। यहां बताया गया है कि कैसे मूल्यांकन करें कि यह आपके प्रोजेक्ट पर लागू होता है या नहीं।

यह कब काम करता है

• उच्च पुनरावृत्ति-विज़िट दर: प्लेटफ़ॉर्म, डैशबोर्ड, आंतरिक उपकरण और डेवलपर उत्पाद जहां उपयोगकर्ता दिन में कई बार लौटते हैं
• मध्यम CSS पदचिह्न: कुल gzipped CSS 200KB से कम, कैशिंग से लाभ उठाने के लिए पर्याप्त बड़ा, डाउनलोड दंड से बचने के लिए पर्याप्त छोटा
• मल्टी-पेज या मल्टी-व्यू नेविगेशन: एप्लिकेशन जहां उपयोगकर्ता कई अलग-अलग दृश्यों या रूट्स के बीच नेविगेट करते हैं
• CDN कैशिंग के साथ HTTP/2: बुनियादी ढांचा जो कुशल डिलीवरी और मजबूत कैश हेडर का समर्थन करता है

यह कब काम नहीं करता

• एकल-विज़िट लैंडिंग पेज: मार्केटिंग पेज या कैंपेन साइटें जहां अधिकांश उपयोगकर्ता एक बार आते हैं और कभी वापस नहीं आते
• विशाल CSS बंडल: 500KB से अधिक gzipped स्टाइलशीट, जहां प्रारंभिक डाउनलोड दंड कैशिंग लाभों से अधिक है
• अत्यंत विविध शैलियाँ: अनुभागों में नाटकीय रूप से भिन्न CSS आवश्यकताओं वाली साइटें (हालांकि व्यवहार में यह दुर्लभ है)

आपके विकास कार्यप्रवाह के लिए इसका क्या अर्थ है

GitHub की खोज के व्यावहारिक निहितार्थ प्रदर्शन मीट्रिक से परे हैं। CSS वितरण रणनीति का सरलीकरण आपकी संपूर्ण विकास पाइपलाइन पर एक व्यापक प्रभाव डालता है।

सरल बिल्ड कॉन्फ़िगरेशन

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

कम निर्भरताएँ

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

आसान डिबगिंग

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

आपके द्वारा भेजे जाने वाले CSS का अनुकूलन

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

अप्रयुक्त नियमों को हटाएँ

PurgeCSS जैसे उपकरण और फ्रेमवर्क-विशिष्ट उपयोगिताएँ (उदाहरण के लिए Tailwind का JIT मोड) आपके प्रोजेक्ट में उपयोग नहीं किए जाने वाले CSS नियमों को हटा देते हैं। यह विशेष रूप से महत्वपूर्ण है जब पूरी साइट पर CSS को समेकित किया जा रहा हो, आप उन घटकों के नियम नहीं चाहते जो अब मौजूद नहीं हैं।

सेलेक्टर दक्षता को अनुकूलित करें

जटिल सेलेक्टर (.nav ul li a span) को ब्राउज़र को सरल सेलेक्टर (.nav-link) की तुलना में मूल्यांकन करने के लिए अधिक काम करना पड़ता है। जबकि सेलेक्टर का प्रदर्शन प्रभाव अक्सर बढ़ा-चढ़ाकर बताया जाता है, फिर भी अपने सेलेक्टर को दुबला रखना सार्थक है।

मिनिफाई और कंप्रेस करें

CSS मिनिफिकेशन व्हाइटस्पेस, टिप्पणियाँ और अनावश्यक वर्णों को हटा देता है। Gzip या Brotli संपीड़न तब स्थानांतरित आकार को 60-80% तक कम कर देता है। एक 200KB अनमिनिफाइड CSS फ़ाइल केवल 40KB gzipped हो सकती है, जो मामूली कनेक्शन पर भी एक तुच्छ डाउनलोड है।

DivMagic एक प्रदर्शन-प्रथम CSS कार्यप्रवाह में कैसे फिट बैठता है

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

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

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

"UI को रिवर्स-इंजीनियर करना बंद करें। किसी भी वेबसाइट से सटीक CSS कॉपी करें और सेकंडों में प्रोडक्शन-ग्रेड स्टाइल भेजें, घंटों में नहीं।"

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

कॉपी से कैशेबल तक: एक व्यावहारिक कार्यप्रवाह

यहाँ एक व्यावहारिक कार्यप्रवाह है जो DivMagic को GitHub की "अधिक CSS भेजें" रणनीति के साथ जोड़ता है:

चरण 1: संदर्भ साइटों से UI घटकों को कॉपी करने के लिए DivMagic का उपयोग करें। आपको जिस भी तत्व की आवश्यकता हो, उसके लिए सटीक HTML और CSS निकालें।

चरण 2: कॉपी की गई शैलियों को एक एकल, सुसंगत स्टाइलशीट में समेकित करें। उन्हें तार्किक रूप से व्यवस्थित करें, किसी भी विरोध को हल करें, और सुसंगत नामकरण परंपराओं को सुनिश्चित करें।

चरण 3: PurgeCSS या अपने फ्रेमवर्क के अंतर्निहित टूल का उपयोग करके अप्रयुक्त नियमों को हटाएँ। अपने प्रोजेक्ट में सक्रिय रूप से उपयोग नहीं की जाने वाली किसी भी चीज़ को हटा दें।

चरण 4: समेकित CSS को मजबूत कैश हेडर के साथ एक एकल फ़ाइल के रूप में प्रस्तुत करें (संस्करणित फ़ाइलों के लिए Cache-Control: public, max-age=31536000, immutable )।

चरण 5: HTTP/2 और Brotli संपीड़न का समर्थन करने वाले CDN के पीछे तैनात करें।

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

अपने स्वयं के प्रोजेक्ट्स में प्रभाव को मापना

यह जानने का एकमात्र तरीका है कि GitHub का दृष्टिकोण आपके विशिष्ट प्रोजेक्ट के लिए काम करता है या नहीं, इसे मापना है। सौभाग्य से, ऐसा करने के उपकरण व्यापक रूप से उपलब्ध हैं और लागू करने में सीधे हैं।

वास्तविक उपयोगकर्ता निगरानी (RUM)

Google Analytics, Sentry Performance और New Relic Browser जैसे उपकरण Core Web Vitals पर वास्तविक उपयोगकर्ता डेटा प्रदान करते हैं। पहली बार आने वाले और बार-बार आने वाले दोनों आगंतुकों के लिए FCP, TTI और CLS को ट्रैक करें। बार-बार आने वाले आगंतुक मीट्रिक वे हैं जहाँ आप कैश्ड CSS रणनीति से सबसे नाटकीय अंतर देखेंगे।

सिंथेटिक परीक्षण

Lighthouse, WebPageTest और इसी तरह के उपकरण नियंत्रित, प्रतिलिपि योग्य माप प्रदान करते हैं। हालाँकि वे बार-बार आने के कैशिंग व्यवहार को कैप्चर नहीं करते हैं, वे स्पष्ट बाधाओं की पहचान करने और यह सत्यापित करने के लिए उपयोगी हैं कि आपकी CSS वितरण रणनीति इच्छित रूप से काम कर रही है।

CSS वितरण रणनीतियों का A/B परीक्षण

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

CSS प्रदर्शन का भविष्य

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

कई रुझान इस विकास का समर्थन करते हैं:

• HTTP/3 और QUIC: HTTP प्रोटोकॉल की अगली पीढ़ी व्यक्तिगत अनुरोधों के ओवरहेड को और कम कर देती है, जिससे "कम, बड़े अनुरोध" रणनीति और भी अनुकूल हो जाती है
• बेहतर ब्राउज़र कैशिंग: ब्राउज़र अपने कैशिंग व्यवहार में अधिक परिष्कृत हो रहे हैं, जिससे कैश-फर्स्ट रणनीतियाँ अधिक विश्वसनीय हो रही हैं
• CDN की सर्वव्यापकता: कंटेंट डिलीवरी नेटवर्क अब मानक बुनियादी ढांचा हैं, जिससे एज-कैश्ड संपत्तियों को परोसना नाटकीय रूप से तेज़ हो गया है
• CSS-in-JS विकास: styled-components और Emotion जैसे फ्रेमवर्क स्थैतिक निष्कर्षण की ओर बढ़ रहे हैं, जो CSS और JavaScript अनुकूलन के बीच की रेखा को धुंधला कर रहे हैं

निष्कर्ष: तेज़ CSS का प्रतिज्ञापूर्ण मार्ग

GitHub की "अधिक CSS भेजें" खोज एक अनुस्मारक है कि प्रदर्शन अनुकूलन शायद ही कभी उतना सीधा होता है जितना दिखता है। पारंपरिक ज्ञान, इनलाइन क्रिटिकल CSS, अपनी स्टाइलशीट को कोड-स्प्लिट करें, हर बाइट को कम करें, विभिन्न बाधाओं और विभिन्न ब्राउज़रों के युग में उभरा। आधुनिक वेब में, HTTP/2, उन्नत कैशिंग और सर्वव्यापी CDN के साथ, गणना बदल गई है।

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

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

अधिक CSS भेजें। बस इसे स्मार्ट तरीके से भेजें।