CSS Performance

अपनी car चलाने की कल्पना करें। अगर road smooth और साफ़ है, तो आप साफ़ तरीके से glide करते हैं। लेकिन अगर road भारी speed bumps, detours, और obstacles से ढकी है, तो आपके engine को कहीं ज़्यादा मेहनत करनी पड़ती है, आपकी travel times धीमी करते हुए और fuel बर्बाद करते हुए। Browser rendering वही road है। जब आपकी HTML और CSS files load होती हैं, तो browser को positions calculate करने, pixels paint करने, और layouts render करने पड़ते हैं। अगर आपकी CSS भारी, complex rules से भरी है, तो browser को कहीं ज़्यादा मेहनत करनी पड़ती है, page lag पैदा करते हुए। अपनी CSS performance optimize करना सुनिश्चित करता है कि आपके pages किसी भी device पर instantly load हों और smoothly चलें।

In this page:

Paint और Reflow Blocks को समझना
Selector Complexity को कम करना
will-change के साथ Hardware Acceleration
Critical CSS Path
contain के साथ Performance Isolation

Paint और Reflow Blocks को समझना

जब किसी element की style बदलती है, तो browser दो major rendering steps चलाता है: Reflow (elements की physical layout positions को दोबारा calculate करना) और Paint (screen पर pixels को दोबारा draw करना)। Reflow बेहद resource-heavy है और अगर बार-बार trigger हो तो page speeds को धीमा कर सकता है।

Note: animations के लिए transform और opacity जैसी lightweight properties इस्तेमाल करें, क्योंकि वे costly layout reflows trigger नहीं करतीं।

Warning: width, height, या margin जैसी structural properties बदलना browser को पूरे page पर costly layout reflows चलाने पर मजबूर करता है।

उदाहरण: Understanding Paint and Reflow Blocks

css

<style>
.cheap {
  background: royalblue;
  color: white;
  padding: 10px;
  transition: transform 0.3s, opacity 0.3s;
}
.cheap:hover {
  transform: scale(1.05);
  opacity: 0.9;
}
</style>
<div class="cheap">transform/opacity skip layout reflow</div>

Selector Complexity को कम करना

Browsers CSS selectors को right से left पढ़ते हैं। एक गहराई से nested selector path (जैसे 'body div.container ul li a') browser को matching elements ढूँढने के लिए आपके पूरे DOM tree को कई बार scan करने पर मजबूर करता है, rendering speeds धीमी करते हुए।

Note: browser के लिए matching को तेज़ और efficient बनाने के लिए flat, single-class selectors (जैसे .nav-link) इस्तेमाल करें।

Warning: बहुत लंबे, nested selector paths लिखना rendering lag पैदा कर सकता है, खासतौर पर कई elements वाले complex pages पर।

उदाहरण: Minimizing Selector Complexity

css

<style>
/* Slow: deep nested path, scanned right to left */
body div.container ul li a { color: blue; }

/* Fast: flat single class */
.nav-link { color: blue; }
</style>
<div class="container"><ul><li><a class="nav-link" href="#">Home</a></li><li><a class="nav-link" href="#">About</a></li></ul></div>

will-change के साथ Hardware Acceleration

will-change property browser को warn करती है कि किसी element को जल्द ही animate किया जाएगा, इसे GPU तैयार करने और animation को smoothly चलाने देते हुए।

Note:

will-change को सिर्फ complex, high-performance animations वाले elements पर लागू करें, और animation खत्म होने पर इसे हटा दें।
Accepted values:
will-change: transform — इसे अपनी खुद की layer में promote करता है
will-change: opacity — opacity के लिए वही
will-change: scroll-position — scrolling बदलने वाली है
will-change: contents — element का content बदलेगा
will-change: auto — default
कम मात्रा में इस्तेमाल करें — हर layer memory खर्च करती है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: will-change का ज़्यादा इस्तेमाल significant GPU memory consume कर सकता है और असल में आपकी page performance धीमी कर सकता है।

उदाहरण: Hardware Acceleration with will-change

css

<style>
.modal { width: 200px; padding: 20px; background: #cfe8ff; border: 2px solid #1e6fd9; }
.modal {
  will-change: transform;
}
</style>
<div class="modal">Modal promoted to its own layer</div>

Critical CSS Path

Critical Path CSS वह technique है जिसमें आपके page के top हिस्से (above-the-fold content) को render करने के लिए ज़रूरी styles को extract करके सीधे आपके HTML head tag के अंदर inline किया जाता है, page को instantly display होने देते हुए जबकि external stylesheets background में load होती हैं।

Note: initial load speeds बेहतर करने के लिए अपनी critical above-the-fold styles को सीधे एक head style block के अंदर inline करें।

Warning: सुनिश्चित करें कि आपकी inlined critical CSS compact है ताकि आपकी HTML file size bloat न हो।

उदाहरण: The critical CSS Path

css

<head>
  <style>
    header { background: navy; color: white; padding: 20px; }
  </style>
</head>
<header>Above-the-fold styles inlined here load before the external stylesheet</header>

contain के साथ Performance Isolation

contain property आपको specific elements को बाकी page layout से isolate करने देती है, browser को बताते हुए कि इस container के अंदर के changes आस-पास के elements के layout को कभी असर नहीं करेंगे, costly page-wide reflows को रोकते हुए।

Note:

rendering speeds optimize करने के लिए heavy, dynamic widgets (जैसे chat widgets या infinite scroll feeds) पर contain: content इस्तेमाल करें।
Accepted values:
content — layout paint style का shorthand
strict — size layout paint style का shorthand
layout — internal layout को बाहर से isolate करता है
paint — painting को box तक clip करता है
size — box size children से independent
inline-size — सिर्फ inline axis पर size containment
style — counters को subtree तक scope करता है
none — default, कोई containment नहीं
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: contain property boundaries को सख़्ती से restrict करती है; अगर content बहुत बड़ा है, तो यह clip हो जाएगा।

उदाहरण: Performance Isolation with contain

css

<style>
.widget { background: #cfe8ff; border: 2px solid #1e6fd9; padding: 16px; width: 220px; }
.widget {
  contain: content;
}
</style>
<div class="widget">Widget isolated from the rest of the page layout</div>

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Accessibility Next Lesson → CSS Preprocessors