ꦲꦏ꧀ꦱꦫ
Back to stories
<Frontend/>
Premium CodeCSSPerformanceFrontend

Frontend Performance (Part 4): Critical CSS and Layout

PublishedUpdated AKSR
Share by

Frontend Performance (Part 4): Critical CSS and Layout

Heavy or poorly structured CSS can cause layout thrash (repeated reflows) and jank (slow or stuttering paint). Critical CSS, containment, and content-visibility help keep first paint fast and scrolling smooth. This post covers practical patterns for senior frontends.

Critical CSS: above-the-fold first

Critical CSS is the minimal set of rules needed to render the above-the-fold content. Inline it in <head> (or load it with high priority) so the first paint doesn't wait on a large stylesheet. Defer or load async the rest for below-the-fold and components.