Files

T

Antigravity Agent c24165b8bc refactor(topics): 멀티 에이전트용 지식 재편 — _Common(공통 기본기) + Domain_* 구조

에이전트 8종(대화형/프로그래머 C·S/디자이너/설계자/기획자/QA/PD/PM)에게
[공통 기본 능력 + 롤별 Specialty] 2층으로 지식을 주입하기 위한 재분류.
문서 내용·포맷은 무수정, 폴더 이동만 (6,372개 문서 수 보존 확인).

- Topic_Programming → Domain_Programming (내부 구조 보존)
- Topic_Graphic → Domain_Design
- Topic_Business → Domain_Product
- Topic_General → Domain_General
- _Common 신설: Math(구 Topic_Math_Specialty), Reasoning(구 General/From_Thinking & Reasoning),
  Reasoning_Creativity(구 General/From_창의성), Communication(Poetic_Blog_Writing + From_writing)
- 타 도메인의 From_* 폴더는 유지 (출처 표기일 뿐, 이미 도메인에 맞게 분류된 문서)
- 빈 폴더 정리 (memory/procedures)
- 에이전트→폴더 매핑은 workspace의 .astra/agent-knowledge-map.json (9개 에이전트)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

2026-07-11 11:05:56 +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, CLS)
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