Last updated
CSS Performance Optimization
CSS performance affects page rendering speed. Large CSS files delay the First Contentful Paint (FCP) because CSS is render-blocking — the browser won't render content until all CSS is loaded and parsed. Optimization involves removing unused CSS, reducing specificity, avoiding expensive selectors, and splitting critical from non-critical CSS.
CSS Optimization Techniques
| Technique | Tool | Impact |
|---|---|---|
| Remove unused CSS | PurgeCSS, UnCSS | High (50–90% reduction) |
| Minification | cssnano, Lightning CSS | Medium (20–40%) |
| Critical CSS inlining | critical, Penthouse | High (FCP improvement) |
| Avoid @import | Manual | Medium (eliminates extra requests) |
| Use CSS variables | Manual | Low (maintainability) |
| Reduce specificity | Manual | Low (performance) |
Identifying Unused CSS
JavaScript
// PurgeCSS configuration
import PurgeCSS from 'purgecss';
const result = await new PurgeCSS().purge({
content: ['./src/**/*.html', './src/**/*.js', './src/**/*.jsx'],
css: ['./src/styles.css'],
safelist: {
standard: ['active', 'show', 'fade'],
deep: [/^modal/, /^tooltip/],
greedy: [/data-/]
}
});
console.log(`Removed ${result[0].rejected?.length} unused selectors`);