What is CSS performance?

Learn factors that affect CSS render performance.

What does CSS performance mean?

CSS is not just looks; it also shapes how the browser brings the page to the screen. This flow is called the render path and has four stages: Style, Layout, Paint, Composite.

Every CSS declaration runs one or more of these stages. color only triggers paint, while width makes the browser recalculate layout. Fast CSS picks the declaration that runs the fewest stages.

What is critical CSS?

Critical CSS is the styling needed for what the user sees on the first screen. The browser cannot paint until it has downloaded and parsed the external stylesheet; that wait is called render-blocking.

If you inline the critical styles with a <style> tag inside <head>, the browser no longer waits for the external file. The rest of the styles can be deferred with the media attribute.

Exercise Inline critical CSS inside head

Complete the CSS below. Open a <style> tag and add a .hero block with background: #6366f1 and color: white. Close it with </style>.

Show example solution

/* hero critical CSS */
<style>
  .hero {
    background: #6366f1;
    color: white;
  }
</style>

Test yourself

Which CSS property triggers only the paint stage?
```
.box {
  /* this property runs only paint */
  ___: #ef4444;
}
```
- width
- margin-left
- color
- display
Show answer

color — Correct. color only runs the paint stage; it does not compute layout.
Match each render path stage to its meaning

Style

Matches selectors, applies styles
Layout

Computes box position and size
Paint

Draws pixels to the screen
Composite

Combines layers together

Write the hero background for critical CSS

<style>
  .hero { background: ____; }
</style>

Show answer

<style>
  .hero { background: #6366f1; }
</style>

Next lesson: Selector performance

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies