Critical CSS
Definition
The minimum CSS needed to render above-the-fold content, inlined in HTML to speed up initial page display.
What is Critical CSS?
Critical CSS is the subset of your stylesheet needed to render the content visible when a page first loads – the above-the-fold area. By inlining this CSS directly in your HTML, the browser can display content immediately without waiting for external stylesheets.
The rest of your CSS loads asynchronously, styling below-fold content as users scroll.
Why Critical CSS Matters
Eliminates Render-Blocking
External CSS files block rendering. Inlined critical CSS removes this bottleneck for initial content.
Faster First Paint
Content appears faster because the browser has everything needed to render above-fold content in the initial HTML response.
Improved Core Web Vitals
Faster rendering directly improves FCP and often LCP scores.
Better Perceived Performance
Users see content sooner, even if the full page takes the same time to complete loading.
How Critical CSS Works
1. Identify Critical Styles
Determine which CSS rules style above-the-fold content. This varies by page and viewport size.
2. Inline in HTML
Place critical CSS in a <style> tag in the document head.
3. Load Rest Asynchronously
Use techniques to load the full stylesheet without blocking rendering.
4. Avoid Flash of Unstyled Content
The transition from critical to full CSS should be seamless.
Determining What's Critical
Critical CSS typically includes:
- Basic layout and structure
- Typography for visible text
- Background colours and key images
- Navigation styling
- Hero section styles
It excludes:
- Below-fold component styles
- Hover and interaction states
- Print styles
- Rarely-used features
Implementation Approaches
Manual Extraction
Identify and extract critical styles by hand. Accurate but time-consuming and requires updates.
Automated Tools
Tools like Critical, Penthouse, or CriticalCSS analyse pages and extract critical styles automatically.
Build Pipeline Integration
Modern build tools can automate critical CSS extraction during deployment.
Considerations
Multiple Page Templates
Different page layouts need different critical CSS. Homepage, product pages, and blog posts have different above-fold content.
Maintenance Overhead
Critical CSS needs updating when designs change. Automation reduces this burden.
Size Balance
Keep critical CSS under 14KB to fit in the first server response. Larger sizes reduce the benefit.