Files

T

Antigravity Agent 9148c358d0 docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거

Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를
Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류.

- 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로
  자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거,
  동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거.
- 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming,
  Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business,
  Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로,
  나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는
  title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백).
  원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지.
- 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서.
- 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는
  지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지.
- Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경.
- 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.

2026-07-05 00:33:48 +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