---
id: wiki-2026-0508-렌더링-차단-리소스-render-blocking-resou
title: 렌더링 차단 리소스 (Render-blocking Resources)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Render Blocking, Critical Resources, Critical Rendering Path]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [performance, web-vitals, rendering, frontend]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: html
  framework: browser
---

# 렌더링 차단 리소스 (Render-blocking Resources)

## 매 한 줄
> **"매 render-blocking = First Paint 까지 매 다운로드/parse 필수 리소스"**. 매 head 안 sync `<script>` + 매 default `<link rel="stylesheet">` — 매 둘 다 차단. 매 2026 modern = 매 critical CSS inline + `defer/async` script + `media` query split + 매 LCP 최적화.

## 매 핵심

### 매 차단 리소스
- `<script src>` (no `defer`/`async`) — 매 HTML parse 차단.
- `<link rel="stylesheet">` — 매 render 차단 (parse 차단 의 X).
- `@import` in CSS — 매 추가 차단.
- Web fonts — 매 FOIT/FOUT 매 paint 지연.

### 매 비차단 만들기
- `<script defer>` — DOMContentLoaded 직전 실행, parse 차단 X.
- `<script async>` — 다운로드 즉시 실행, parse 차단 가능.
- `<link rel="preload">` — early discovery.
- `media` attribute — 매 print/non-matching media — 매 비차단.
- Critical CSS inline + 매 rest async load.

### 매 영향 metric
- **FCP** (First Contentful Paint).
- **LCP** (Largest Contentful Paint).
- **TBT** (Total Blocking Time).

## 💻 패턴

### Defer vs async
```html
<!-- 매 GOOD — 매 page-essential, parse 비차단 -->
<script defer src="/app.js"></script>

<!-- 매 GOOD — 매 independent (analytics) -->
<script async src="https://analytics.example.com/track.js"></script>

<!-- 매 BAD — 매 parse 차단 -->
<script src="/app.js"></script>
```

### Critical CSS inline
```html
<head>
  <style>
    /* 매 above-the-fold 만 — 매 14KB 이하 — 매 1RTT */
    body { margin: 0; font-family: system-ui; }
    .hero { min-height: 60vh; background: #111; color: #fff; }
  </style>
  <link rel="preload" href="/main.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/main.css"></noscript>
</head>
```

### media query split
```html
<!-- 매 print — 매 즉시 비차단 -->
<link rel="stylesheet" href="print.css" media="print">

<!-- 매 wide screen 만 — small 매 비차단 -->
<link rel="stylesheet" href="desktop.css" media="(min-width: 1024px)">
```

### Preload critical font
```html
<link rel="preload" href="/fonts/Inter.var.woff2" as="font"
      type="font/woff2" crossorigin>
<style>
  @font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter.var.woff2') format('woff2-variations');
    font-display: swap;  /* 매 FOUT — 매 paint 차단 X */
  }
</style>
```

### Modulepreload (ES modules)
```html
<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>
```

### Resource hints
```html
<link rel="preconnect" href="https://api.example.com">
<link rel="dns-prefetch" href="https://cdn.example.com">
```

### Speculation Rules (Chrome 121+)
```html
<script type="speculationrules">
{
  "prerender": [{ "where": { "href_matches": "/article/*" }, "eagerness": "moderate" }]
}
</script>
```

### Fetch priority
```html
<img src="hero.webp" fetchpriority="high" alt="...">
<script src="non-critical.js" defer fetchpriority="low"></script>
```

## 매 결정 기준
| 리소스 | 처리 |
|---|---|
| Critical CSS (above fold) | inline `<style>` |
| Non-critical CSS | preload + onload swap, OR media query split |
| App JS (DOM-dependent) | `defer` |
| 3rd-party analytics | `async` |
| Web font (critical) | preload + `font-display: swap` |
| LCP image | `fetchpriority="high"` |
| Below-fold image | `loading="lazy"` |

**기본값**: Critical CSS inline (≤14KB), 매 script `defer`, font preload + swap, LCP image high priority.

## 🔗 Graph
- 부모: [[Web Performance]] · [[Critical Rendering Path (CRP)|Critical Rendering Path]]
- 변형: [[Critical CSS]]
- 응용: [[Core Web Vitals Optimization (INP, LCP, CLS)|Core Web Vitals]]
- Adjacent: [[Speculation Rules]]

## 🤖 LLM 활용
**언제**: Lighthouse audit 분석, "render blocking" 경고 해결, critical CSS 추출.
**언제 X**: 매 specific framework SSR config — 매 framework docs 매 더 정확.

## ❌ 안티패턴
- **모든 CSS head sync**: 매 critical 만 inline.
- **`<script>` head sync**: 매 `defer` 의 사용.
- **`@import` chain**: 매 sequential 차단 — 매 `<link>` 의 사용.
- **font-display: block** (default): 매 FOIT 매 3s — 매 `swap`.
- **preload 남발**: 매 5개+ — 매 priority 무의미 — 매 critical 만.

## 🧪 검증 / 중복
- Verified (web.dev, MDN Performance, Lighthouse audits, Chrome DevRel).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — defer/async + critical CSS + preload |
