CSS Size Budget and Critical CSS Strategy
Define CSS performance budgets including critical CSS extraction, unused CSS removal, and media query splitting. Track CSS size against budgets with strategies for reducing render-blocking stylesheets.
Detailed Explanation
CSS Performance Budgets
CSS is render-blocking by default — the browser cannot paint anything until it has downloaded and parsed all CSS in the document head. This makes CSS budget management directly tied to First Contentful Paint (FCP) and LCP.
CSS Budget Recommendations
| Site Type | CSS Budget | Critical CSS |
|---|---|---|
| Blog/Content | 30-50 KB | < 14 KB |
| Landing Page | 40-60 KB | < 14 KB |
| E-commerce | 60-100 KB | < 14 KB |
| SPA | 50-80 KB | < 14 KB |
| Dashboard | 80-150 KB | < 14 KB |
The 14 KB critical CSS limit comes from the TCP initial congestion window — the first round-trip can deliver approximately 14 KB of data.
Why CSS Blocks Rendering
When the browser encounters a <link rel="stylesheet"> in the head, it stops rendering until the CSS is fully downloaded and parsed. This is the CSS render-blocking problem:
- Browser receives HTML
- Parser finds
<link rel="stylesheet"> - Browser initiates CSS download
- Rendering stops until CSS is ready
- CSSOM is constructed
- Render tree is built
- First paint occurs
Optimization Strategies
- Critical CSS — Inline above-the-fold CSS in
<style>tags (< 14 KB) - Async loading — Load non-critical CSS with
media="print"+onload - Unused CSS removal — Use PurgeCSS or similar to strip unused rules
- CSS-in-JS budgeting — Track runtime CSS generated by styled-components, Emotion
- Utility framework optimization — Tailwind CSS with purge configured
Tracking CSS in the Budget Tracker
Add CSS entries by file or chunk:
critical.css— Inlined critical CSSmain.css— Main stylesheetvendor.css— Third-party component stylespage-specific.css— Route-specific styles
Media Query Splitting
Split CSS by media query for conditional loading:
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="desktop.css" media="(min-width: 768px)">
<link rel="stylesheet" href="print.css" media="print">
Only base.css blocks rendering on mobile — the desktop and print stylesheets are loaded but non-blocking.
Use Case
CSS budget tracking is especially important for sites using CSS frameworks or design systems. A Tailwind CSS project without proper purging can ship 3+ MB of CSS. Tracking CSS size as resources are added ensures the team catches bloat early and maintains fast FCP.