CSS Performance
📌 Covered in this chapter:
File Size · Unused CSS · Critical CSS · Loading · Expensive Selectors · Reflow · Repaint · Compositing · Transform vs Position · Animation Performance · Image Optimization · Auditing · Caching
Welcome to Chapter 47: CSS Performance — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
📚 What You Will Learn
- CSS file size optimization and unused CSS removal
- Critical CSS inlining for faster First Contentful Paint
- Reflow vs repaint vs compositing — browser rendering pipeline
- Animation performance — transform/opacity vs width/height
- Performance auditing with Lighthouse and DevTools
💡 Why This Matters
CSS directly impacts Core Web Vitals. Large CSS files block rendering. Animating width/height causes layout thrashing. Understanding the browser rendering pipeline helps you write CSS that runs at 60fps and loads in milliseconds.
1CSS Loading & File Size
HTML — Efficient CSS Loading▶ Try in Editor
- PurgeCSS / Tailwind JIT: Remove unused classes from production build
- Split CSS: critical.css (inline) + main.css (deferred)
- Minify: cssnano, clean-css — remove whitespace and comments
- Cache:
Cache-Control: max-age=31536000with hashed filenames - Avoid @import in CSS: blocks parallel downloads — use HTML link tags
2Rendering Pipeline — Reflow, Repaint, Compositing
JavaScript → Style → Layout → Paint → Composite
↑ ↑ ↑ ↑
cheap expensive expensive cheap
Layout (Reflow): width, height, margin, padding, display
Paint: color, background, box-shadow, border-radius
Composite only: transform, opacity (GPU accelerated ✅)
CSS — Performance Comparison▶ Try in Editor
/* ❌ SLOW — triggers Layout every frame */
.bad-animation {
animation: move 1s infinite;
}
@keyframes move {
from { left: 0; }
to { left: 200px; }
}
/* ✅ FAST — compositor only, GPU accelerated */
.good-animation {
animation: move 1s infinite;
}
@keyframes move {
from { transform: translateX(0); }
to { transform: translateX(200px); }
}
/* ✅ Also fast */
.fade { transition: opacity 200ms; }
.card:hover { opacity: 0.9; }3Selector Performance & Auditing
- Right-most selector matters most — browser matches right to left
- Avoid:
*, deep nesting,[attr*=""]universal attribute - Prefer: Single class selectors
.nav-link - will-change:
will-change: transform;hint browser to optimize (use sparingly) - contain:
contain: layout style;isolates rendering scope
Audit tools: Lighthouse (Chrome DevTools), WebPageTest, CSS Stats, Coverage tab in DevTools (shows unused CSS %).
⚠️ Common Mistakes
- Animating width, height, top, left — causes layout reflow every frame
- will-change on everything — wastes GPU memory
- @import chains in CSS — serial loading
- 500KB CSS file with 80% unused styles
- Not using font-display: swap — invisible text during font load
❓ Mini Quiz
Q1 transform vs left animation — eppudu transform fast?
transform and opacity composite layer lo run avuthayi — GPU accelerated, no layout reflow. left/top trigger layout every frame.
Q2 Critical CSS enti?
Above-the-fold content ki required minimum CSS — inline in head for faster First Contentful Paint. Rest deferred.
✅ Quick Recap
- Minify, purge unused CSS, cache with hashed filenames
- Animate transform and opacity only — avoid width/height/top/left
- Critical CSS inline, defer non-critical stylesheets
- Lighthouse and Coverage tab for auditing
- contain and will-change for targeted optimization