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