CSS Performance Optimization Tips

Introduction

Optimizing CSS improves page load speed, user experience, and overall website performance. Here are best practices for writing efficient CSS.

1. Minimize CSS File Size

Minify CSS

Use tools like CSSNano or CleanCSS to remove whitespace and comments.

npx clean-css-cli -o styles.min.css styles.css

Remove Unused CSS

Use tools like PurgeCSS to eliminate unused styles.

npx purgecss --content="./*.html" --css="./css/*.css" --output="./dist"

2. Optimize Selectors

Avoid Deep Nesting

/* Bad */
.container .header .nav ul li a {
    color: blue;
}

Use simpler selectors for better performance:

.nav a {
    color: blue;
}

3. Use Efficient CSS Properties

Avoid Expensive Properties

Avoid properties that trigger reflows, like box-shadow or width: auto.

/* Expensive */
.box {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

Use will-change for Animations

div {
    will-change: transform;
}

4. Reduce HTTP Requests

Use CSS Sprites

Combine images into one file and use background-position.

.sprite {
    background-image: url('sprite.png');
    background-position: -10px -20px;
}

Load Critical CSS Inline

<style>
  body { font-family: Arial, sans-serif; }
</style>

5. Enable Gzip or Brotli Compression

On Apache:

AddOutputFilterByType DEFLATE text/css

On Nginx:

gzip_types text/css;

Conclusion

Following these CSS optimization techniques improves page speed, reduces render-blocking issues, and enhances SEO.