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.
Optimize First Contentful Paint by inlining above-the-fold critical CSS and deferring secondary styles
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%