CSS प्रदर्शन विरोधाभास: अधिक CSS भेजने से GitHub को तेज़ कैसे बनाया

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

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

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

"जस्ट-इन-टाइम" CSS की छिपी लागत

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

स्टाइल गणना: ब्राउज़र को हर उस CSS नियम को हल करना होगा जो नए DOM नोड्स पर लागू होता है।
लेआउट (रीफ्लो): प्रभावित हर तत्व की ज्यामिति और स्थिति की पुनर्गणना की जानी चाहिए।

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

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

लेआउट थ्रैशिंग को समझना

यहाँ एक सरलीकृत विज़ुअलाइज़ेशन है कि जब कोई उपयोगकर्ता एक बटन पर क्लिक करता है जो अपने स्वयं के CSS बंडल के साथ एक मोडल को ट्रिगर करता है तो क्या होता है:

उपयोगकर्ता क्लिक करता है → जावास्क्रिप्ट निष्पादित होता है और मोडल DOM को माउंट करता है
ब्राउज़र एक नया <link rel="stylesheet"> या इंजेक्टेड <style>
नए नियमों को शामिल करने के लिए पूरा CSS ऑब्जेक्ट मॉडल (CSSOM) पुनर्निर्मित होता है
स्टाइल गणना वैश्विक रूप से चलती है, न केवल मोडल पर, बल्कि पूरे दस्तावेज़ ट्री पर यदि ब्राउज़र अलगाव साबित नहीं कर सकता
लेआउट चलता है, संभावित रूप से हजारों नोड्स के लिए स्थितियों की पुनर्गणना करता है
पेंट और कम्पोज़िट अंततः होते हैं, उपयोगकर्ता को मोडल दिखाते हैं

चरण 3-5 सिंक्रोनस और ब्लॉकिंग हैं। जब तक यह कार्य पूरा नहीं हो जाता, ब्राउज़र मोडल नहीं दिखा सकता। कम-अंत वाले मोबाइल उपकरणों पर, यह आसानी से 200ms से अधिक हो सकता है, जो "खराब" INP स्कोर की सीमा है।

GitHub की अंतर्दृष्टि गहरी थी: पहले से अधिक CSS भेजने की नेटवर्क लागत बाद में इसे इंजेक्ट करने की रेंडरिंग लागत की तुलना में नगण्य थी। उनकी पुरानी प्रणाली प्रारंभिक लोड पर लगभग 8KB gzipped भेजती थी। नई प्रणाली लगभग 100KB अधिक CSS भेजती है, एक सामान्य 4G कनेक्शन पर अतिरिक्त 20ms, लेकिन इंटरैक्शन के दौरान 200-400ms रेंडरिंग कार्य बचाती है। गणित क्रूर और अकाट्य है।

Bar chart comparing rendering pipeline timings: dynamic CSS injection incurs 300ms of style recalculation versus 20ms for pre-shipped global CSS.

गुप्त हथियार: CSS कंटेनमेंट

आँख बंद करके अधिक CSS भेजना एक आपदा होगी। यदि आप हजारों नियमों के साथ 150KB की स्टाइलशीट भेजते हैं, तो हर स्टाइल पुनर्गणना, यहां तक कि कंपोनेंट स्टेट परिवर्तनों द्वारा ट्रिगर की गई छोटी पुनर्गणनाएं भी, दसियों मिलीसेकंड ले सकती हैं। GitHub की रणनीति की कुंजी एक बड़े पैमाने पर अप्रयुक्त CSS गुण है: contain।

technology, computer, code, javascript, developer, programming, programmer, jquery, css, html, website, technology, technology, computer, code, code, code, code, code, javascript, javascript, javascript, developer, programming, programming, programming, programming, programmer, html, website, website, website

contain गुण ब्राउज़र को बताता है कि एक सबट्री के लिए लेआउट, स्टाइल और पेंट कार्य का दायरा क्या है। प्रमुख UI अनुभागों को contain: layout style के साथ चिह्नित करके, GitHub ने अपने स्वयं के दस्तावेज़ के भीतर अभेद्य अलगाव सीमाएँ बनाईं। ब्राउज़र अब पूर्ण निश्चितता के साथ जानता है कि एक संलग्न साइडबार के अंदर शैलियों की पुनर्गणना कभी भी मुख्य सामग्री क्षेत्र को प्रभावित नहीं करेगी, और इसके विपरीत।

कंटेन प्रॉपर्टी चीट शीट

यहाँ प्रत्येक कंटेनमेंट वैल्यू ब्राउज़र को क्या गारंटी देती है, इसका विवरण दिया गया है:

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

contain: layout style को संयोजित करने से GitHub को बिना प्रदर्शन दंड के 150KB की एक मोनोलिथिक स्टाइलशीट भेजने की अनुमति मिली। स्टाइल पुनर्गणना की लागत अब पूरे दस्तावेज़ के बजाय उस संलग्न सबट्री तक सीमित है जहाँ इंटरैक्शन हुआ, जिससे प्रत्येक पुनर्गणना सैकड़ों गुना सस्ती हो जाती है।

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

इसे अभ्यास में लाना: एक React उदाहरण

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

/* पहले: कोई कंटेनमेंट नहीं। साइडबार में एक स्टाइल परिवर्तन 
   5000 DOM नोड्स की वैश्विक पुनर्गणना को मजबूर करता है */
.sidebar \{
  width: 280px;
  background: var(--color-bg-secondary);
\}

.content \{
  flex: 1;
  overflow-y: auto;
\}

/* बाद में: हार्ड कंटेनमेंट लेआउट और स्टाइल कार्य को सीमित करता है */
.sidebar \{
  width: 280px;
  background: var(--color-bg-secondary);
  contain: layout style;
\}

.content \{
  flex: 1;
  overflow-y: auto;
  contain: layout style;
\}

React कंपोनेंट में, आप साइडबार के CSS मॉड्यूल को डायनामिक रूप से इम्पोर्ट करने के लिए प्रलोभित हो सकते हैं। प्री-कंटेनमेंट युग का दृष्टिकोण स्टाइल और कंपोनेंट को एक साथ लेज़ी-लोड करता था:

// ANTI-PATTERN: Lazy CSS causes INP spikes
const Sidebar = React.lazy(() => \{
  import('./Sidebar.module.css'); 
  return import('./Sidebar');
\});

इसके बजाय, शुरू से ही CSS को वैश्विक रूप से शिप करें। एक एकल एंट्री-पॉइंट स्टाइलशीट या एक वैश्विक CSS-in-JS दृष्टिकोण का उपयोग करें जो एक स्थिर फ़ाइल में निकाला जाता है। केवल जावास्क्रिप्ट लॉजिक को लेज़ी-लोड करें। CSS पहले से ही पार्स, कैश्ड और, महत्वपूर्ण रूप से, कंटेनमेंट बाउंड्री के पीछे स्कोप्ड है, इसलिए ब्राउज़र का रेंडरिंग इंजन शून्य अप्रत्याशित कार्य करता है।

ट्रेडऑफ़ स्पष्ट है: आपके पेज की प्रारंभिक स्टाइलशीट बड़ी है, लेकिन प्रत्येक बाद के इंटरैक्शन पर आपके INP स्कोर गिर जाते हैं। यह GitHub की अंतर्दृष्टि का मूल है।

सभी "अधिक CSS" समान नहीं बनाए गए हैं

GitHub का दृष्टिकोण एक विशिष्ट बाधा के कारण काम करता है: उनका एप्लिकेशन एक विशाल, CSS-समृद्ध SPA है जहां उपयोगकर्ता इंटरैक्शन DOM म्यूटेशन को ट्रिगर करते हैं जो पहले वैश्विक शैली पुनर्गणना का कारण बनते थे। यह तकनीक display: none को प्रत्येक तत्व से हटाने और एक मेगाबाइट ब्लोट शिप करने का एक सामान्य समर्थन नहीं है।

website, code, html, coding, programming, data, webpage, information, seo, site, web, computer, development, technology, internet, website, code, code, code, html, html, coding, coding, coding, coding, coding, programming, programming, seo, seo, seo, seo

सफलता के लिए महत्वपूर्ण शर्तें हैं:

आपका पेज कई स्वतंत्र UI पैनल या विजेट होस्ट करता है
इंटरैक्शन महत्वपूर्ण DOM परिवर्तन का कारण बनते हैं (मोडल, पैनल, रूट परिवर्तन)
आप कंटेनमेंट के लिए स्पष्ट दृश्य और कार्यात्मक सीमाओं की पहचान कर सकते हैं
आपका CSS बिल्ड स्टेप में ठीक से ट्री-शेक और मिनिमाइज़ किया गया है

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

Line chart showing a sharp drop in GitHub's INP scores after deploying CSS containment and global stylesheets.

DivMagic इस रिफैक्टर को कैसे गति देता है

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

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

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

कंटेनमेंट रिफैक्टर के लिए वर्कफ़्लो बन जाता है:

अपने साइडबार, डिटेल पैनल या विजेट के पूर्ण, गणना किए गए CSS को कैप्चर करने के लिए DivMagic का उपयोग करें।
इसे अपने वैश्विक बंडल में एक समर्पित widget-panel.css फ़ाइल में पेस्ट करें।
उस विजेट के रूट एलिमेंट में contain: layout style जोड़ें।
अपने कंपोनेंट की लेज़ी-लोडिंग लॉजिक से पुराने डायनामिक CSS इम्पोर्ट को हटाएं।
स्थिर CSS शिप करें। लाभ उठाएं।

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

प्रभाव को मापना: Lighthouse स्कोर से परे

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

website, web design, development, code, programming, marketing, office, business, agency, website, website, web design, web design, web design, web design, web design, agency

अपनी CSS रणनीति तैनात करने के बाद, GitHub ने केवल एक स्थानीय ऑडिट नहीं चलाया, उन्होंने अपने वास्तविक-उपयोगकर्ता निगरानी (RUM) डैशबोर्ड और Chrome उपयोगकर्ता अनुभव रिपोर्ट (CrUX) को शल्य चिकित्सा सटीकता के साथ देखा। जो मेट्रिक्स चले:

Interaction to Next Paint (INP): मुख्य पृष्ठों पर 250-300ms (सुधार की आवश्यकता) से घटकर 50-80ms (अच्छा) हो गया।
First Input Delay (FID): ज्यादा नहीं बदला, क्योंकि FID पूर्ण इंटरैक्शन जीवनचक्र को कैप्चर नहीं करता है जिसे CSS ब्लॉक कर सकता है।
Style Recalculation Runtime (Chrome DevTools Performance Panel): इंटरैक्शन-भारी ट्रेस पर 90% से अधिक कम हो गया।

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

Horizontal bar chart showing that extracting precise component styles consumes the largest portion of a developer's performance optimization time.

इंटरैक्शन-टाइमिंग CSS मुद्दों के लिए अपने स्वयं के ऐप का ऑडिट करना

यहां एक चरण-दर-चरण प्रक्रिया है जिसे आप आज चला सकते हैं यह देखने के लिए कि क्या GitHub की रणनीति आपके अपने काम पर लागू होती है:

1. धीमे सिम्युलेटेड मोबाइल डिवाइस पर प्रदर्शन ट्रेस चलाएं

Chrome DevTools खोलें, CPU थ्रॉटलिंग को "6x slowdown" पर सेट करें, और रिकॉर्ड दबाएं। कुछ प्रमुख इंटरैक्शन करें, एक मेनू खोलना, एक मोडल ट्रिगर करना, टैब के बीच नेविगेट करना। रिकॉर्डिंग बंद करें और फ्लेम चार्ट में लंबे "Recalculate Style" कार्यों की तलाश करें।

2. लेआउट शिफ्ट क्षेत्रों के लिए "Rendering" पैनल की जांच करें

DevTools में "Layout Shift Regions" सक्षम करें और देखें कि आपके इंटरैक्शन के दौरान क्या चमकता है। यदि एक छोटा मेनू खुलने पर पृष्ठ के बड़े क्षेत्र फिर से लेआउट होते हैं, तो आपके पास कंटेनमेंट की कमी है।

3. अपने लेज़ी-लोडेड CSS इम्पोर्ट का ऑडिट करें

अपने कोडबेस में डायनामिक import() कॉल्स खोजें जो CSS मॉड्यूल लौटाते हैं, या पैटर्न लाइब्रेरीज़ जो कंपोनेंट माउंट पर <style> टैग इंजेक्ट करती हैं। इनमें से प्रत्येक वैश्विक-बंडल-प्लस-कंटेनमेंट उपचार के लिए एक उम्मीदवार है।

4. प्राकृतिक कंटेनमेंट सीमाओं की पहचान करें

अपने कंपोनेंट ट्री पर चलें। क्या आप अपने साइडबार, मुख्य सामग्री, हेडर और फुटर के चारों ओर बक्से बना सकते हैं ताकि वे कभी भी दृष्टिगत रूप से ओवरलैप न हों या एक-दूसरे की आंतरिक ज्यामिति पर निर्भर न हों? उन बक्सों को contain: layout styleमिलना चाहिए।

जब इस तकनीक का उपयोग न करें

कोई भी प्रदर्शन सलाह सार्वभौमिक नहीं है। यहां कुछ परिदृश्य हैं जहां GitHub का दृष्टिकोण उल्टा पड़ सकता है:

वास्तव में बड़ी, मल्टी-मेगाबाइट स्टाइलशीट: यदि आपका CSS अनऑप्टिमाइज़्ड थीम के कारण 1MB+ है, तो पहले ब्लोट को ठीक करें, फिर कंटेनमेंट पर विचार करें।
एक बड़े स्क्रॉलिंग कंटेनर वाले पेज: मुख्य कंटेंट स्क्रॉलर पर कंटेनमेंट लगाने से position: fixed और स्टिकी हेडर टूट सकते हैं यदि आप size कंटेनमेंट वैल्यू से सावधान नहीं हैं।
सर्वर-साइड रेंडर किए गए ऐप्स जिनमें बहुत कम क्लाइंट-साइड इंटरैक्टिविटी है: यदि कोई महंगे इंटरैक्शन-संचालित DOM परिवर्तन नहीं हैं, तो आप केवल बाइट्स जोड़ रहे हैं।

कंटेनमेंट एक स्केलपेल है, स्लेजहैमर नहीं। इसे शल्य चिकित्सा की तरह उन पैनलों और विजेट्स पर लागू करें जो आपके एप्लिकेशन की स्टेटफुलनेस को होस्ट करते हैं, अपने पूरे लेआउट पर contain: strictसे बमबारी न करें।

निष्कर्ष: सबसे अच्छा बाइट वह है जो 1000 अन्य को काम करने से रोकता है

GitHub का प्रदर्शन कार्य एक अनुस्मारक है कि हमारे उद्योग का "छोटा हमेशा बेहतर होता है" के प्रति लगाव हमें रनटाइम की वास्तविक भौतिकी से अंधा कर सकता है। CSS का एक किलोबाइट जो 300 मिलीसेकंड की स्टाइल पुनर्गणना को समाप्त करता है, वह कर नहीं है, यह समय बचत में 15,000% रिटर्न वाला निवेश है।

INP और Core Web Vitals का युग मांग करता है कि हम प्रदर्शन के बारे में समग्र रूप से सोचें, पेज के पूरे जीवनचक्र में। इस दृष्टि से, अधिक CSS भेजना विधर्मिक नहीं है। यह तर्कसंगत, साक्ष्य-संचालित है, और सबसे महत्वपूर्ण बात, यह उन मनुष्यों के लिए ऐप्स को अविश्वसनीय रूप से तेज़ महसूस कराता है जो उनका उपयोग करते हैं।

आपका अगला कदम एक ठोस प्रयोग है: अपने स्वयं के एप्लिकेशन में एक भारी उपयोग किए जाने वाले मोडल या पैनल को चुनें। एक ऐसे टूल का उपयोग करके इसका पूरा CSS निकालें जो आपको अनुमान लगाने के बिना सटीक, गणना किए गए नियमों का सेट देता है, DivMagic इसके लिए आदर्श है। उस CSS को अपने ग्लोबल बंडल में ले जाएं। कंटेनमेंट जोड़ें। INP मापें। मुझे संदेह है कि आप पाएंगे, जैसा कि GitHub ने पाया, कि कभी-कभी आगे बढ़ने का सबसे तेज़ तरीका थोड़ा अधिक वजन उठाना है।

Tagged:CSS प्रदर्शन वेब प्रदर्शन कोर वेब विटल्स सीएसएस कंटेनमेंट GitHub इंजीनियरिंग महत्वपूर्ण CSS लेआउट थ्रैशिंग