Antigravity Agent
f8b21af4be
10_Wiki/Topics 대규모 정리: - 오류 캡처/미완성 stub 문서 227개 제거 - 교차폴더 중복 43클러스터 병합 (63파일 → redirect) - 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건 - 카테고리 MOC 6개 신규 생성 - Graph 섹션 미해결 related-keyword 링크 10,058건 제거 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
162 lines
5.0 KiB
Markdown
162 lines
5.0 KiB
Markdown
---
|
|
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 개선)|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 |
|