CSS अनुकूलन

महत्वपूर्ण CSS इनलाइनिंग

Render-blocking से बचने के लिए above-the-fold CSS को <style> tag में inline करें। Example: colors, fonts, hero section के styles। CriticalCSS या Penthouse जैसे tools इस्तेमाल करें। बाक़ी को <link rel=preload> और onload=this.rel='stylesheet' से defer करें।

CSS चयनकर्ता प्रदर्शन

बड़े DOM पर deep selectors, universal * और attribute selectors से बचें। Browsers selectors को right-to-left match करते हैं: .modal .button पहले हर button जाँचता है, फिर modal parent verify करता है। तेज़ी के लिए specific class selectors इस्तेमाल करें।

लेआउट thrashing और पुनः गणना से बचें

DOM के read/write operations बारी-बारी से न करें। पहले सारे reads एक साथ करें, फिर writes। Synchronized updates के लिए requestAnimationFrame() इस्तेमाल करें। FastDOM जैसी libraries thrashing रोकने में मदद करती हैं।

प्रदर्शन के लिए आधुनिक CSS

Floats की जगह CSS Grid/Flexbox इस्तेमाल करें। will-change property कम इस्तेमाल करें। महँगी properties (box-shadow, filters) से बचें। Animations के लिए transform और opacity के साथ GPU acceleration लें।

त्वरित जाँच

त्वरित जाँच: कौन से CSS गुण GPU-त्वरित हैं?

• सभी CSS गुण
• transform और opacity
• केवल रंग
• width और height