---
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 — `<link rel="stylesheet">` HEAD 안에서 매 parse 차단.
- JS = 매 parser-blocking — `<script>` 매 DOM build 차단 (async/defer 외).
- Font = 매 paint-blocking (FOIT) — `font-display: swap` 권장.

### 매 응용
1. Above-the-fold critical CSS inline.
2. JS `defer` / `type="module"` — 매 default async.
3. Preload key resources — `<link rel="preload" as="font">`.
4. Speculation Rules API (Chrome 122+) — prerender next nav.

## 💻 패턴

### 1. Critical CSS inline
```html
<head>
  <style>
    /* above-the-fold only */
    body { margin: 0; font: 16px/1.5 system-ui; }
    .hero { min-height: 60vh; }
  </style>
  <link rel="preload" href="/main.css" as="style" onload="this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/main.css"></noscript>
</head>
```

### 2. Defer + module scripts
```html
<script src="/app.js" defer></script>
<script type="module" src="/app.mjs"></script>
<!-- module = defer by default -->
```

### 3. Resource hints
```html
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://api.example.com">
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="modulepreload" href="/chunks/router.js">
```

### 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
<script type="speculationrules">
{
  "prerender": [{ "where": { "href_matches": "/*" }, "eagerness": "moderate" }]
}
</script>
```

### 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 — `<link>` 사용.
- **`<script>` in head w/o defer**: 매 DOM 파싱 차단.
- **Sync XHR**: 매 deprecated — 매 fetch async.
- **Forced sync layout**: 매 read-write-read pattern — batch.

## 🧪 검증 / 중복
- Verified (web.dev, Chrome DevRel docs 2024-2026).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — CRP + Speculation Rules + View Transitions |
