Introduction

CSS is often underestimated in performance tuning, but inefficient CSS can block rendering, cause layout shifts, and hurt SEO. On mobile devices with slower connections, these issues become critical.

In this chapter, you will learn:

How CSS affects rendering (Render Blocking)
Minification and compression techniques
Reducing Repaints, Reflows, and Layout Shifts (CLS)
Optimizing fonts and animations
Critical CSS and unused style removal

How Render-Blocking Works

Browsers must download and parse all external CSS before showing any content. This makes CSS "render-blocking".

Impact: Large, unoptimized CSS files keep the screen blank longer, delaying the First Contentful Paint (FCP).

<!-- Blocks rendering until loaded -->
<link rel="stylesheet" href="style.css">

Optimization Strategies

1. Minify CSS

Remove whitespace, comments, and unnecessary characters to reduce file size.

/* Before */
.card {
  padding: 20px;
}

/* After (Minified) */
.card{padding:20px}

2. Avoid @import

Using @import inside CSS files creates a sequential download chain, slowing down rendering. Always use <link> tags in HTML instead.

3. Critical CSS

Inline the CSS required for "above-the-fold" content directly in the <head> to render the initial view instantly, while loading the rest of the styles asynchronously.

Rendering Performance: Reflows & Repaints

Changing certain properties forces the browser to recalculate the layout (Reflow), which is expensive.

High Cost (Reflow)	Low Cost (GPU)
`width`, `height`	`transform`
`top`, `left`	`opacity`
`margin`, `padding`	`filter`

Best Practice: Use transform: translate() instead of top/left for animations.

Common Beginner Mistakes & Best Practices

Common Mistakes

Loading huge framework files for small sites
Using deep nested selectors (e.g., .nav ul li a span)
Infinite animations causing high CPU usage

Best Practices

Audit and remove unused CSS regularly
Use flat selectors for faster matching
Use font-display: swap for web fonts

Chapter Summary

In this chapter, you learned:

How to minimize render-blocking by optimizing CSS delivery.
Why you should avoid @import and use minification.
The difference between expensive Reflows and cheap GPU Paint operations.
How to improve Core Web Vitals (LCP, CLS, FCP) via CSS optimization.

You now understand how to write fast, efficient, SEO-friendly CSS that performs well on all devices.

CSS Performance