←  All terms
C
Performance

Critical CSS

Critical CSS contains the styles required for the initially visible part of a page and is loaded as early as possible.

Critical CSS contains the styles required for the initially visible part of a page and is loaded as early as possible. Optimization becomes meaningful when real-user data, repeatable lab tests, and an explicit performance budget are used together. The concept is closely related to CSS and Largest Contentful Paint.

Read more

CSS

Largest Contentful Paint

Website Performance

FAQ

Critical CSS

What risks does critical CSS carry?
Incorrectly determined styles cause flicker or layout shifts when later-loaded CSS changes the appearance. The HTML also grows, and inline styles are not cached separately. When the design changes, the extraction process must keep up, or the rules go stale. CLS should be measured after rollout.
When is critical CSS worthwhile?
It is worthwhile when a large stylesheet blocks the first render and measurements show that LCP suffers as a result. With small, well-cached CSS it adds little and increases complexity. Before implementing it, teams should check whether removing unused CSS already solves the problem.
How is critical CSS created?
Usually through automation: a build step determines the styles for the immediately visible area per page type and inlines them into the HTML. The remaining CSS loads asynchronously afterward. Manual upkeep is error-prone when changes are frequent. The output should be checked at several viewport sizes to avoid layout shifts.