CSS Performance & Rendering Optimization | Reduce Reflows & Paints

Performance is a critical part of modern web development. Even beautifully designed CSS can hurt user experience if rendering is slow. This lesson covers how to reduce reflows, repaints, and improve rendering speed with practical examples and explanations.

Why CSS Performance Matters

Browsers render pages in layers:

• DOM construction: parsing HTML
• Style calculation: matching selectors to elements
• Layout (reflow): calculating positions and sizes
• Paint: drawing pixels
• Composite: layering elements on screen

Info!
Layout, paint, and composite steps are the heaviest operations. Minimizing them improves FPS and reduces jank.

Reflows (Layout Thrashing)

A reflow happens whenever the browser recalculates layout. Changing geometry, sizes, or positions triggers it.

Reflow Example (Expensive)

<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> </div> <style> .container { display: flex; } .item { width: 200px; margin: 10px; background: #c7d2fe; transition: width 0.3s; } /* Triggering reflow repeatedly */ .item:hover { width: 250px; } </style>

How it works:
Increasing width forces the browser to recalc layout for all items. This triggers reflow and can reduce FPS if many elements exist.

Optimize Layout with Transform & Scale

Instead of changing width/height, use transform. Transforms do not trigger layout recalculation, only the composite step.

Transform Optimization Example

<div class="card">Hover Me</div> <style> .card { width: 200px; height: 120px; background: #6366f1; color: white; display: flex; align-items: center; justify-content: center; border-radius: 12px; transition: transform 0.3s; } .card:hover { transform: scale(1.1); } </style>

How it works:
The element scales visually without recalculating layout. This reduces reflows and improves FPS.

Minimize Paint Costs

Paint happens when pixels are drawn. Expensive paints occur with:

• Box shadows on large elements
• Border-radius + background gradients
• Opacity and filter effects

Paint Optimization Example

<div class="shadow-card">Hover Me</div> <style> .shadow-card { width: 200px; height: 120px; background: #f1f5f9; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: box-shadow 0.3s; } /* Avoid huge shadows */ .shadow-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.15); } </style>

How it works:
Large, complex shadows force the browser to repaint more pixels. Simpler shadows reduce paint overhead.

Use will-change Wisely

will-change hints the browser to promote elements to a layer, reducing reflows/paints during animations.

Live will-change Example

<div class="animated-box">Hover Me</div> <style> .animated-box { width: 200px; height: 120px; background: #6366f1; color: white; display: flex; align-items: center; justify-content: center; border-radius: 12px; transition: transform 0.3s; will-change: transform; } .animated-box:hover { transform: translateY(-10px) scale(1.05); } </style>

How it works:
The browser preps a separate layer for this element, reducing reflow/paint cost during interaction.

Layout Techniques to Reduce Reflows

• Use flex and grid instead of floats
• Avoid changing geometry dynamically when possible
• Batch DOM changes using documentFragment or requestAnimationFrame
• Use transforms for animations

Rendering Summary

Rendering speed depends on minimizing:

• Reflows: layout recalculations
• Paints: drawing pixels
• Composites: layer merging

Tip!
Use performance tools (Chrome DevTools: Rendering & FPS meter) to identify bottlenecks.

Final Performance Rules

• Prefer transform & opacity for animations
• Minimize complex shadows, gradients, and filters
• Batch DOM changes
• Use will-change selectively
• Measure first, optimize second

Optimized CSS is invisible. Users feel only the speed.

Next lesson: CSS for Real Projects