---
id: wiki-2026-0508-critical-rendering-path-crp
title: Critical Rendering Path (CRP)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [CRP, Browser Render Pipeline]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [browser, rendering, performance, web-vitals]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
language: HTML/CSS/JS
framework: Browser
---
# Critical Rendering Path (CRP)
## 매 한 줄
> **"매 CRP = HTML/CSS/JS → pixel 의 매 변환 단계 sequence."**. 매 단계: DOM 구축 → CSSOM 구축 → Render Tree → Layout (reflow) → Paint → Composite. 매 단계마다 매 blocking resource 의 latency가 매 LCP / FCP 의 결정. 매 2026 perspective는 INP / Core Web Vitals + speculation rules + View Transitions API.
## 매 핵심
### 매 단계
1. **DOM**: HTML parse → Document Object Model.
2. **CSSOM**: CSS parse → CSS Object Model (매 render-blocking).
3. **Render Tree**: DOM + CSSOM merge — 매 visible nodes only.
4. **Layout (Reflow)**: geometry 계산 — 매 viewport relative position/size.
5. **Paint**: 매 pixel 의 fill — layer별.
6. **Composite**: GPU 의 layer 의 final 합성.
### 매 blocking
- CSS = 매 render-blocking — `` HEAD 안에서 매 parse 차단.
- JS = 매 parser-blocking — `
```
### 3. Resource hints
```html
```
### 4. font-display swap
```css
@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2') format('woff2');
font-display: swap; /* avoid FOIT */
}
```
### 5. Speculation Rules (Chrome 122+, 2024-)
```html
```
### 6. Avoid layout thrash
```javascript
// BAD — read/write/read/write triggers reflow each time
elements.forEach((el) => {
el.style.width = el.offsetWidth + 10 + 'px';
});
// GOOD — batch reads then writes
const widths = elements.map((el) => el.offsetWidth);
elements.forEach((el, i) => { el.style.width = widths[i] + 10 + 'px'; });
```
### 7. CSS containment
```css
.card {
contain: layout paint style;
content-visibility: auto;
contain-intrinsic-size: 0 200px;
}
```
### 8. View Transitions API (2024-)
```javascript
document.startViewTransition(() => {
updateDOM();
});
```
## 매 결정 기준
| 상황 | Approach |
|---|---|
| LCP > 2.5s | Critical CSS inline + preload hero image. |
| INP > 200ms | 매 long task 의 break — `scheduler.yield()`. |
| CLS > 0.1 | 매 fixed dimensions, font-display swap + size-adjust. |
| 매 deep tree | `content-visibility: auto`. |
| Next nav predict | Speculation Rules. |
**기본값**: 매 Web Vitals 측정 → 매 bottleneck 식별 → targeted optimization.
## 🔗 Graph
- 부모: [[Browser Rendering]] · [[Web Performance]]
- 변형: [[Server-Side Rendering]] · [[Streaming SSR]]
- 응용: [[Core Web Vitals]] · [[LCP Optimization]]
- Adjacent: [[DOM]] · [[CSSOM]] · [[Layout Thrashing]]
## 🤖 LLM 활용
**언제**: 매 resource hint 매 selection, critical CSS extraction script.
**언제 X**: 매 actual measurement (Lighthouse, WebPageTest) — 매 LLM 추측 X.
## ❌ 안티패턴
- **@import in CSS**: 매 serial download — `` 사용.
- **`