---
id: wiki-2026-0508-critical-rendering-path
title: Critical Rendering Path (CRP)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [CRP, critical rendering path, browser pipeline, DOM, CSSOM, render tree, reflow, repaint, compositing]
duplicate_of: none
source_trust_level: A
confidence_score: 0.95
verification_status: applied
tags: [web-performance, browser, dom, cssom, render-tree, reflow, repaint, compositing, frontend-engineering]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
language: web standards
framework: any browser
---
# Critical Rendering Path
## 매 한 줄
> **"매 byte → 매 pixel 의 pipeline"**. 매 DOM + CSSOM → 매 Render Tree → 매 Layout → 매 Paint → 매 Composite. 매 web performance 의 fundamental. 매 each step 의 understand → 매 optimize 의 right tool.
## 매 핵심 step
### 1. DOM (Document Object Model)
- 매 HTML 의 incremental parse.
- 매 byte → token → node → tree.
- 매 partial 도 OK.
### 2. CSSOM (CSS Object Model)
- 매 CSS 의 parse.
- 매 render-blocking (vs DOM 의 incremental).
- 매 FOUC 방지.
### 3. Render Tree
- 매 DOM + CSSOM 의 결합.
- 매 visible element 만 (display:none 의 X).
### 4. Layout (Reflow)
- 매 geometry 계산 (position, size).
- 매 expensive — 매 entire subtree 의 trigger.
### 5. Paint (Repaint)
- 매 pixel 의 color / shadow.
- 매 layer per layer.
### 6. Compositing
- 매 layer 의 GPU 의 combine.
- 매 transform / opacity 의 composite-only.
### Render-blocking resources
- **CSS** (default).
- **`
```
### Critical CSS inline
```html
```
### Preload + preconnect
```html
```
### Avoid forced reflow
```js
// 매 ❌ Bad — 매 reflow per iteration
for (const el of items) {
el.style.width = el.offsetWidth + 10 + 'px'; // 매 read + write
}
// 매 ✅ Good — 매 batch read, then batch write
const widths = items.map(el => el.offsetWidth); // 매 read all
items.forEach((el, i) => {
el.style.width = widths[i] + 10 + 'px'; // 매 write all
});
```
### Use transform / opacity (composite only)
```css
/* 매 ❌ reflow */
.modal-bad { transition: top 200ms, width 200ms; }
/* 매 ✅ composite only */
.modal-good { transition: transform 200ms, opacity 200ms; }
.modal-good.show { transform: translateY(0); opacity: 1; }
.modal-good.hide { transform: translateY(-20px); opacity: 0; }
```
### will-change hint (sparingly)
```css
.about-to-animate { will-change: transform; }
/* 매 매 animation 완료 시 의 remove */
```
### Image priority + lazy
```html
```
### Resource hint priority
```html
```
### Lighthouse CRP analysis
```bash
npx lighthouse https://example.com --only-categories=performance \
--output=json --output-path=./report.json
# 매 매 critical-request-chains 의 review
node -e "
const r = require('./report.json');
console.log(JSON.stringify(r.audits['critical-request-chains'], null, 2));
"
```
### DevTools Performance trace
```
1. Open DevTools → Performance tab.
2. Click record + reload page.
3. Stop after page loaded.
4. Look at Main thread:
- Long tasks (>50ms).
- Layout thrashing (purple bars).
- Paint cost (green).
5. Identify blocking resources.
```
### Server-Timing (server contribution)
```js
// 매 Express middleware
app.use((req, res, next) => {
const start = Date.now();
res.on('finish', () => {
res.set('Server-Timing', `total;dur=${Date.now() - start}`);
});
next();
});
// 매 client 의 visible
performance.getEntriesByType('navigation')[0].serverTiming;
```
### HTTP 103 Early Hints
```http
HTTP/2 103 Early Hints
Link: ; rel=preload; as=style
Link: ; rel=preload; as=script
HTTP/2 200 OK
Content-Type: text/html
...
```
→ 매 server response 전 의 hint.
## 🤔 결정 기준
| 상황 | Approach |
|---|---|
| Above-fold | Inline critical CSS + preload hero image |
| Below-fold | Lazy load |
| Animations | transform + opacity only |
| Third-party | Async + preconnect |
| Heavy JS | Defer + code split |
| LCP slow | Preload + SSR + CDN |
| Layout shift | Image dimensions + aspect-ratio |
**기본값**: 매 inline critical + 매 defer rest + 매 modern image + 매 transform animations.
## 🔗 Graph
- 부모: [[Web-Performance]] · [[Browser]] · [[Frontend]]
- 변형: [[Reflow]] · [[Repaint]] · [[Compositing]] · [[Render Tree]]
- 응용: [[Core Web Vitals Optimization (INP, LCP 개선)]] · [[CSS Animations]] · [[Container_Queries]]
- Adjacent: [[Bottlenecks]] · [[Chrome DevTools 메모리 프로파일링]] · [[Baseline (Web Platform Features)]] · [[Case-Study-Allbirds-PWA-Redesign]]
## 🤖 LLM 활용
**언제**: 매 perf audit. 매 frontend optimization. 매 LCP / FCP 의 fix.
**언제 X**: 매 backend (다른 model).
## ❌ 안티패턴
- **Sync `