---
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"**. `` 가 도착할 때까지 브라우저는 paint 안 함. Critical CSS inline + non-critical async load + route-based split → LCP 50%+ 개선. 2026 표준은 Vite/Rollup chunk + `media="print"` trick.
## 매 핵심
### 매 왜 CSS 가 blocking 인가
- HTML parser 가 `` 만나면 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 — `
```
### 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
```
브라우저가 `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';
;
// 매 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
```
### 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: ; rel=preload; as=style
Link: ; 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 + `` 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 로 합치거나 `` 직접.
- **Inline ALL CSS**: HTML 비대 → critical only.
- **No font-display**: FOIT (invisible text) → `font-display: swap`.
- **CSS in ``**: legacy hack 매 — `` 에서 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 |