CSS अनुकूलन

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

Inline above-the-fold CSS in <style> tag to avoid render-blocking. Example: colors, fonts, hero section styles. Use tools like CriticalCSS or Penthouse. Defer rest with <link rel=preload> and onload=this.rel='stylesheet'.

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

Avoid deep selectors, universal *, attribute selectors on large DOM. Browsers match selectors right-to-left: .modal .button checks each button then verifies modal parent. Use specific class selectors for speed.

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

Don't alternate read/write DOM operations. Batch reads together, then writes. Use requestAnimationFrame() for synchronized updates. Libraries like FastDOM help prevent thrashing.

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

Use CSS Grid/Flexbox instead of floats. Use will-change property sparingly. Avoid expensive properties (box-shadow, filters). Use GPU acceleration with transform and opacity for animations.

त्वरित जाँच

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

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