Files

T

Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization

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>

2026-05-20 23:52:15 +09:00

5.0 KiB

Raw Blame History

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

title

렌더링 차단 리소스 (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

<!-- 매 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

<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

<!-- 매 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

<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)

<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>

Resource hints

<link rel="preconnect" href="https://api.example.com">
<link rel="dns-prefetch" href="https://cdn.example.com">

Speculation Rules (Chrome 121+)

<script type="speculationrules">
{
  "prerender": [{ "where": { "href_matches": "/article/*" }, "eagerness": "moderate" }]
}
</script>

Fetch priority

<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 CSS
응용: Core Web Vitals Optimization (INP, LCP 개선)
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

5.0 KiB Raw Blame History