CSS Performance Optimization
CSS can significantly impact page performance — large files block rendering, complex selectors slow layout, and expensive properties cause jank. Optimize your CSS for fast first paint, smooth scrolling, and optimal Core Web Vitals scores.
Performance Techniques
- Critical CSS — Inline above-the-fold CSS in <head> for instant first paint. Load the rest async
- Minify CSS — Remove whitespace, comments, and unused rules. Reduces file size 20-30%
- Remove unused CSS — PurgeCSS or UnCSS removes selectors not used in HTML. Can reduce CSS by 90%
- Avoid expensive selectors — *:not(.x) and deep nesting are slow. Browsers read selectors right-to-left
- Reduce repaints — Avoid animating width, height, top, left. Use transform and opacity (GPU accelerated)
- content-visibility: auto — Browser skips rendering off-screen content. 50%+ rendering speed improvement
- Contain property — contain: layout style paint isolates elements from rest of page layout
Performance Code
/* Critical CSS (inline in <head>) */
/* Only include styles for above-the-fold content */
/* ✅ Efficient selectors */
.card__title { color: #333; } /* Direct class — fast */
/* ❌ Expensive selectors (avoid) */
div > div > div > ul > li > a { } /* Deep nesting — slow */
[class*="card"] { } /* Wildcard attribute — slow */
/* Skip rendering off-screen content */
.below-fold {
content-visibility: auto;
contain-intrinsic-size: auto 500px; /* Estimated height */
}
/* Isolate expensive components */
.complex-widget {
contain: layout style paint;
/* Changes inside won't trigger layout outside */
}
/* Font optimization */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2') format('woff2');
font-display: swap; /* Show fallback immediately */
}
/* Reduce layout shifts */
img, video {
width: 100%;
aspect-ratio: 16/9; /* Reserve space before loading */
}Tip
content-visibility: auto is a one-property performance win. It tells the browser to skip rendering off-screen elements. Add it to sections below the fold for 50%+ rendering speed improvement on long pages.
Core Web Vitals are Google ranking factors — optimize for all three
Common Mistake
Animating width, height, top, or left properties. These trigger full layout recalculations. Always use transform (translateX/Y, scale) and opacity for animations — they skip layout and paint, running entirely on the GPU.
Practice Task
Optimize a page: (1) Add content-visibility: auto + contain-intrinsic-size to sections below the fold, (2) Replace a top animation with transform: translateY, (3) Run Lighthouse before/after and compare the Performance score.
Quick Quiz
Key Takeaways
- CSS can significantly impact page performance — large files block rendering, complex selectors slow layout, and expensive properties cause jank.
- Critical CSS — Inline above-the-fold CSS in <head> for instant first paint. Load the rest async
- Minify CSS — Remove whitespace, comments, and unused rules. Reduces file size 20-30%
- Remove unused CSS — PurgeCSS or UnCSS removes selectors not used in HTML. Can reduce CSS by 90%