CSS optimization

Critical CSS inlining

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 selector performance

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.

Avoid layout thrashing and recalculation

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

Modern CSS for performance

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.

Quick check

Quick check: What CSS properties are GPU-accelerated?

• transform and opacity
• All CSS properties
• Only colors