# CSS optimization — Web Performance Optimization

Source: https://www.geekswithgeeks.com/en/web-performance/web-perf-13

> Optimize CSS delivery and rendering through critical CSS, modern layout techniques, and minimization.

## 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

**Quiz:** What CSS properties are GPU-accelerated?

- [ ] transform and opacity
- [ ] All CSS properties
- [ ] Only colors