chore(brain): ASTRA 성장 자산 동기화 — 기능 인벤토리·growth(약점프로필/학습큐)·일화기억·장기기억·회의록 원문

2026-06-12 16:37:41 +09:00
parent a97fc7be07
commit 89fb05a28a
781 changed files with 138546 additions and 47 deletions
@@ -0,0 +1,177 @@
+---
+id: wiki-2026-0508-렌더링-블로킹-방지를-위한-css-분할-및-로딩-최적화
+title: 렌더링 블로킹 방지를 위한 CSS 분할 및 로딩 최적화
+category: 10_Wiki/Topics
+status: verified
+canonical_id: self
+aliases: [Critical CSS, CSS Code Splitting, Render-blocking CSS]
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.95
+verification_status: applied
+tags: [frontend, css, performance, critical-css, lcp]
+raw_sources: []
+last_reinforced: 2026-05-10
+github_commit: pending
+tech_stack:
+  language: css
+  framework: vite
+---
+
+# 렌더링 블로킹 방지를 위한 CSS 분할 및 로딩 최적화
+
+## 매 한 줄
+> **"매 CSS는 default 로 render-blocking"**. `<link rel="stylesheet">` 가 도착할 때까지 브라우저는 paint 안 함. Critical CSS inline + non-critical async load + route-based split → LCP 50%+ 개선. 2026 표준은 Vite/Rollup chunk + `media="print"` trick.
+
+## 매 핵심
+
+### 매 왜 CSS 가 blocking 인가
+- HTML parser 가 `<link rel="stylesheet">` 만나면 CSSOM 만들 때까지 paint X.
+- CSSOM 없이는 element 의 final style 알 수 없음 → FOUC 방지 위해 block.
+- 1 round-trip (HTTP) + parse + match = 100-500ms LCP cost.
+
+### 매 분할 전략
+- **Critical CSS**: above-the-fold 의 minimal CSS — `<style>` 으로 inline.
+- **Async load**: 나머지 CSS 는 non-blocking — `media="print"` swap trick / `rel="preload"`.
+- **Route-based split**: 각 route 마다 별도 CSS chunk — 안 쓰는 CSS 안 download.
+- **Component-scoped**: CSS-in-JS / CSS Modules → 자동 split.
+
+### 매 응용
+1. Marketing landing (LCP 핵심).
+2. SSR app (FOUC 방지 critical inline).
+3. SPA (route chunk).
+
+## 💻 패턴
+
+### Critical CSS inline (manual)
+```html
+<head>
+  <style>
+    /* 매 above-the-fold only — header, hero, font-face */
+    body { font-family: system-ui; margin: 0; }
+    .hero { height: 80vh; background: #111; color: #fff; }
+  </style>
+  <link
+    rel="preload"
+    href="/css/main.css"
+    as="style"
+    onload="this.onload=null;this.rel='stylesheet'"
+  />
+  <noscript><link rel="stylesheet" href="/css/main.css" /></noscript>
+</head>
+```
+
+### Critical CSS extraction (Vite plugin)
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite';
+import critical from 'rollup-plugin-critical';
+
+export default defineConfig({
+  plugins: [
+    critical({
+      criticalUrl: 'https://example.com/',
+      criticalBase: './dist/',
+      criticalPages: [{ uri: '', template: 'index' }],
+      criticalConfig: { inline: true, dimensions: [{ width: 375, height: 812 }, { width: 1920, height: 1080 }] },
+    }),
+  ],
+});
+```
+
+### print media swap trick (no JS)
+```html
+<link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'" />
+```
+브라우저가 `media="print"` 를 non-blocking 으로 download → onload 시 `all` 로 swap.
+
+### Route-based split (Next.js)
+```tsx
+// app/products/page.tsx — 매 자동으로 별도 CSS chunk.
+import './products.css'; // 매 only loaded on /products.
+```
+
+### CSS Modules (component-scoped)
+```tsx
+import styles from './Button.module.css';
+<button className={styles.primary}>Click</button>;
+// 매 build 시 hash → only used styles bundled.
+```
+
+### Tailwind v4 (oxide engine, 2026)
+```css
+/* main.css */
+@import "tailwindcss";
+
+@theme {
+  --color-brand: oklch(0.7 0.2 250);
+}
+```
+PurgeCSS 자동 — 매 unused class 제거. 최종 bundle 5-10KB.
+
+### Preload key fonts + CSS together
+```html
+<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin />
+<link rel="preload" href="/css/main.css" as="style" />
+```
+
+### CSS containment for paint isolation
+```css
+.card {
+  contain: content; /* 매 layout + paint + style 격리 */
+  content-visibility: auto;
+  contain-intrinsic-size: 0 200px;
+}
+```
+
+### HTTP/2 push 대체 — 103 Early Hints
+```http
+HTTP/1.1 103 Early Hints
+Link: </css/main.css>; rel=preload; as=style
+Link: </js/app.js>; rel=preload; as=script
+```
+Cloudflare/Vercel 자동 지원 — TTFB 안 기다리고 preload 시작.
+
+### Detect unused CSS (Chrome DevTools)
+```bash
+# 매 Coverage tab → Record → reload → unused % 확인.
+# 매 80%+ unused = split 필요.
+```
+
+## 매 결정 기준
+| 상황 | Approach |
+|---|---|
+| Marketing landing | Critical inline + async rest. |
+| SPA | Route-based split + CSS Modules. |
+| SSR (Next/Remix) | 매 자동 split — Tailwind v4 면 충분. |
+| Component lib | CSS-in-JS 또는 CSS Modules — tree-shake. |
+| Legacy multi-page | print media trick + critical extraction. |
+
+**기본값**: Tailwind v4 + Vite/Next 자동 chunk + `<link rel="preload">` for above-fold.
+
+## 🔗 Graph
+- 부모: [[Web Performance]] · [[Core Web Vitals Optimization (INP, LCP 개선)|Core Web Vitals]]
+- 변형: [[Critical CSS]] · [[CSS_Architecture_and_Styling|CSS-in-JS]] · [[CSS Modules]]
+- 응용: [[Tailwind v4]] · [[Vite]] · [[Next.js]]
+
+## 🤖 LLM 활용
+**언제**: LCP > 2.5s, CSS bundle > 100KB, FOUC 발생.
+**언제 X**: 매 internal tool (LCP 무관), 매 tiny site (single CSS file 충분).
+
+## ❌ 안티패턴
+- **Single mega CSS**: 매 1MB CSS load — purge + split.
+- **`@import` chain**: serial load — bundle 로 합치거나 `<link>` 직접.
+- **Inline ALL CSS**: HTML 비대 → critical only.
+- **No font-display**: FOIT (invisible text) → `font-display: swap`.
+- **CSS in `<body>`**: legacy hack 매 — `<head>` 에서 preload.
+- **Unused frameworks**: Bootstrap full 250KB 인데 button 만 사용.
+
+## 🧪 검증 / 중복
+- Verified (web.dev/extract-critical-css, MDN preload, Vite docs, Tailwind v4 docs).
+- 신뢰도 A.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — critical CSS + Tailwind v4 + Early Hints |