Critical Rendering Path Performance Budget
Budget the critical rendering path for fast first paint. Track render-blocking CSS, synchronous JavaScript, font loading, and above-the-fold resource priorities with budgets for each pipeline stage.
Detailed Explanation
Critical Rendering Path Budgets
The critical rendering path (CRP) is the sequence of steps the browser takes to convert HTML, CSS, and JavaScript into pixels on screen. Budgeting the CRP means controlling what resources block the first render.
CRP Components
| Resource | Render Blocking? | Budget Impact |
|---|---|---|
| HTML document | Yes | Must be small |
CSS in <head> |
Yes | Critical only |
Synchronous JS in <head> |
Yes | Avoid entirely |
| Fonts (default) | Partially | font-display |
| Images | No | LCP impact |
| Async/defer JS | No | Not blocking |
CRP Budget Template
| Resource | Budget |
|---|---|
| HTML (above-fold) | < 14 KB |
| Critical CSS (inline) | < 14 KB |
| Sync JS in head | 0 KB |
| Preloaded fonts | < 30 KB |
| Total render-blocking | < 28 KB |
The 14 KB limit comes from TCP slow start — the initial congestion window allows approximately 14 KB in the first round-trip.
Why 14 KB Matters
On the first TCP connection, the server can send approximately 10 TCP segments (14,600 bytes). If your critical resources fit within this window, the first render can happen in a single round-trip:
- Browser sends request (1 RTT)
- Server responds with HTML + inlined critical CSS (fits in initial window)
- Browser can render immediately — no additional round-trips needed for CSS
Optimization Strategies
Inline critical CSS:
- Extract above-the-fold CSS with tools like Critical or Critters
- Inline it in a
<style>tag in the<head> - Load the full stylesheet asynchronously
Eliminate render-blocking JS:
- Move all scripts to the bottom of
<body> - Use
deferfor scripts that need DOM access - Use
asyncfor independent scripts
Font loading:
- Use
font-display: swaporfont-display: optional - Preload critical font files
- Use
size-adjustto minimize layout shift
Tracking CRP in the Budget Tracker
Create resource entries for render-blocking assets only:
critical.css (inline)— 10 KB (CSS type)preloaded-font.woff2— 22 KB (Font type)- Any sync JS should show as a warning — target 0 KB
Compare the total of render-blocking resources against your 28 KB budget.
Use Case
CRP budgets are essential for sites that need sub-1-second FCP. News sites, content aggregators, and any site competing on perceived speed benefits from explicitly budgeting render-blocking resources. By keeping critical resources under 14 KB, the first paint can happen in a single network round-trip, creating a near-instant perceived load.