Critical CSS
Critical CSS is the minimal CSS needed for above-the-fold rendering. Inline it to speed up first paint, and load the rest later.
Definition
Critical CSS is the minimal set of styles needed to render above-the-fold content. Inlining it allows the browser to render without waiting for external CSS, while loading the rest later improves FCP/LCP.
Why it matters
- Reduces render-blocking CSS impact
- Improves FCP/LCP and perceived speed
- Especially helpful on CSS-heavy sites
How to implement
- Inline only above-the-fold styles
- Load remaining CSS in a non-blocking way
- Keep critical CSS small to avoid bloating HTML
FAQ
Common questions about this term.