bluemsi/2nd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[G1-Sync] Manual knowledge update

Browse Source
This commit is contained in:
Antigravity Agent
2026-05-10 22:08:15 +09:00
parent 21ac3ed255
commit 504fd5fb42
3011 changed files with 380280 additions and 206977 deletions
Download Patch File Download Diff File Expand all files Collapse all files
10_Wiki/Topics/Frontend/렌더링 차단 리소스(Render-blocking resources).md
+134 -69
View File
@@ -1,96 +1,161 @@
---
id: wiki-2026-0508-렌더링-차단-리소스-render-blocking-resou
title: 렌더링 차단 리소스(Render blocking resources)
title: 렌더링 차단 리소스 (Render-blocking Resources)
category: 10_Wiki/Topics
status: needs_review
status: verified
canonical_id: self
aliases: []
aliases: [Render Blocking, Critical Resources, Critical Rendering Path]
duplicate_of: none
source_trust_level: A
confidence_score: 0.92
tags: [uncategorized]
confidence_score: 0.9
verification_status: applied
tags: [performance, web-vitals, rendering, frontend]
raw_sources: []
last_reinforced: 2026-05-08
last_reinforced: 2026-05-10
github_commit: pending
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
tech_stack:
language: unspecified
framework: unspecified
language: html
framework: browser
---
# [[렌더링 차단 리소스(Render-blocking resources)|렌더링 차단 리소스(Render-Blocking resources]]
# 렌더링 차단 리소스 (Render-blocking Resources)
## 📌 한 줄 통찰 (The Karpathy Summary)
렌더링 차단 리소스란 브라우저가 화면에 페이지를 그리는 렌더링 과정을 일시적으로 중단하게 만드는 핵심 웹 리소스를 뜻합니다 [1]. 대표적인 예인 CSS는 스타일이 적용되지 않은 화면(FOUC)이 사용자에게 노출되는 것을 막기 위해 [[CSSOM|CSSOM]]이 완전히 구성될 때까지 렌더링을 막습니다 [2, 3]. 동기적으로 실행되는 [[JavaScript|JavaScript]] 또한 HTML 파서를 멈추게 만들어 결과적으로 렌더링을 차단합니다 [4, 5]. 이러한 리소스들을 비동기 처리하거나 다운로드를 지연시키는 등 최적화하는 것은 초기 페이지 로드 속도와 웹 성능을 향상시키는 핵심 요소입니다 [6, 7].
## 매 한 줄
> **"매 render-blocking = First Paint 까지 매 다운로드/parse 필수 리소스"**. 매 head 안 sync `<script>` + 매 default `<link rel="stylesheet">` — 매 둘 다 차단. 매 2026 modern = 매 critical CSS inline + `defer/async` script + `media` query split + 매 LCP 최적화.
## 📖 구조화된 지식 (Synthesized Content)
- **CSS의 렌더링 차단 원리**: 브라우저가 문서 파싱 중 일부 외부 리소스 요청을 만나면 해당 에셋이 처리될 때까지 렌더링을 중단합니다 [8]. CSS는 기본적으로 렌더링 차단 리소스로 동작하는데, 그 이유는 나중에 로드된 스타일 규칙이 이전 규칙을 덮어씌울 수 있기 때문에 브라우저가 [[CSSOM(CSS Object Model)|CSSOM(CSS Object Model]]을 완성하기 전까지 화면 렌더링을 보류해야 하기 때문입니다 [3]. 이는 사용자가 스타일이 입혀지지 않은 HTML 원본을 보게 되는 '스타일 없는 콘텐츠의 번쩍임(FOUC)' 현상을 방지하기 위한 안전장치입니다 [2]. `<head>` 태그 내에 존재하는 렌더링 차단 리소스는 사실상 페이지 전체의 렌더링을 차단합니다 [9].
- **파서 차단([[Parser|Parser]]-blocking)과 JavaScript**: JavaScript는 기본적으로 파서를 차단하는 리소스입니다 [5]. 스크립트 실행 과정에서 DOM이나 CSSOM이 어떻게 변경될지 알 수 없으므로, 브라우저는 실행이 완료될 때까지 HTML 파싱을 중단합니다 [5, 10]. 파싱이 막히면 브라우저는 그 이후의 콘텐츠에 접근해 렌더링할 수 없기 때문에, 파서 차단 리소스는 결과적으로 렌더링도 차단하게 됩니다 [11].
- **차단 우회 및 최적화 방법**:
- CSS의 경우 `<link>` 요소에 `media="print"`와 같이 현재 뷰포트 조건과 일치하지 않는 미디어 속성을 지정하면 렌더링을 차단하지 않도록 만들 수 있습니다 [12].
- JavaScript의 경우 `<script>` 태그에 `async` 또는 `defer` 속성을 추가하여 파서와 렌더링이 막히는 것을 방지할 수 있습니다 [5, 13].
- 중요하지 않은 리소스의 다운로드를 지연시키고, CSS 선택자 특이성을 최적화하거나 축소(minifying)하여 전체 차단 시간을 줄여야 합니다 [6, 14].
- 최신 기술로는 [[Chrome|Chrome]] 105부터 도입된 `blocking=render` 속성을 통해 파서는 계속 진행하도록 두면서 명시적으로 렌더링만 차단하게 설정할 수도 있습니다 [5].
- **측정 및 식별**: WebPageTest, [[Lighthouse|Lighthouse]] 등과 같은 성능 감사 도구는 렌더링 차단 리소스를 식별하는 기능을 제공합니다. 이를 통해 어떤 리소스가 실제 페이지 렌더링을 지연시키고 있는지 찾아내어 최적화의 단서로 삼을 수 있습니다 [15].
## 매 핵심
## 🔗 지식 연결 (Graph)
- **Related Topics:** 핵심 렌더링 경로([[Critical Rendering Path|Critical Rendering Path]]), [[CSSOM(CSS Object Model)|CSSOM(CSS Object Model]], 파서 차단 리소스(Parser-blocking resources), FOUC(Flash of Unstyled Content)
- **Projects/Contexts:** [[웹 성능 최적화(Web Performance Optimization)|웹 성능 최적화(Web Performance Optimization]], Lighthouse 성능 감사
- **Contradictions/Notes:** 소스에 따르면 CSS가 렌더링을 차단한다고 해서 브라우저의 모든 작업이 중지되는 것은 아닙니다. 브라우저는 CSS를 다운로드하고 렌더링을 일시 정지한 상태에서도 나머지 HTML을 계속 처리하며 할 수 있는 다른 작업(예: 리소스 탐색 등)을 수행하여 효율성을 높입니다 [12]. 또한, 과거에는 렌더링 차단 리소스가 페이지 전체 렌더링을 막았으나 최근 브라우저(Firefox, Chrome)는 렌더링 차단 리소스 아래에 있는 콘텐츠의 렌더링만 차단하도록 동작 방식이 개선되었습니다 [9].
### 매 차단 리소스
- `<script src>` (no `defer`/`async`) — 매 HTML parse 차단.
- `<link rel="stylesheet">` — 매 render 차단 (parse 차단 의 X).
- `@import` in CSS — 매 추가 차단.
- Web fonts — 매 FOIT/FOUT 매 paint 지연.
---
*Last updated: 2026-04-25*
### 매 비차단 만들기
- `<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.
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
### 매 영향 metric
- **FCP** (First Contentful Paint).
- **LCP** (Largest Contentful Paint).
- **TBT** (Total Blocking Time).
**언제 이 지식을 쓰는가:**
- *(TODO)*
## 💻 패턴
**언제 쓰면 안 되는가:**
- *(TODO)*
### Defer vs async
```html
<!-- 매 GOOD — 매 page-essential, parse 비차단 -->
<script defer src="/app.js"></script>
## 🧪 검증 상태 (Validation)
<!-- 매 GOOD — 매 independent (analytics) -->
<script async src="https://analytics.example.com/track.js"></script>
- **정보 상태:** needs_review
- **출처 신뢰도:** A
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
## 🧬 중복 검사 (Duplicate Check)
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
- **처리 방식:** UPDATE (자동 정규화)
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
- **과거 데이터와의 충돌:** 없음
- **정책 변화:** 없음
## 🕓 변경 이력 (Changelog)
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|------|-----------|-----------|--------|
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
## 💻 코드 패턴 (Code Patterns)
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
```text
# TODO
<!-- 매 BAD — 매 parse 차단 -->
<script src="/app.js"></script>
```
## 🤔 의사결정 기준 (Decision Criteria)
### 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>
```
**선택 A를 써야 할 때:**
- *(TODO)*
### media query split
```html
<!-- 매 print — 매 즉시 비차단 -->
<link rel="stylesheet" href="print.css" media="print">
**선택 B를 써야 할 때:**
- *(TODO)*
<!-- 매 wide screen 만 — small 매 비차단 -->
<link rel="stylesheet" href="desktop.css" media="(min-width: 1024px)">
```
**기본값:**
> *(TODO)*
### 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>
```
## ❌ 안티패턴 (Anti-Patterns)
### Modulepreload (ES modules)
```html
<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>
```
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
### 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]]
- 변형: [[Critical CSS]] · [[Resource Hints]]
- 응용: [[LCP 최적화]] · [[Core Web Vitals]]
- Adjacent: [[HTTP/2 Push]] · [[103 Early Hints]] · [[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 |